diff --git a/src/components/App.js b/src/components/App.js
index 3aaf380c..dd7dcd97 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -8,7 +8,7 @@ function App() {
             <Header/>
             <div className="flex">
                 <Sidebar/>
-                <div>
+                <div  className="flex1">
                     <Outlet/>
                 </div>
             </div>
diff --git a/src/components/Article.js b/src/components/Article.js
index fb20e0d1..0ca41bc1 100644
--- a/src/components/Article.js
+++ b/src/components/Article.js
@@ -3,7 +3,7 @@ import { Link, useParams} from "react-router-dom";
 function Article() {
     const {slug} = useParams();
   return (
-    <>
+    <div className="margin">
       <Link to="/articles">
         <h4 style={{ marginBottom: "1rem" }}>
           <span role="img" aria-label="Finger Point">
@@ -15,7 +15,7 @@ function Article() {
       <h1>
         The slug of the article is::: <b>{slug}</b>!
       </h1>
-    </>
+    </div>
   );
 }
 
diff --git a/src/components/Articles.js b/src/components/Articles.js
index 41163b8b..6113050d 100644
--- a/src/components/Articles.js
+++ b/src/components/Articles.js
@@ -4,16 +4,17 @@ import ArticleList from "../data/articles";
 
 const Articles = () => {
   return (
-    <>
+    <div className="margin">
       {ArticleList.map((article, index) => (
         <div className="art" key={index}>
             <Link to={article.slug}>
                 <h3>{article.title}</h3>
             </Link>
             <h2>{article.author}</h2>
+            <br></br>
         </div>
       ))}
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/Books.js b/src/components/Books.js
index b923e086..9e93310d 100644
--- a/src/components/Books.js
+++ b/src/components/Books.js
@@ -1,7 +1,48 @@
-const Books = ()=>{
-    return(
-        <h1>This is Books page</h1>
-    )
+import React from "react";
+import books from "../data/books.json";
+
+class Books extends React.Component {
+  state = {
+    searchTerm: ""
+  };
+  handleChange = ({ target: { value } }) => {
+    this.setState({ searchTerm: value });
+  };
+  render() {
+    let filteredBooks = books.filter((article) =>
+      article.title.toLowerCase().includes(this.state.searchTerm)
+    );
+    return (
+      <div className="page">
+        <input
+          placeholder="Search"
+          className="search"
+          value={this.state.searchTerm}
+          onChange={this.handleChange}
+        />
+        <ul className="archive">
+          {filteredBooks.map((book) => (
+            <Book {...book} />
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+function Book(props) {
+  return (
+    <li className="book">
+      <img src={props.image} alt={props.title} />
+      <h2>{props.title}</h2>
+      <p>
+        Author:<span>{props.author}</span>
+      </p>
+      <a href={props.website}>
+        <button>Buy Now</button>
+      </a>
+    </li>
+  );
 }
 
-export default Books;
\ No newline at end of file
+export default Books;
diff --git a/src/components/Help.js b/src/components/Help.js
index 743c4014..3723ed91 100644
--- a/src/components/Help.js
+++ b/src/components/Help.js
@@ -1,7 +1,5 @@
-const Help = ()=>{
-    return(
-      <h1>Nothing is here !</h1>
-    )
-  }
-  
-  export default Help;
\ No newline at end of file
+function Help() {
+  return <h1>🤷‍♀️ How can we help you?</h1>;
+}
+
+export default Help;
diff --git a/src/components/Home.js b/src/components/Home.js
index fab12f1f..33275ace 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 
 function Home() {
   return (
-    <>
+    <div className="margin">
       <h1>🚀 Welcome to Homepage!</h1>
       <ul className="people">
         {["articles", "books", "people"].map((path,index) => {
@@ -17,7 +17,7 @@ function Home() {
           );
         })}
       </ul>
-    </>
+    </div>
   );
 }
 
diff --git a/src/components/Peoples.js b/src/components/Peoples.js
index 2d015eca..7239a6bf 100644
--- a/src/components/Peoples.js
+++ b/src/components/Peoples.js
@@ -1,7 +1,52 @@
-const Peoples = ()=>{
-  return(
-    <h1>This is people page</h1>
-  )
+import React from "react";
+
+import people from "../data/got.json";
+
+class People extends React.Component {
+  state = {
+    searchTerm: ""
+  };
+  handleChange = ({ target: { value } }) => {
+    this.setState({ searchTerm: value });
+  };
+  render() {
+    let allPeople = people.reduce((acc, cv) => {
+      acc = acc.concat(cv.people);
+      return acc;
+    }, []);
+
+    let filteredPeople = allPeople.filter((person) =>
+      person.name.toLowerCase().includes(this.state.searchTerm)
+    );
+    return (
+      <>
+        <input
+          placeholder="Search"
+          className="search"
+          value={this.state.searchTerm}
+          onChange={this.handleChange}
+        />
+        <ul className="people">
+          {filteredPeople.map((sp) => (
+            <SinglePerson {...sp} />
+          ))}
+        </ul>
+      </>
+    );
+  }
+}
+
+function SinglePerson(props) {
+  return (
+    <li className="card">
+      <div className="info">
+        <img src={props.image} alt={props.name} />
+        <h2>{props.name}</h2>
+      </div>
+      <p>{props.description}</p>
+      <a href={props.wikiLink}>Learn More!</a>
+    </li>
+  );
 }
 
-export default Peoples;
\ No newline at end of file
+export default People;
diff --git a/src/style.css b/src/style.css
index 1bc66834..de9b4c1b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,296 +1,287 @@
 * {
-    margin: 0;
-    padding: 0;
-  }
-  body {
-    font-family: "Hind Vadodara", -apple-system, BlinkMacSystemFont, Segoe UI,
-      Helvetica Neue, Arial, sans-serif;
-  }
-  .container {
-    display: flex;
-    width: 100vw;
-    flex-wrap: wrap;
-    overflow: hidden;
-  }
-  .main {
-    height: calc(100% - 50px);
-    display: flex;
-    flex: 1;
-  }
-  .sidebar {
-    height: 100%;
-    width: 220px;
-    box-sizing: border-box;
-    box-shadow: 0 0 2rem 0 rgb(0 0 0 / 5%);
-    overflow: hidden;
-    transition: width 0.5s ease;
-  }
-  .container.nav-closed .sidebar,
-  .container.nav-closed .header-logo {
-    width: 0;
-  }
-  .sidebar ul {
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
-  }
-  .sidebar ul li {
-    display: flex;
-    align-items: center;
-  }
-  .sidebar ul li a {
-    color: #000;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 10px;
-    white-space: nowrap;
-  }
-  .sidebar ul li a.active,
-  .sidebar ul li a:hover {
-    background: #e8ecef;
-  }
-  .sidebar ul li span {
-    margin-left: 16px;
-    font-size: 16px;
-    font-weight: 100;
-  }
-  .sidebar ul li i {
-    font-size: 18px;
-    color: #111;
-    font-weight: normal;
-  }
-  .header {
-    height: 50px;
-    background: #303f9f;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-basis: 100%;
-  }
-  .sidebar ul li a.active i {
-    color: #303f9e;
-  }
-  .site-logo {
-    height: 32px;
-    width: 32px;
-    min-height: 32px;
-    min-width: 32px;
-    margin: 0 18px 0 15px;
-  }
-  .site-logo path {
-    fill: #fff;
-  }
-  .site-title {
-    color: #fff;
-    font-size: 24px;
-    letter-spacing: 1px;
-    font-weight: 400;
-    text-decoration: none !important;
-  }
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: "Hind Vadodara", -apple-system, BlinkMacSystemFont, Segoe UI,
+    Helvetica Neue, Arial, sans-serif;
+}
+.container {
+  display: flex;
+  width: 100vw;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+.main {
+  height: calc(100% - 50px);
+  display: flex;
+  flex: 1;
+}
+.sidebar {
+  height: 100%;
+  width: 220px;
+  box-sizing: border-box;
+  box-shadow: 0 0 2rem 0 rgb(0 0 0 / 5%);
+  overflow: hidden;
+  transition: width 0.5s ease;
+}
+.container.nav-closed .sidebar,
+.container.nav-closed .header-logo {
+  width: 0;
+}
+.sidebar ul {
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+}
+.sidebar ul li {
+  display: flex;
+  align-items: center;
+}
+.sidebar ul li a {
+  color: #000;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px;
+  white-space: nowrap;
+}
+.sidebar ul li a.active,
+.sidebar ul li a:hover {
+  background: #e8ecef;
+}
+.sidebar ul li span {
+  margin-left: 16px;
+  font-size: 16px;
+  font-weight: 100;
+}
+.sidebar ul li i {
+  font-size: 18px;
+  color: #111;
+  font-weight: normal;
+}
+.header {
+  height: 50px;
+  background: #303f9f;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-basis: 100%;
+}
+.sidebar ul li a.active i {
+  color: #303f9e;
+}
+.site-logo {
+  height: 32px;
+  width: 32px;
+  min-height: 32px;
+  min-width: 32px;
+  margin: 0 18px 0 15px;
+}
+.site-logo path {
+  fill: #fff;
+}
+.site-title {
+  color: #fff;
+  font-size: 24px;
+  letter-spacing: 1px;
+  font-weight: 400;
+  text-decoration: none !important;
+}
+.page-content {
+  padding: 10px 20px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100vh;
+  flex: 1;
+  background: #d1efef;
+}
+.page-content h1 {
+  font-size: 20px;
+  font-weight: 400;
+  color: #333;
+}
+.header-search {
+  height: 100%;
+  align-items: center;
+  display: flex;
+  padding: 0 20px;
+  flex: 1;
+}
+.header-search .button-menu {
+  width: 28px;
+  height: 28px;
+  margin-right: 15px;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+.header-logo {
+  display: flex;
+  align-items: center;
+  width: 220px;
+  overflow: hidden;
+  transition: width 0.5s ease;
+}
+.header-search input[type="search"] {
+  height: 100%;
+  width: 300px;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 100;
+  background: none;
+  border: none;
+  color: #fff;
+}
+.header-search input[type="search"]:focus {
+  outline: none;
+}
+.header-search input[type="search"]::placeholder {
+  color: #ccc;
+}
+.header-search .button-menu:focus {
+  outline: none;
+  border: none;
+}
+.header-search .button-menu svg path {
+  fill: #fff;
+}
+@media screen and (max-width: 991px) {
   .page-content {
-    padding: 10px 20px;
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 100vh;
-    flex: 1;
-    background: #d1efef;
-  }
-  .page-content h1 {
-    font-size: 20px;
-    font-weight: 400;
-    color: #333;
-  }
-  .header-search {
-    height: 100%;
-    align-items: center;
-    display: flex;
-    padding: 0 20px;
-    flex: 1;
-  }
-  .header-search .button-menu {
-    width: 28px;
-    height: 28px;
-    margin-right: 15px;
-    background: none;
-    border: 0;
-    cursor: pointer;
+    min-width: 100vw;
   }
+}
+@media screen and (max-width: 767px) {
   .header-logo {
-    display: flex;
-    align-items: center;
-    width: 220px;
-    overflow: hidden;
-    transition: width 0.5s ease;
-  }
-  .header-search input[type="search"] {
-    height: 100%;
-    width: 300px;
-    padding: 10px 20px;
-    box-sizing: border-box;
-    font-size: 14px;
-    font-weight: 100;
-    background: none;
-    border: none;
-    color: #fff;
-  }
-  .header-search input[type="search"]:focus {
-    outline: none;
-  }
-  .header-search input[type="search"]::placeholder {
-    color: #ccc;
+    display: none;
   }
-  .header-search .button-menu:focus {
-    outline: none;
-    border: none;
-  }
-  .header-search .button-menu svg path {
-    fill: #fff;
-  }
-  @media screen and (max-width: 991px) {
-    .page-content {
-      min-width: 100vw;
-    }
-  }
-  @media screen and (max-width: 767px) {
-    .header-logo {
-      display: none;
-    }
-  }
-  
-  .articles {
-    padding: 0.5rem 0.75rem;
-    text-align: left;
-  }
-  .articles li {
-    margin: 0.5rem 0;
-  }
-  
-  .archive {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    grid-gap: 1em;
-  }
-  
-  div.box {
-    padding: 1em;
-    background: #fff;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
-  }
-  button {
-    background: teal;
-    color: white;
-    border: 0;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    margin-top: 0.75rem;
-    cursor: pointer;
-  }
-  
-  .awesome-box {
-    border-radius: 10px;
-    border: 2px solid black;
-    background: linear-gradient(
-      to right,
-      #f7ff00,
-      #db36a4
-    ) !important; /* Chrome 10-25, Safari 5.1-6 */
-  }
-  ul {
-    list-style: none;
-    text-align: center;
-    padding-top: 20px;
-  }
-  header {
-    background: teal;
-  }
-  header h1 {
-    padding: 2rem 0;
-    text-align: center;
-    color: yellow;
-    font-weight: bolder;
-    box-shadow: 2px 2px 2px thistle;
-  }
-  .book {
-    background-color: white;
-    padding: 1.5rem 0.5rem;
-    border-radius: 5px;
-    border: 5px solid transparent;
-  }
-  
-  .book h2 {
-    font-size: 1.25rem;
-    color: black;
-    padding-top: 0.5rem;
-    text-align: center;
-  }
-  .book p {
-    font-size: 0.8rem;
-    padding: 0.75rem 0;
-  }
-  
-  .book img {
-    width: 150px;
-  }
-  
-  .card {
-    background: #fff;
-    padding: 1rem;
-    box-shadow: 0px 17px 26px -8px rgba(151, 172, 193, 0.6);
-    border-radius: 8px;
-  }
-  
-  .card img {
-    border-radius: 50%;
-    border: 2px solid teal;
-  }
-  h2 {
-    font-size: 20px;
-    color: black;
-  }
-  .info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  .info img {
-    margin-right: 20px;
-  }
-  p {
-    font-size: 14px;
-    color: black;
-    padding: 0.5rem 0;
-  }
-  
-  .people {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 2rem;
-  }
-  
-  input.search {
-    padding: 0.5rem 1rem;
-    margin-left: 1rem;
-    width: 20rem;
-    margin: 0 auto;
-  }
-  
+}
 
-.flex{
-  display: flex;
-  
+.articles {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+.articles li {
+  margin: 0.5rem 0;
+}
+
+.archive {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 1em;
+}
+
+div.box {
+  padding: 1em;
+  background: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.05);
+}
+button {
+  background: teal;
+  color: white;
+  border: 0;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  margin-top: 0.75rem;
+  cursor: pointer;
+}
+
+.awesome-box {
+  border-radius: 10px;
+  border: 2px solid black;
+  background: linear-gradient(
+    to right,
+    #f7ff00,
+    #db36a4
+  ) !important; /* Chrome 10-25, Safari 5.1-6 */
+}
+ul {
+  list-style: none;
+  text-align: center;
+  padding-top: 20px;
+}
+header {
+  background: teal;
+}
+header h1 {
+  padding: 2rem 0;
+  text-align: center;
+  color: yellow;
+  font-weight: bolder;
+  box-shadow: 2px 2px 2px thistle;
+}
+.book {
+  background-color: white;
+  padding: 1.5rem 0.5rem;
+  border-radius: 5px;
+  border: 5px solid transparent;
+}
+
+.book h2 {
+  font-size: 1.25rem;
+  color: black;
+  padding-top: 0.5rem;
+  text-align: center;
+}
+.book p {
+  font-size: 0.8rem;
+  padding: 0.75rem 0;
+}
+
+.book img {
+  width: 150px;
 }
 
-/* article */
+.card {
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0px 17px 26px -8px rgba(151, 172, 193, 0.6);
+  border-radius: 8px;
+}
 
-.art{
-  margin: 20px 50px;
+.card img {
+  border-radius: 50%;
+  border: 2px solid teal;
 }
-.art h1{
+h2 {
   font-size: 20px;
-  color: royalblue;
+  color: black;
 }
-.art h2{
-  font-size: 16px;
+.info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.info img {
+  margin-right: 20px;
+}
+p {
+  font-size: 14px;
+  color: black;
+  padding: 0.5rem 0;
+}
+
+.people {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 2rem;
+}
+
+input.search {
+  padding: 0.5rem 1rem;
+  margin-left: 1rem;
+  width: 20rem;
+  margin: 0 auto;
+}
+.flex{
+  display: flex;
+}
+.flex1{
+  width: 80%;
+}
+
+.margin{
+  margin: 20px 30px;
 }
\ No newline at end of file