diff --git a/src/App.js b/src/App.js
index 4877fdd..63813a3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
 import Home from './Components/Home/Home';
 import Header from './Components/Headder/Header'
+import ViewBook from './Components/ViewBook/ViewBook'
 import AddIcon from './Components/AddIcon/AddIcon';
 
 function App() {
@@ -15,8 +16,8 @@ function App() {
         <Route path="/add-book">
           <h1>Add book</h1>
         </Route>
-        <Route path="book">
-          <h1>view book</h1>
+        <Route path="/book">
+          <ViewBook/>
         </Route>
       </Switch>
     </Router>
diff --git a/src/Components/ViewBook/CommentCard/CommentCard.js b/src/Components/ViewBook/CommentCard/CommentCard.js
new file mode 100644
index 0000000..c5b6150
--- /dev/null
+++ b/src/Components/ViewBook/CommentCard/CommentCard.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import './CommentCard.scss'
+import ThumbUpAltOutlinedIcon from '@material-ui/icons/ThumbUpAltOutlined';
+
+
+function CommentCard(props) {
+    return (
+      <div className="comment_container">
+        <div id="user_name">
+          <img
+            src={props.image}
+            alt=""
+          />
+          <p>{props.name}</p>
+        </div>
+        <p>
+          {props.comment}
+        </p>
+        <div id="like_container">
+            <div className="like_up">
+              <ThumbUpAltOutlinedIcon/><span>{props.like}</span>
+            </div>
+            <div className="like_down">
+              <ThumbUpAltOutlinedIcon/><span>{props.unlike}</span>
+            </div>
+        </div>
+        <hr />
+      </div>
+    );
+}
+
+
+export default CommentCard
diff --git a/src/Components/ViewBook/CommentCard/CommentCard.scss b/src/Components/ViewBook/CommentCard/CommentCard.scss
new file mode 100644
index 0000000..d271240
--- /dev/null
+++ b/src/Components/ViewBook/CommentCard/CommentCard.scss
@@ -0,0 +1,78 @@
+@import '../../Variables/variables';
+
+.comment_container{
+    width: 100%;
+    margin: 25px 0 0;
+
+    #user_name{
+        display: flex;
+        align-items: center;
+        font-family: $raleway;
+
+        img{
+            object-fit: contain;
+            width: 40px;
+            border-radius: 50%;
+        }
+
+        p{
+            font-size: 18px;
+            font-weight: 500;
+            margin: 0 15px;
+        }
+    }
+
+    p{
+        font-family: $montserrat;
+        font-size: 18px;
+        margin: 25px 0 25px;
+    }
+
+    #like_container{
+        display: flex;
+        margin: 0 0 25px;
+        
+
+
+        .like_up,.like_down{
+            display: flex;
+            margin: 0 10px 0;
+            align-items: center;
+
+            span{
+                margin: 0 5px;
+            }
+        }
+
+    }
+}
+
+
+@media screen and (max-width:750px){
+    .comment_container{
+        width: 100%;
+        margin: 15px 0 0;
+        padding: 5px;
+    
+        #user_name{    
+            img{
+                width: 30px;
+            }
+    
+            p{
+                font-size: 12px;
+                font-weight: 300;
+                margin: 0 10px;
+            }
+        }
+    
+        p{
+            font-size: 12px;
+            margin: 15px 0 15px;
+        }
+    
+        #like_container{
+            margin: 0 0 15px;
+        }
+    } 
+}
\ No newline at end of file
diff --git a/src/Components/ViewBook/ViewBook.js b/src/Components/ViewBook/ViewBook.js
index 296f9af..dadd9c0 100644
--- a/src/Components/ViewBook/ViewBook.js
+++ b/src/Components/ViewBook/ViewBook.js
@@ -1,11 +1,98 @@
 import React from 'react'
