diff --git a/package.json b/package.json
index ee84e32..ed21bc6 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "react-redux": "^7.2.5",
     "react-refresh": "^0.8.3",
     "react-router-dom": "^5.3.0",
+    "react-speech-recognition": "^3.8.2",
     "react-spring-3d-carousel": "^1.2.1",
     "react-toastify": "^8.0.2",
     "redux": "^4.1.1",
diff --git a/src/assets/icons/Rectangle 60.png b/src/assets/icons/Rectangle 60.png
new file mode 100644
index 0000000..bcb274a
Binary files /dev/null and b/src/assets/icons/Rectangle 60.png differ
diff --git a/src/assets/icons/arrow-left.png b/src/assets/icons/arrow-left.png
new file mode 100644
index 0000000..70d90d4
Binary files /dev/null and b/src/assets/icons/arrow-left.png differ
diff --git a/src/assets/icons/line1.png b/src/assets/icons/line1.png
new file mode 100644
index 0000000..c2ccbb4
Binary files /dev/null and b/src/assets/icons/line1.png differ
diff --git a/src/assets/icons/line2.png b/src/assets/icons/line2.png
new file mode 100644
index 0000000..779511e
Binary files /dev/null and b/src/assets/icons/line2.png differ
diff --git a/src/components/HomeSearchBox/index.tsx b/src/components/HomeSearchBox/index.tsx
index 3734ad5..992d695 100644
--- a/src/components/HomeSearchBox/index.tsx
+++ b/src/components/HomeSearchBox/index.tsx
@@ -1,36 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import "./index.scss";
-import search from '../../assets/icons/search.png';
+import search from "../../assets/icons/search.png";
 import voice from "../../assets/icons/voice.png";
 
-export default function HomeSearchBox(props : any) {
-  const {lastItems} = props;
+export default function HomeSearchBox(props: any) {
+  const { lastItems, setVocal, inputValue, setInputValue } = props;
   return (
     
       
-      
+
       
-        {
-          lastItems.map((item : any, i : any) => (
-            - {item}
 
-          ))
-        }
+        {lastItems.map((item: any, i: any) => (
+          - 
+            {item}
+          
 
+        ))}
       
     
   );
 }
 
 HomeSearchBox.defaultProps = {
-  lastItems : [
-    'دوره علوم تجربی',
-    'دوره علوم انسانی',
-    'تمامی دورهها'
-  ]
-}
\ No newline at end of file
+  lastItems: ["دوره علوم تجربی", "دوره علوم انسانی", "تمامی دورهها"],
+};
diff --git a/src/components/Vocal/Vocal.scss b/src/components/Vocal/Vocal.scss
new file mode 100644
index 0000000..259cec5
--- /dev/null
+++ b/src/components/Vocal/Vocal.scss
@@ -0,0 +1,74 @@
+.vocal-modal{
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top : 0px;
+    left: 0px;
+    background-color: rgba(0, 0, 0, 0.822);
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    &__back{
+        position: fixed;
+        top: 20px;
+        left: 12px;
+        z-index: 200;
+    }
+    h1,h2{
+        margin: 20px auto 0px;
+        width: fit-content;
+    }
+    h1{
+        color: white;
+        font-family: numeralLight;
+        font-size: calc(100vw / 20);
+    }
+    h2{
+        color: rgb(196, 196, 196);
+        font-family: numeralLight;
+        font-size: calc(100vw / 24);
+        position: fixed;
+        bottom: 70px;
+        left: 50%;
+        background-color: rgba(255, 255, 255, 0.062);
+        padding: 10px 15px;
+        border-radius: 10px;
+        transform: translate(-50% , 0px);
+    }
+    &__content{
+        width : calc(100% - 60px);
+        height: 320px;
+        border-radius: 5px;
+        margin-left: auto;
+        margin-right: auto;
+        padding : 4px 10px;
+        &--toggle{
+            width: 140px;
+            height: 140px;
+            align-items: center;
+            border-radius: 100px;
+            margin : 20px auto;
+            svg{
+                margin : 0px auto;
+            }
+        }
+    }
+}
+
+
+
+
+.vocal-modal__content--input .MuiFormControl-root{
+    border : none !important;
+}
+
+.vocal-modal__content--input{
+    margin-top: 20px;
+}
+
+.vocal-modal__content--input input{
+    width: 100%;
+    border : none;
+    font-size: 22px;
+    color: #707070;
+}
\ No newline at end of file
diff --git a/src/components/Vocal/Vocal.tsx b/src/components/Vocal/Vocal.tsx
new file mode 100644
index 0000000..b774083
--- /dev/null
+++ b/src/components/Vocal/Vocal.tsx
@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from "react";
+import SpeechRecognition, {
+  useSpeechRecognition,
+} from "react-speech-recognition";
+import { toast } from "react-toastify";
+import MicIcon from "@material-ui/icons/Mic";
+import TextField from "@material-ui/core/TextField";
+
+import line1 from "../../assets/icons/line1.png";
+import line2 from "../../assets/icons/line2.png";
+import arrowLeft from "../../assets/icons/arrow-left.png";
+
+import "./Vocal.scss";
+import { stat } from "fs";
+
+const Vocal = (props: any) => {
+  const { transcript, resetTranscript } = useSpeechRecognition();
+  const [flag, setFlag] = useState(false);
+  const [pause, setPause] = useState(false);
+
+  const start = () => {
+    setPause(false);
+    SpeechRecognition.startListening({ language: "fa_IR" });
+    setTimeout(() => {
+      if (true) {
+        SpeechRecognition.stopListening();
+        setPause(true);
+      }
+    }, 5000);
+  };
+
+  useEffect(() => {
+    if (!flag) {
+      resetTranscript();
+      setFlag(() => true);
+      start();
+    }
+  });
+
+  useEffect(() => {
+    props.setInputValue(() => transcript);
+  }, [transcript]);
+
+  return (
+    
+      

 props.setVocal(false)} />
+      
+        
+          

 start()} />
