diff --git a/src/views/About/index.js b/src/views/About/index.js
index 0cc62f1..4b1843f 100644
--- a/src/views/About/index.js
+++ b/src/views/About/index.js
@@ -38,7 +38,7 @@ export default class About extends Component {
     return (
       <>
         <div className="about d-flex flex-column align-items-center">
-          <Navbar />
+          <Navbar page={'about'} />
           <div className="about__fury d-flex">
             <div className="about__fury--right d-flex flex-column justify-content-center">
               <div className="right-top align-self-start">
diff --git a/src/views/Activation/History/index.js b/src/views/Activation/History/index.js
index de02e40..cef6b1b 100644
--- a/src/views/Activation/History/index.js
+++ b/src/views/Activation/History/index.js
@@ -1,18 +1,38 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import './index.scss';
-export default function History(props){
-  const {data} = props;
-  return(
-    <>
-      {
-        window.innerWidth > 1000 ?
-        <div className="last-qr">
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
+    span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 90,
+    button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
+  },
+};
 
-        </div> : null
-      }
-      {
-        window.innerWidth < 1000 ?
+export default function History(props) {
+  const { data } = props;
+  return (
+    <>
+      {window.innerWidth > 1000 ? (
+        <div className="activation-history d-flex">
+          <div>
+            <img src={data.image} alt={data.title} />
+            <strong style={{ fontSize: fontSize.desktop.strong }}>
+              {data.title}
+            </strong>
+          </div>
+          <span style={{ fontSize: fontSize.desktop.span }}>
+            {data.subTitle}
+          </span>
+          <button style={{ fontSize: fontSize.desktop.button }}>
+            {data.status}
+          </button>
+        </div>
+      ) : null}
+      {window.innerWidth < 1000 ? (
         <div className="mobile-activation-history d-flex">
           <div className="mobile-activation-history__right d-flex">
             <img src={data.image} alt={data.title} />
@@ -24,8 +44,8 @@ export default function History(props){
           <div className="mobile-activation-history__left d-flex">
             <button>{data.status}</button>
           </div>
-        </div> : null
-      }
+        </div>
+      ) : null}
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/views/Activation/History/index.scss b/src/views/Activation/History/index.scss
index 8e1965c..9ffe4e8 100644
--- a/src/views/Activation/History/index.scss
+++ b/src/views/Activation/History/index.scss
@@ -1,44 +1,83 @@
-.mobile-activation-history{
+.mobile-activation-history {
   width: 100%;
   padding: 15px 10px;
   justify-content: space-between;
-  background-color:white;
-  align-items:center;
+  background-color: white;
+  align-items: center;
   border-radius: 10px;
   box-shadow: 0px 0px 10px rgb(226, 226, 226);
-  &__right{
-    align-items:center;
-    img{
+  &__right {
+    align-items: center;
+    img {
       height: 100px;
       border-radius: 10px;
       margin-left: 15px;
     }
-    strong{
+    strong {
       font-family: numeralMedium;
       font-size: calc(100vw / 30);
       font-weight: 600;
       letter-spacing: -1px;
     }
-    span{
+    span {
       font-family: numeralMedium;
       font-size: calc(100vw / 35);
-      color: #00CC69;
+      color: #00cc69;
     }
   }
-  &__left{
-    button{
+  &__left {
+    button {
       display: inline;
       font-family: numeralLight;
       text-decoration: none;
       padding: 5px 20px 3px;
-      color: #00CC69;
+      color: #00cc69;
       border-radius: 25px;
       font-size: calc(100vw / 26);
       border: 1px solid #00cc69;
       background-color: white;
-      &:focus:enabled{
+      &:focus:enabled {
         text-decoration: none;
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.activation-history {
+  width: 100%;
+  padding: 10px 10px;
+  justify-content: space-between;
+  background-color: white;
+  align-items: center;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgb(226, 226, 226);
+  align-items: center;
+  img {
+    height: 100px;
+    border-radius: 10px;
+    margin-left: 15px;
+  }
+  strong {
+    font-family: numeralMedium;
+    font-weight: 600;
+    letter-spacing: -1px;
+  }
+  span {
+    font-family: numeralMedium;
+    color: #00cc69;
+  }
+
+  button {
+    display: inline;
+    font-family: numeralLight;
+    text-decoration: none;
+    padding: 5px 20px 3px;
+    color: #00cc69;
+    border-radius: 25px;
+    border: 1px solid #00cc69;
+    background-color: white;
+    &:focus:enabled {
+      text-decoration: none;
+    }
+  }
+}
diff --git a/src/views/Activation/index.js b/src/views/Activation/index.js
index f698431..5b30418 100644
--- a/src/views/Activation/index.js
+++ b/src/views/Activation/index.js
@@ -1,50 +1,53 @@
 import React, { Component } from "react";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
-import {Link} from 'react-router-dom';
-import History from './History/index';
+import { Link } from "react-router-dom";
+import History from "./History/index";
 
-import book1 from '../../assets/images/book1.png';
-import analytics from '../../assets/icons/analytics.svg';
-import danger from '../../assets/icons/danger.svg';
+import book1 from "../../assets/images/book1.png";
+import analytics from "../../assets/icons/analytics.svg";
+import danger from "../../assets/icons/danger.svg";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 45,
+    h2: window.innerWidth > maxDesktopSize ? 21 : window.innerWidth / 65,
+    p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
+    span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
+    form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
+  },
+};
 
-import './index.scss';
 export default class Activation extends Component {
-  state= {
+  state = {
     value: null,
-  }
+  };
   render() {
     const { data } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
           <>
-            <div className="mobile-activation d-flex">
-              <Navbar />
-            </div>
-            <Footer />
-          </>
-        ) : null}
-        {window.innerWidth < 1000 ? (
-          <>
-            <div className="mobile-activation d-flex flex-column align-items-center">
+            <div className="activation d-flex flex-column align-items-center">
               <Navbar />
-              <div className="mobile-activation__back d-flex">
-                <Link to="/">بازگشت</Link>
-              </div>
-              <header className="mobile-activation__header d-flex flex-column align-items-center">
+              <header className="activation__header d-flex flex-column align-items-center">
                 <img src={analytics} alt="فعال سازی کتاب" />
-                <h1>فعال سازی کتاب الکترونیک</h1>
+                <h1 style={{fontSize: fontSize.desktop.h1 }}>فعال سازی کتاب الکترونیک</h1>
               </header>
-              <div className="mobile-activation__description d-flex">
+              <div className="activation__description d-flex">
                 <span>.</span>
-                <p>کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد وارد تا کتاب الکترونیک آن فعالسازی شود</p>
+                <p style={{ fontSize: fontSize.desktop.p }}>
+                  کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
+                  وارد تا کتاب الکترونیک آن فعالسازی شود
+                </p>
               </div>
               <form
-              className="mobile-activation__form d-flex flex-column"
-                onSubmit={() =>
-                  console.log()
-                }
+                className="activation__form d-flex"
+                onSubmit={() => console.log()}
               >
                 <input
                   id="code"
@@ -52,24 +55,76 @@ export default class Activation extends Component {
                   maxLength={9}
                   autoComplete="off"
                   onChange={(e) => this.setState({ code: e.target.value })}
+                  style={{fontSize: fontSize.desktop.form }}
                 />
-                <button type="submit">ثبت کد فعال سازی</button>
+                <button style={{fontSize: fontSize.desktop.form }} type="submit">ثبت کد فعال سازی</button>
               </form>
-              <div className="mobile-activation__support d-flex align-center">
-                <span><img src={danger} /></span>
-                <p>کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد وارد تا کتاب الکترونیک آن فعالسازی شود</p>
+              <div className="activation__support d-flex align-center">
+                <span>
+                  <img src={danger} />
+                </span>
+                <p style={{ fontSize: fontSize.desktop.p }}>
+                  کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
+                  وارد تا کتاب الکترونیک آن فعالسازی شود
+                </p>
               </div>
-              <div className="mobile-activation__history d-flex flex-column">
-                <h2>آخرین مشاهدات</h2>
-                {
-                  data.map((item, i) => (
-                    <History data={item} key={i} />
-                  ))
-                }
+              <div className="activation__history d-flex flex-column">
+                <h2  style={{fontSize: fontSize.desktop.h2 }}>آخرین مشاهدات</h2>
+                {data.map((item, i) => (
+                  <History data={item} key={i} />
+                ))}
               </div>
             </div>
+            <Footer />
           </>
         ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-activation d-flex flex-column align-items-center">
+            <Navbar />
+            <div className="mobile-activation__back d-flex">
+              <Link to="/">بازگشت</Link>
+            </div>
+            <header className="mobile-activation__header d-flex flex-column align-items-center">
+              <img src={analytics} alt="فعال سازی کتاب" />
+              <h1>فعال سازی کتاب الکترونیک</h1>
+            </header>
+            <div className="mobile-activation__description d-flex">
+              <span>.</span>
+              <p>
+                کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
+                وارد تا کتاب الکترونیک آن فعالسازی شود
+              </p>
+            </div>
+            <form
+              className="mobile-activation__form d-flex flex-column"
+              onSubmit={() => console.log()}
+            >
+              <input
+                id="code"
+                type="text"
+                maxLength={9}
+                autoComplete="off"
+                onChange={(e) => this.setState({ code: e.target.value })}
+              />
+              <button type="submit">ثبت کد فعال سازی</button>
+            </form>
+            <div className="mobile-activation__support d-flex align-center">
+              <span>
+                <img src={danger} />
+              </span>
+              <p>
+                کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
+                وارد تا کتاب الکترونیک آن فعالسازی شود
+              </p>
+            </div>
+            <div className="mobile-activation__history d-flex flex-column">
+              <h2>آخرین مشاهدات</h2>
+              {data.map((item, i) => (
+                <History data={item} key={i} />
+              ))}
+            </div>
+          </div>
+        ) : null}
       </>
     );
   }
@@ -78,10 +133,10 @@ export default class Activation extends Component {
 Activation.defaultProps = {
   data: [
     {
-      title : 'ریاضیات گسسته خیلی پیشرفته',
-      subTitle: 'پایه هفتم ابتدایی',
-      status: 'انجام شد',
-      image : book1
-    }
-  ]
-}
\ No newline at end of file
+      title: "ریاضیات گسسته خیلی پیشرفته",
+      subTitle: "پایه هفتم ابتدایی",
+      status: "انجام شد",
+      image: book1,
+    },
+  ],
+};
diff --git a/src/views/Activation/index.scss b/src/views/Activation/index.scss
index b17e455..56201e2 100644
--- a/src/views/Activation/index.scss
+++ b/src/views/Activation/index.scss
@@ -1,6 +1,6 @@
 .mobile-activation{
   width: 100vw;
-  max-width: 1250px;
+  max-width: 650px;
   margin: 0px auto;
   padding : 0px 10px 40px;
   direction: rtl;
@@ -108,4 +108,107 @@
       margin-bottom: 20px;
     }
   }
+}
+
+
+.activation{
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding : 0px 10px 40px;
+  direction: rtl;
+  overflow-x: hidden;
+  &__header{
+    max-width: 900px;
+    width: 100%;
+    margin-top: 30px;
+    img{
+      width: 200px;
+    }
+    h1{
+      font-family: numeralBold;
+      margin-top: 15px;
+      color: #00CC69;
+      letter-spacing: -2px;
+    }
+  }
+  &__description{
+    width: 100%;
+    margin-top: 30px;
+    max-width: 900px;
+    span{
+      font-size: 50px;
+      color: #00CC69;
+      margin-left: 10px;
+      position: relative;
+      bottom: 42px;
+    }
+    p{
+      font-size: calc(100vw / 30);
+      color: #6F7074;
+      font-family: numeralMedium;
+    }
+  }
+  &__form{
+    width: 100%;
+    max-width: 900px;
+    font-family: numeralMedium;
+    justify-content: space-between;
+    input{
+      width: 70%;
+      background-color: #F6F6F6;
+      color: #4D4D4F;
+      text-align: center;
+      direction: ltr;
+      border: 0px;
+      height: 60px;
+      border-radius: 10px;
+      &:focus{
+        outline: 0px;
+      }
+    }
+    button{
+      width : 25%;
+      height: 60px;
+      display: inline;
+      font-family: numeralLight;
+      text-decoration: none;
+      padding: 16px 20px 16px;
+      background-color: #00CC69;
+      border-radius: 10px;
+      color: white;
+      border: 0px;
+      letter-spacing: -1px;
+      &:focus:enabled{
+        text-decoration: none;
+      }
+    }
+
+  }
+  &__support{
+    width: 100%;
+    max-width: 900px;
+    margin-top: 30px;
+    align-items: center;
+    span{
+      color: #00CC69;
+      margin-left: 10px;
+    }
+    p{
+      color: #afafaf;
+      font-family: numeralMedium;
+      text-align: center;
+      margin-bottom: 0px;
+    }
+  }
+  &__history{
+    width: 100%;
+    max-width: 900px;
+    margin: 50px 0px;
+    h2{
+      font-family: numeralBold;
+      color: #02A255;
+      margin-bottom: 20px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/Contact/index.js b/src/views/Contact/index.js
index a4c3c20..b860777 100644
--- a/src/views/Contact/index.js
+++ b/src/views/Contact/index.js
@@ -13,7 +13,7 @@ export default class Contact extends Component {
     return (
       <>
         <div className="contact d-flex flex-column align-items-center">
-          <Navbar />
+          <Navbar page={'contact'} />
           <div className="contact__forms d-flex">
             <div className="contact__forms--right d-flex flex-column">
               <h1>تماس با ما</h1>
diff --git a/src/views/Faq/Collapse/index.js b/src/views/Faq/Collapse/index.js
index 6c3d91c..324f4e9 100644
--- a/src/views/Faq/Collapse/index.js
+++ b/src/views/Faq/Collapse/index.js
@@ -4,6 +4,19 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 
 import "./index.scss";
 
+const maxDesktopSize = 1250;
+const maxMobileSize = 650;
+
+const fontSize = {
+  mobile: {
+    h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 27,
+    div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 30,
+  },
+  desktop: {
+    h2: window.innerWidth > maxMobileSize ? 22 : window.innerWidth / 80,
+    div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 95,
+  },
+};
 export default class Collapse extends Component {
   render() {
     const { message, setMessageActive } = this.props;
@@ -13,22 +26,52 @@ export default class Collapse extends Component {
           className={`collapse__header d-flex ${
             message.active ? "collapse-header-border" : null
           }`}
-          style={{ borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)", borderBottom: message.active ? 0 : '1px solid rgb(223, 223, 223)' }}
+          style={{
+            borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)",
+            borderBottom: message.active ? 0 : "1px solid rgb(223, 223, 223)",
+          }}
           onClick={() => setMessageActive(message.id, message.active)}
         >
-          <h2 style={message.active ? { color: "#7dc241" } : { color: "#666" }}>
+          <h2
+            style={
+              {
+                color: message.active ? "#7dc241" : "#666",
+                fontSize:
+                      window.innerWidth > 1000
+                        ? fontSize.desktop.h2
+                        : fontSize.mobile.h2,
+              }
+            }
+          >
             {message.title}
           </h2>
           {message.active ? (
-            <KeyboardArrowUpIcon style={{ fontSize: 30, color: message.active ? "#7dc241" : 'grey' }} />
+            <KeyboardArrowUpIcon
+              style={{
+                fontSize: 30,
+                color: message.active ? "#7dc241" : "grey",
+              }}
+            />
           ) : (
-            <KeyboardArrowDownIcon style={{ fontSize: 30, color: message.active ? "#7dc241" : 'grey' }} />
+            <KeyboardArrowDownIcon
+              style={{
+                fontSize: 30,
+                color: message.active ? "#7dc241" : "grey",
+              }}
+            />
           )}
         </div>
         {message.active ? (
           <div
             className="collapse__body"
-            style={{ borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)", borderTop: 0}}
+            style={{
+              borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)",
+              borderTop: 0,
+              fontSize:
+                window.innerWidth > 1000
+                  ? fontSize.desktop.div
+                  : fontSize.mobile.div,
+            }}
           >
             {message.description}
           </div>
diff --git a/src/views/Faq/Collapse/index.scss b/src/views/Faq/Collapse/index.scss
index 02ecc51..b4cd90e 100644
--- a/src/views/Faq/Collapse/index.scss
+++ b/src/views/Faq/Collapse/index.scss
@@ -15,7 +15,6 @@
     padding : 0px 15px 0px;
     cursor: pointer;
     & h2{
-      font-size: calc(100vw / 80);
       margin-bottom: 0px;
       letter-spacing: -1px;
     }
@@ -30,12 +29,12 @@
     direction: rtl;
     width: 100%;
     padding : 10px 10px;
-    font-size: calc(100vw / 95);
     color : #a5a5a5;
     background-color: white;
     border: 1px solid grey;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
+    letter-spacing: -1px;
   }
 }
 
diff --git a/src/views/Faq/index.js b/src/views/Faq/index.js
index 539db15..9b5ce5c 100644
--- a/src/views/Faq/index.js
+++ b/src/views/Faq/index.js
@@ -1,52 +1,129 @@
 import React, { Component } from "react";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
-import Collapse from './Collapse/index';
+import Collapse from "./Collapse/index";
 
 import "./index.scss";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 650;
+
+const fontSize = {
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20,
+    button: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 25,
+    p: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 70,
+    span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 75,
+    form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 70,
+  },
+};
 export default class Faq extends Component {
   state = {
     messages: [
-      {id: 0, title : 'چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
-      {id: 1, title : 'نحوه سفارش برای خارج از کشور چگونه است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
-      {id: 2, title : 'آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
-      {id: 3, title : 'در صورت فراموشی رمزعبور باید چکار کنیم؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
-      {id: 4, title : 'امکان بازگشت وجه تا چند روز ممکن است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false},
+      {
+        id: 0,
+        title: "چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+        active: false,
+      },
+      {
+        id: 1,
+        title: "نحوه سفارش برای خارج از کشور چگونه است؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+        active: false,
+      },
+      {
+        id: 2,
+        title: "آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+        active: false,
+      },
+      {
+        id: 3,
+        title: "در صورت فراموشی رمزعبور باید چکار کنیم؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+        active: false,
+      },
+      {
+        id: 4,
+        title: "امکان بازگشت وجه تا چند روز ممکن است؟",
+        description:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+        active: false,
+      },
     ],
-  }
+  };
 
   setMessageActive = (id, status) => {
-    if(status){
-      this.setState(prevState => ({
-        messages: prevState.messages.map(item => item.id === id ? {...item, active: false}: item)
+    if (status) {
+      this.setState((prevState) => ({
+        messages: prevState.messages.map((item) =>
+          item.id === id ? { ...item, active: false } : item
+        ),
       }));
-    }else{
-      this.setState(prevState => ({
-        messages: prevState.messages.map(item => item.id === id ? {...item, active: true}: {...item, active: false})
+    } else {
+      this.setState((prevState) => ({
+        messages: prevState.messages.map((item) =>
+          item.id === id
+            ? { ...item, active: true }
+            : { ...item, active: false }
+        ),
       }));
     }
-  }
+  };
   render() {
     return (
       <>
-        <div className="faq d-flex flex-column align-items-center">
-          <Navbar />
-          <header className="faq__header d-flex flex-column align-items-center">
-            <h1>سلام چطوری میتونم کمکتون کنم؟</h1>
-            <div className="faq__header--search d-flex align-items-center">
+        {window.innerWidth > 1000 ? (
+          <>
+            <div className="faq d-flex flex-column align-items-center">
+              <Navbar page={"faq"} />
+              <header className="faq__header d-flex flex-column align-items-center">
+                <h1>سلام چطوری میتونم کمکتون کنم؟</h1>
+                <div className="faq__header--search d-flex align-items-center">
+                  <input
+                    type="search"
+                    placeholder="دنبال چه چیزی برات باشیم؟"
+                  />
+                  <button type="submit" style={{fontSize: fontSize.mobile.button}}>جستجو</button>
+                </div>
+              </header>
+              <div className="faq__list d-flex flex-column">
+                {this.state.messages.map((item, i) => (
+                  <Collapse
+                    setMessageActive={this.setMessageActive}
+                    message={item}
+                    key={i}
+                  />
+                ))}
+              </div>
+            </div>
+            <Footer />
+          </>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-faq d-flex flex-column align-items-center">
+            <Navbar page={"mobile-faq"} />
+            <header className="mobile-faq__header d-flex flex-column align-items-center">
+              <h1 style={{fontSize: fontSize.mobile.h1 }}>سلام چطوری میتونم کمکتون کنم؟</h1>
               <input type="search" placeholder="دنبال چه چیزی برات باشیم؟" />
               <button type="submit">جستجو</button>
+            </header>
+            <div className="mobile-faq__list d-flex flex-column">
+              {this.state.messages.map((item, i) => (
+                <Collapse
+                  setMessageActive={this.setMessageActive}
+                  message={item}
+                  key={i}
+                />
+              ))}
             </div>
-          </header>
-          <div className="faq__list d-flex flex-column">
-            {
-              this.state.messages.map((item,i) => (
-                <Collapse setMessageActive={this.setMessageActive} message={item} key={i} />
-              ))
-            }
           </div>
-        </div>
-        <Footer />
+        ) : null}
       </>
     );
   }
diff --git a/src/views/Faq/index.scss b/src/views/Faq/index.scss
index b22fee2..9f75e3f 100644
--- a/src/views/Faq/index.scss
+++ b/src/views/Faq/index.scss
@@ -1,25 +1,25 @@
-.faq{
+.faq {
   width: 100vw;
   max-width: 1250px;
   margin: 0px auto;
-  padding : 0px 10px;
+  padding: 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
-  &__header{
+  &__header {
     margin-top: 30px;
-    h1{
+    h1 {
       letter-spacing: -2px;
       font-family: numeralBold;
       font-size: calc(100vw / 25);
       color: #424246;
     }
-    &--search{
+    &--search {
       margin-top: 20px;
       width: 100%;
       border: 2px solid rgb(197, 197, 197);
       border-radius: 10px;
       padding: 5px;
-      justify-content:space-between;
+      justify-content: space-between;
       input {
         border: 0px;
         flex: 1;
@@ -38,19 +38,74 @@
         }
       }
 
-      button{
+      button {
         font-family: numeralMedium;
         border: 0px;
         background-color: #7dc241;
         color: white;
         border-radius: 10px;
-        padding : 7px 50px;
+        padding: 7px 50px;
       }
     }
   }
-  &__list{
+  &__list {
     width: 100%;
     max-width: 1000px;
     margin: 30px 0px;
   }
-}
\ No newline at end of file
+}
+
+.mobile-faq {
+  width: 100vw;
+  max-width: 650px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  overflow-x: hidden;
+  padding-top: 60px;
+  &__header {
+    margin-top: 30px;
+    width: 100%;
+    h1 {
+      letter-spacing: -2px;
+      font-family: numeralBold;
+      color: #424246;
+    }
+
+    input {
+      border: 0px;
+      flex: 1;
+      border: 0px;
+      color: green;
+      padding: 0px 10px 0px;
+      font-size: 16px;
+      font-family: numeralMedium;
+      border: 1px solid #afafaf;
+      border-radius: 10px;
+      width: 100%;
+      padding: 8px 5px;
+      margin: 15px 0px;
+      &::placeholder {
+        color: #d8dce5;
+        font-size: 16px;
+      }
+      &:focus {
+        outline: 0px !important;
+      }
+    }
+
+    button {
+      font-family: numeralMedium;
+      border: 0px;
+      background-color: #7dc241;
+      color: white;
+      border-radius: 10px;
+      padding: 7px 50px;
+    }
+  }
+  &__list {
+    width: 100%;
+    max-width: 1000px;
+    margin: 30px 0px;
+  }
+}
diff --git a/src/views/Home/HomeSlider/Simple/index.js b/src/views/Home/HomeSlider/Simple/index.js
index acddb16..93c4956 100644
--- a/src/views/Home/HomeSlider/Simple/index.js
+++ b/src/views/Home/HomeSlider/Simple/index.js
@@ -22,7 +22,7 @@ export default class Simple extends Component {
       style={{
       height: height,
     }}>
-        <Link to={`/books/${data.id}`}>
+        <Link to={`/products/${data.id}`}>
           <img src={data.image} alt={data.title} />
           <h1 style={{fontSize : fontSize.desktop.h1 }}>{data.title}</h1>
           <h2 style={{fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
diff --git a/src/views/Home/HomeSlider/index.js b/src/views/Home/HomeSlider/index.js
index 2c329f8..9f50005 100644
--- a/src/views/Home/HomeSlider/index.js
+++ b/src/views/Home/HomeSlider/index.js
@@ -54,11 +54,11 @@ const TabHeader = (props) => {
       {window.innerWidth > 1000 ? (
         <div className="home-scroll__header d-flex">
           <div className="home-scroll__header--right d-flex">
-            <h1>{props.title}</h1>
+            <h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
             <span></span>
           </div>
           <div className="home-scroll__header--more d-flex">
-            <span>ادامه لیست</span>
+            <span style={{ fontSize: fontSize.desktop.h1 }}>ادامه لیست</span>
             <img src={dropdown} alt="فلش" />
           </div>
         </div>
diff --git a/src/views/Home/Navbar/Laptop/index.js b/src/views/Home/Navbar/Laptop/index.js
index 8f54465..3eb7835 100644
--- a/src/views/Home/Navbar/Laptop/index.js
+++ b/src/views/Home/Navbar/Laptop/index.js
@@ -1,11 +1,10 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import logo from '../../../../assets/icons/logo.png';
+import logo from "../../../../assets/icons/logo.png";
 
 import "./index.scss";
 
-
 const maxDesktopSize = 1250;
 
 const fontSize = {
@@ -22,19 +21,31 @@ export default class LaptopNavbar extends Component {
       <nav className="laptop-navbar d-flex">
         <div className="d-flex">
           <div className="laptop-navbar__logo">
-            <img src={logo} alt="لوگو"/>
+            <img src={logo} alt="لوگو" />
           </div>
           <ul className="laptop-navbar__list d-flex">
             {links.map((item, i) => (
-              <li style={{fontSize : fontSize.desktop.li }} key={i}>
-                <Link to={item.to}>{item.name}</Link>
+              <li style={{ fontSize: fontSize.desktop.li }} key={i}>
+                <Link to={item.to} style={{ color: this.props.page === item.page ? '#6cbe44' : '#6f7074' }}>{item.name}</Link>
               </li>
             ))}
           </ul>
         </div>
         <div className="d-flex">
-          <Link style={{fontSize : fontSize.desktop.a }} to={'/signin'} className="laptop-navbar__signin">ورود به حساب کاربری</Link>
-          <Link style={{fontSize : fontSize.desktop.a }} to={'/signup'} className="laptop-navbar__signup">ثبت نام</Link>
+          <Link
+            style={{ fontSize: fontSize.desktop.a }}
+            to={"/auth"}
+            className="laptop-navbar__signin"
+          >
+            ورود به حساب کاربری
+          </Link>
+          <Link
+            style={{ fontSize: fontSize.desktop.a }}
+            to={"/auth"}
+            className="laptop-navbar__signup"
+          >
+            ثبت نام
+          </Link>
         </div>
       </nav>
     );
@@ -43,10 +54,10 @@ export default class LaptopNavbar extends Component {
 
 LaptopNavbar.defaultProps = {
   links: [
-    { name: "صفحه اصلی", to: "/" },
-    { name: "فروشگاه ", to: "/store" },
-    { name: "سوالات متداول", to: "/faq" },
-    { name: "درباره ما", to: "/about" },
-    { name: "تماس با ما", to: "/contact" },
+    { name: "صفحه اصلی", to: "/", page: "home" },
+    { name: "فروشگاه ", to: "/products", page: "products" },
+    { name: "سوالات متداول", to: "/faq", page: "faq" },
+    { name: "درباره ما", to: "/about", page: "about" },
+    { name: "تماس با ما", to: "/contact", page: "contact" },
   ],
 };
diff --git a/src/views/Home/Navbar/Laptop/index.scss b/src/views/Home/Navbar/Laptop/index.scss
index 1b2d23e..eba7a8b 100644
--- a/src/views/Home/Navbar/Laptop/index.scss
+++ b/src/views/Home/Navbar/Laptop/index.scss
@@ -22,10 +22,6 @@
       text-decoration: none;
       a{
         text-decoration: none;
-        color: #6f7074;
-        &:focus{
-          color: #6f7074;
-        }
       }
     }
   }
diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
index 22e7350..20c0590 100644
--- a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
+++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
@@ -137,6 +137,12 @@ NavbarDrawer.defaultProps = {
       icon: <img src={qrcode} alt="بارکد خوان" />,
       toast: "",
     },
+    {
+      name: "کتاب الکترونیک",
+      link: "/activation",
+      icon: <img src={mobileBlog} alt="کتاب الکترونیک" />,
+      toast: "",
+    },
     {
       name: "فروشگاه",
       link: "/products",
@@ -145,13 +151,13 @@ NavbarDrawer.defaultProps = {
     },
     {
       name: "بلاگ",
-      link: "/",
+      link: "/blog",
       icon: <img src={mobileBlog} alt="بلاگ" />,
       toast: "",
     },
     {
       name: "پیام رسان",
-      link: "/",
+      link: "/chat",
       icon: <img src={mobileMail} alt="بلاگ" />,
       toast: "",
     },
diff --git a/src/views/Home/Navbar/index.js b/src/views/Home/Navbar/index.js
index db19e4b..a3df7d1 100644
--- a/src/views/Home/Navbar/index.js
+++ b/src/views/Home/Navbar/index.js
@@ -10,7 +10,7 @@ export default class Navbar extends Component {
       <div className="navbar d-flex">
         {
           window.innerWidth > 1000 ? 
-          <LaptopNavbar /> : <MobileNavbar />
+          <LaptopNavbar page={this.props.page} /> : <MobileNavbar />
         }
       </div>
     );
diff --git a/src/views/Home/index.js b/src/views/Home/index.js
index 8dbfd1b..c0648b7 100644
--- a/src/views/Home/index.js
+++ b/src/views/Home/index.js
@@ -489,7 +489,7 @@ export default class Home extends Component {
         window.innerWidth > 1000 ? 
         <>
           <div className="home d-flex flex-column">
-            <Navbar />
+            <Navbar page={'home'} />
             {homeData.map((item, i) => (
               <Identifier item={item} key={i} />
             ))}
@@ -501,7 +501,7 @@ export default class Home extends Component {
         window.innerWidth < 1000 ?
         <>
           <div className="mobile-home d-flex flex-column">
-            <Navbar />
+            <Navbar page={'home'} />
             {homeData.map((item, i) => (
               <Identifier item={item} key={i} />
             ))}
diff --git a/src/views/Product/index.scss b/src/views/Product/index.scss
index 3291c70..49fe334 100644
--- a/src/views/Product/index.scss
+++ b/src/views/Product/index.scss
@@ -1,6 +1,6 @@
 .mobile-product{
   width: 100vw;
-  max-width: 1250px;
+  max-width: 650px;
   margin: 0px auto;
   padding : 0px 10px 40px;
   direction: rtl;
@@ -142,3 +142,149 @@
     }
   }
 }
+
+
+.product{
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding : 0px 10px 40px;
+  direction: rtl;
+  overflow-x: hidden;
+  min-height: calc(100vh - 288px);
+  &__header{
+    width: 100%;
+    img{
+      height: calc(100vh / 2.7);
+    }
+    h1{
+      margin-top: 10px;
+      font-family: numeralBold;
+      font-size: calc(100vw / 20);
+      color: #7dc241;
+      letter-spacing: -1px;
+    }
+    h2{
+      font-family: numeralMedium;
+      font-size: calc(100vw / 28);
+      color: #6f7074;
+    }
+    a{
+      border: 0px;
+      font-family: numeralMedium;
+      font-size: calc(100vw / 25);
+      padding: 15px 0px;
+      width: 150px;
+      text-align: center;
+      letter-spacing: -1px;
+      text-decoration: none;
+    }
+    &--purchase{
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+      background-color: #00cc69;
+      color: white !important;
+    }
+    &--sampleButton{
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+      background-color: #efefef;
+      color: #6f7074 !important;
+    }
+  }
+  &__abstraction{
+    margin-top: 30px;
+    width: 100%;
+    h1{
+      font-family: numeralBold;
+      font-size: calc(100vw / 22);
+      color: #6f7074;
+      letter-spacing: -1px;
+    }
+    p{
+      font-family: numeralLight;
+      font-size: calc(100vw / 30);
+      color: #6f7074;
+      letter-spacing: -1px;
+      text-align: justify;
+    }
+  }
+  &__modules{
+    margin-top: 20px;
+    width: 100%;
+    padding: 20px 10px;
+    background-color: #baffdc2f;
+    border-radius: 10px;
+    h1{
+      font-family: numeralBold;
+      font-size: calc(100vw / 28);
+      color: #02733c;
+      letter-spacing: -1px;
+    }
+    ul{
+      list-style: none;
+      padding: 0px;
+      margin: 0px;
+      margin-top: 10px;
+      li{
+        font-family: numeralLight;
+        font-size: calc(100vw / 28);
+        color: #02733c;
+        letter-spacing: -1px;
+      }
+    }
+  }
+  &__tips{
+    margin-top: 20px;
+    width: 100%;
+    padding: 20px 10px;
+    background-color: #1f6fb528;
+    border-radius: 10px;
+    h1{
+      font-family: numeralBold;
+      font-size: calc(100vw / 28);
+      color: #074f8b;
+      letter-spacing: -1px;
+    }
+    ul{
+      list-style: none;
+      padding: 0px;
+      margin: 0px;
+      margin-top: 10px;
+      li{
+        font-family: numeralLight;
+        font-size: calc(100vw / 30);
+        color: #074f8b;
+        letter-spacing: -1px;
+        margin-bottom: 3px;
+      }
+    }
+  }
+  &__description{
+    width: 100%;
+    margin-top: 20px;
+    p{
+      font-family: numeralLight;
+      font-size: calc(100vw / 30);
+      color: #6f7074;
+      letter-spacing: -1px;
+      text-align: justify;
+    }
+  }
+  &__comments{
+    max-width: 100%;
+    margin-top: 30px;
+    h1{
+      font-family: numeralBold;
+      font-size: calc(100vw / 22);
+      color: #6f7074;
+      letter-spacing: -1px;
+      margin-bottom: 30px;
+    }
+    &--list{
+      width: 100vw;
+      overflow-x: scroll !important;
+      transform: translateX(10px);
+    }
+  }
+}
diff --git a/src/views/Products/index.js b/src/views/Products/index.js
index baf53b0..8f93621 100644
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@@ -42,7 +42,7 @@ export default class Products extends Component {
         {window.innerWidth > 1000 ? (
           <>
             <div className="products d-flex flex-column">
-              <Navbar />
+              <Navbar page={'products'} />
             </div>
             <Footer />
           </>
@@ -50,7 +50,7 @@ export default class Products extends Component {
         {window.innerWidth < 1000 ? (
           <>
             <div className="mobile-products d-flex flex-column">
-              <Navbar />
+              <Navbar page={'products'} />
               <div className="mobile-products__filters d-flex">
                 <div className="d-flex">
                   <Select name="first" options={firstFilters} parent={this} />
diff --git a/src/views/Products/index.scss b/src/views/Products/index.scss
index 533be9a..e4c3e28 100644
--- a/src/views/Products/index.scss
+++ b/src/views/Products/index.scss
@@ -4,6 +4,7 @@
   margin: 0px auto;
   padding : 0px 10px;
   direction: rtl;
+  min-height: calc(100vh - 288px);
 }