+import './ViewBook.scss'
+import StarIcon from '@material-ui/icons/Star';
+import StarOutlineIcon from '@material-ui/icons/StarOutline';
+import CommentCard from './CommentCard/CommentCard'
 
 const ViewBook = () => {
+
+  const comments = [
+    {
+      name:'Amshen Yesudas',
+      image:'https://avatars.githubusercontent.com/u/65121810?v=4',
+      like:'5678',
+      unlike:'124',
+      comment:"Nick's been feeling the same, but he's got a lot on his mind - not least coming out to his dad, ajnd the fact that Charlie might have an eating disorder.",
+  
+    },
+    {
+      name:'Mushin',
+      image:'https://avatars.githubusercontent.com/u/65121810?v=4',
+      like:'1535',
+      unlike:'124',
+      comment:"Nick's been feeling the same, but he's got a lot on his mind - not least coming out to his dad, ajnd the fact that Charlie might have an eating disorder.",
+  
+    },{
+      name:'Rishad',
+      image:'https://avatars.githubusercontent.com/u/65121810?v=4',
+      like:'9000',
+      unlike:'124',
+      comment:"Nick's been feeling the same, but he's got a lot on his mind - not least coming out to his dad, ajnd the fact that Charlie might have an eating disorder.",
+  
+    }
+  ]
+
+
     return (
-        <div>
-            
+      <div className="viewbook_container">
+        <div className="book_container">
+          <img
+            src="https://images-na.ssl-images-amazon.com/images/I/410llGwMZGL._SX328_BO1,204,203,200_.jpg"
+            alt=""
+          />
+          <div className="book_detail">
+            <h1>The Alchemist</h1>
+            <p>by Paulo Coelho's</p>
+            <div className="star_review">
+              <StarIcon />
+              <StarIcon />
+              <StarIcon />
+              <StarIcon />
+              <StarOutlineIcon />
+              <button>Rate the book</button>
+            </div>
+            <button>Get This Book</button>
+          </div>
+        </div>
+        <div className="book_description">
+          <p>
+            Paulo Coelho's enchanting novel has inspired a devoted following
+            around the world. This story, dazzling in its powerful simplicity
+            and soul-stirring wisdom, is about an Andalusian shepherd boy named
+            Santiago who travels from his homeland in Spain to the Egyptian
+            desert in search of a treasure buried near the Pyramids. Along the
+            way he meets a Gypsy woman, a man who calls himself king, and an
+            alchemist, all of whom point Santiago in the direction of his quest.
+            No one knows what the treasure is, or if Santiago will be able to
+            surmount the obstacles in his path.
+            But what starts out as a journey
+            to find worldly goods turns into a discovery of the treasure found
+            within. Lush, evocative, and deeply humane, the story of Santiago is
+            an eternal testament to the transforming power of our dreams and the
+            importance of listening to our hearts
+          </p>
+        </div>
+        <hr/>
+        <div className="book_review">
+            <h2>Reviews of this book</h2>
+            <div className="review_details">
+                <StarIcon />
+                <StarIcon />
+                <StarIcon />
+                <StarIcon />
+                <StarOutlineIcon />
+                <p>5/5 | Rating:4599 |Reviews:3683 </p>
+            </div>
+            <button>Write your Review</button>
         </div>
-    )
+        <hr/>
+        {
+          comments.map((d,i)=>(
+            <CommentCard {...d} key={i} />
+          ))
+        }
+      </div>
+    );
 }
 
 export default ViewBook;
diff --git a/src/Components/ViewBook/ViewBook.scss b/src/Components/ViewBook/ViewBook.scss
new file mode 100644
index 0000000..a34f97b
--- /dev/null
+++ b/src/Components/ViewBook/ViewBook.scss
@@ -0,0 +1,180 @@
+@import '../Variables/variables';
+
+.viewbook_container{
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    margin: 0 10%;
+    align-items: center;
+    // height: 5000px;
+    .book_container{
+        display: flex;
+        width: 70%;
+        margin: 100px 0 0 ;
+
+        img{
+            object-fit: contain;
+            width: 242px;
+        }
+
+        .book_detail{
+            margin: 50px;
+            font-family: $raleway;
+            
+            h1{
+                font-size: 38px;
+            }
+
+            p{
+                font-size: 27px;
+            }
+
+            .star_review{
+                display: flex;
+                align-items: center;
+                margin: 20px 0 0;
+                .MuiSvgIcon-root{
+                    color: rgba(255, 209, 121, 1);
+                    
+                }
+
+                button{
+                    background: rgba(255, 209, 121, 1);
+                    outline: none;
+                    border: 0;
+                    padding: 5px;
+                    border-radius: 3px;
+                    margin: 0 15px 0;
+                    color: black;
+                }
+            }
+
+            button{
+                background: $violet;
+                color: white;
+                outline: none;
+                width: 80%;
+                border: 0;
+                padding: 10px;
+                border-radius: 3px;
+                margin: 25px 0 0;
+            }
+        }
+    }
+
+    .book_description{
+        width: 100%;
+        margin: 50px 0;
+    }
+
+    hr{
+        width: 100%;
+    }
+
+    .book_review{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: $raleway;
+
+        h2{
+            margin: 40px 0 25px;
+
+        }
+
+        .review_details{
+            display: flex;
+            font-family: $montserrat;
+            align-items: center;
+
+            .MuiSvgIcon-root{
+                color: rgba(255, 209, 121, 1);
+
+            }
+        }
+
+        button{
+            width: fit-content;
+            padding: 5px;
+            background: rgba(255, 209, 121, 1);
+            color: black;
+            font-family: $raleway;
+            outline: none;
+            border: 0;
+            border-radius: 3px;
+            margin: 25px 0 30px;
+        }
+    }
+}
+
+
+
+
+@media screen and (max-width:750px) {
+    .viewbook_container{
+        width:100%;
+        justify-content: flex-start;
+        align-items: flex-start;
+        margin: 5% 5px 0;
+        padding: 5px;
+        
+        .book_container{
+            width: 100%;
+            margin: 0;
+
+            img{
+                width: 100px;
+            }
+    
+            .book_detail{
+                margin: 2%;
+                
+                h1{
+                    font-size: 16px;
+                }
+    
+                p{
+                    font-size: 12px;
+                }
+    
+                .star_review{
+                    display: flex;
+                    align-items: center;
+                    margin: 2px 0 0;
+
+                    .MuiSvgIcon-root{
+                        width: 15px;
+                    }
+
+                    button{
+                        margin: 0 5px 0;
+                        font-size: 12px;
+                    }
+                }
+    
+                button{
+                    padding: 5px;
+                    border-radius: 3px;
+                    margin: 15px 0 0;
+                }
+            }
+        }
+    
+        .book_description{
+            font-size: 10px;
+        }
+    
+        hr{
+            width: 100%;
+        }
+    
+        .book_review{
+    
+            h2{
+                margin: 20px 0 15px;
+                font-size: 18px;
+            }
+
+        }
+    }    
+}
\ No newline at end of file