+          

 start()}
+          />
+        
+        
+          {pause ? (
+            
+              چیزی نشنیدیم :(
+              
+              روی آیکن موج بزنید تا دوباره امتحان کنید.
+            
+          ) : (
+            در حال گوش کردن ...
+          )}
+        
+      
+    
 
+  );
+};
+export default Vocal;
diff --git a/src/types/comp.d.ts b/src/types/comp.d.ts
index 744a0b9..34ab2e4 100644
--- a/src/types/comp.d.ts
+++ b/src/types/comp.d.ts
@@ -1 +1,2 @@
-declare module '3d-react-carousal';
\ No newline at end of file
+declare module '3d-react-carousal';
+declare module 'react-speech-recognition';
\ No newline at end of file
diff --git a/src/views/Home/Books/index.scss b/src/views/Home/Books/index.scss
index 205b211..cfcd18f 100644
--- a/src/views/Home/Books/index.scss
+++ b/src/views/Home/Books/index.scss
@@ -81,6 +81,7 @@
 @media screen and (max-width: 640px) {
   .home-books {
     max-width: 500px;
+    padding: 0px 0px 20px;
     &__list{
       width: 100%;
       overflow-x: scroll;
diff --git a/src/views/Home/Courses/Course/index.scss b/src/views/Home/Courses/Course/index.scss
index 458bdce..8fe8170 100644
--- a/src/views/Home/Courses/Course/index.scss
+++ b/src/views/Home/Courses/Course/index.scss
@@ -83,8 +83,8 @@
 @media screen and (max-width : 640px){
   .home-courses-course{
     img{
-      width: 250px;
-      height: 180px;
+      width: calc(100vw / 1.7);
+      height: calc(100vw / 2.2);
     }
     h2{
       font-size: calc(100vw / 25);
diff --git a/src/views/Home/index.scss b/src/views/Home/index.scss
index 0d7b4de..fb063f1 100644
--- a/src/views/Home/index.scss
+++ b/src/views/Home/index.scss
@@ -23,5 +23,6 @@
 @media screen and (max-width: 640px) {
   .home{
     padding: 60px 10px 0px;
+    position: relative;
   }
 }
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index ac037ee..a73b874 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -1,16 +1,17 @@
-import React, {useState} from "react";
+import React, { useState, useEffect } from "react";
 import "./index.scss";
 import Navbar from "../../components/Navbar/index";
 import HomeSearchBox from "../../components/HomeSearchBox/index";
 import Courses from "./Courses/index";
 import GradeFilter from "../../components/GradeFilter/index";
-import Books from './Books/index';
+import Books from "./Books/index";
 import Blogs from "./Blogs/index";
 import Footer from "./Footer/index";
 import Header from "./Header/index";
 import AppDownload from "./AppDownload/index";
+import Vocal from "../../components/Vocal/Vocal";
 
-import olum7 from  "../../assets/images/olum7.jpg";
+import olum7 from "../../assets/images/olum7.jpg";
 import olum8 from "../../assets/images/olum8.jpg";
 import olum9 from "../../assets/images/olum9.jpg";
 import header from "../../assets/images/header.png";
@@ -18,31 +19,42 @@ import blog1 from "../../assets/images/blog1.png";
 import blog2 from "../../assets/images/blog2.png";
 import blog3 from "../../assets/images/blog3.png";
 
-export default function Home(props : any) {
+export default function Home(props: any) {
   const [grade, setGrade] = useState(null);
-  const {courses, grades, headerData, blogs} = props;
+  const [vocal, setVocal] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const { courses, grades, headerData, blogs } = props;
+
+  useEffect(() => {
+    if (inputValue) {
+      setVocal(false);
+    }
+  }, [inputValue]);
   return (
-    
-      
-      {
-        window.innerWidth > 1007 ?
-        
 : null
-      }
-      
-      
-      
-      
-      
-      {
-        window.innerWidth > 1007 ?
-        
 : null
-      }
-      {
-        window.innerWidth > 1007 ?
-        
 : null
-      }
-      
-    
 
+    <>
+      
+        
+        {window.innerWidth > 1007 ? 
 : null}
+        
+        
+        
+        
+        
+        {window.innerWidth > 1007 ? 
 : null}
+        {window.innerWidth > 1007 ? 
 : null}
+        
+      
 
+      {vocal ? (
+          
+        ) : null}
+    >
   );
 }
 
@@ -91,39 +103,39 @@ Home.defaultProps = {
       tags: ["دوره جدید", "تخفیفهای هفتگی", "پایه هفتم"],
     },
   ],
-  grades : [
-    'اول',
-    'دوم',
-    'سوم',
-    'چهارم',
-    'پنجم',
-    'ششم',
-    'هفتم',
-    'هشتم',
-    'نهم',
-    'دهم',
-    'یازدهم',
-    'دوازدهم',
+  grades: [
+    "اول",
+    "دوم",
+    "سوم",
+    "چهارم",
+    "پنجم",
+    "ششم",
+    "هفتم",
+    "هشتم",
+    "نهم",
+    "دهم",
+    "یازدهم",
+    "دوازدهم",
   ],
-  headerData : [
+  headerData: [
     {
-      id : 0,
-      name : "آیا هیجان زندگی همچنان باقی است؟",
-      subTitle : "سوالاتی که پاسخی برای آنها نیست!",
-      text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ',
-      author : 'جورج جونیور',
-      imageUrl : header,
+      id: 0,
+      name: "آیا هیجان زندگی همچنان باقی است؟",
+      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
+      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
+      author: "جورج جونیور",
+      imageUrl: header,
     },
     {
-      id : 1,
-      name : "آیا هیجان زندگی همچنان باقی است؟",
-      subTitle : "سوالاتی که پاسخی برای آنها نیست!",
-      text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ',
-      author : 'جورج جونیور',
-      imageUrl : header,
+      id: 1,
+      name: "آیا هیجان زندگی همچنان باقی است؟",
+      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
+      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
+      author: "جورج جونیور",
+      imageUrl: header,
     },
   ],
-  blogs : [
+  blogs: [
     {
       id: 0,
       name: "فیزیک کوانتوم و موارد مشابه",
@@ -152,6 +164,5 @@ Home.defaultProps = {
       imageUrl: blog1,
       tags: ["دوره جدید", "تخفیفهای هفتگی", "پایه هفتم"],
     },
-  ]
+  ],
 };
-
diff --git a/yarn.lock b/yarn.lock
index c489609..2c6f84e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9761,6 +9761,11 @@ react-router@5.2.1:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-speech-recognition@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/react-speech-recognition/-/react-speech-recognition-3.8.2.tgz#c82e187db92e32e506f0593d80a2347f2079e0fd"
+  integrity sha512-ZbA8wNNdWPAiN7tHsMc/cgfRkssAQwL3F8yMDEbuxLCT0II7YrNurNb3hAq5X58+zMn7YQO+S3OZt0mp5QA38w==
+
 react-spring-3d-carousel@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-spring-3d-carousel/-/react-spring-3d-carousel-1.2.1.tgz#25d5d94e76a212b6e791c2543f61c7c87763e8e9"