reza added some thing

src/components/GradeFilter/index.scss

@@ -7,7 +7,7 @@
   border-radius: 6px;
   height: 36px;
   &__box{
-    display: none;
+    display: none !important;
   }
   h1{
     margin: 0px;
@@ -64,8 +64,60 @@
 @media screen and (min-width: 641px) and (max-width: 1007px){
   .grade-filter{
     max-width: 900px;
+    position: relative;
+    height : 42px;
+    &__list{
+      z-index: 100;
+      width: 100%;
+      position: absolute;
+      left: 0px;
+      top: 45px;
+      background : #383838;
+      padding: 10px 20px;
+      border-radius: 10px;
+      li{
+        width: calc(100% / 4.5) !important;
+        margin: 8px 5px;
+        font-size: calc(100vw / 28);
+        padding: 5px 0px;
+        border: 1px solid #666666;
+        border-radius: 5px;
+        
+      }
+      &--active{
+        border-color: #9CDF52 !important;
+        color: #9CDF52;
+      }
+    }
+    &__box{
+      flex: 1;
+      display : flex !important;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      height: 42px;
+      & img{
+        position: absolute;
+        left: 5px;
+        top: 9px;
+      }
+      span{
+        color: #6C6C6C;
+        font-size: calc(100vw / 60);
+      }
+      h2{
+        font-size: calc(100vw / 50);
+        color: #9CDF52;
+      }
+    }
     h1{
-      font-size: calc(100vw / 90);
+      font-size: calc(100vw / 50);
+      background-color: #9CDF52;
+      box-shadow: 0px 0px 24px #9CDF52;
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+      padding: 12px 15px;
+      color: white;
     }
     li{
       font-size: calc(100vw / 70);
@@ -90,7 +142,7 @@
     }
     &__box{
       flex: 1;
-      display : flex;
+      display : flex !important;
       justify-content: center;
       align-items: center;
       position: relative;

src/components/HomeSearchBox/index.scss

@@ -104,7 +104,7 @@
       display: none;
     }
     form {
-      width: 70%;
+      width: 85%;
       input {
         font-size: calc(100vw / 40);
         padding-right: 20px;
@@ -118,12 +118,12 @@
       }
     }
     ul {
-      width: 70%;
+      width: 85%;
       padding: 10px 0px !important;
       li {
         color: #a2b4cb;
         margin-left: 25px;
-        font-size: calc(100vw / 80);
+        font-size: calc(100vw / 75);
       }
     }
   }

src/components/HomeSearchBox/index.tsx

@@ -17,8 +17,13 @@ export default function HomeSearchBox(props: any) {
         <button type="submit">
           <img src={search} />
         </button>
-        <img className="home-search-box__searchIcon" src={search} />
-        <button className="home-search-box__voice" onClick={() => setVocal(true)}>
+        {window.innerWidth < 640 ? (
+          <img className="home-search-box__searchIcon" src={search} />
+        ) : null}
+        <button
+          className="home-search-box__voice"
+          onClick={() => setVocal(true)}
+        >
           <img src={voice} />
         </button>
       </form>

src/views/Home/Blogs/index.scss

@@ -72,6 +72,17 @@
       font-size: calc(100vw / 90);
     }
   }
+  .slider-container{
+    position: static !important;
+    display: flex !important;
+    justify-content: flex-end !important;
+    align-items: center !important;
+    & img{
+      height: 200px !important;
+    }
+    margin: 0px 0px 100px 0px !important;
+    width : 100% !important;
+  }
 }
 
 @media screen and (max-width: 640px) {

src/views/Home/Books/Book/index.scss

@@ -68,7 +68,8 @@
   .home-books-book{
     img{
       height: 200px;
-      width: 98%;
+      width : calc(100vw / 4);
+      border-bottom-left-radius: 25px !important;
     }
     h2{
       font-size: calc(100vw / 60);

src/views/Home/index.scss

@@ -20,6 +20,13 @@
   padding-top: 60px;
 }
 
+@media screen and (min-width: 641px) and (max-width: 1007px){
+  .home{
+    padding: 60px 10px 0px;
+    position: relative;
+  }
+}
+
 @media screen and (max-width: 640px) {
   .home{
     padding: 60px 10px 0px;