diff --git a/src/App.js b/src/App.js
index eb549cf..482bfad 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,19 +12,20 @@ import {
 
 
 export default class App extends Component {
+  pageSize = 8
   render() {
     return (
       <div>
         <Router>
         <NavBar />
         <Routes>
-          <Route exact path='/home' element={<News key="general" pageSize={8} country={'in'} category={'general'} />}></Route> 
-          <Route exact path='/business' element={<News key="business" pageSize={8} country={'in'} category={'business'} />}></Route>
-          <Route exact path='/entertainment' element={<News key="entertainment" pageSize={8} country={'in'} category={'entertainment'} />}></Route>
-          <Route exact path='/health' element={<News key="health" pageSize={8} country={'in'} category={'health'} />} ></Route>
-          <Route exact path='/science' element={<News key="science" pageSize={8} country={'in'} category={'science'} />}></Route>
-          <Route exact path='/sports' element={<News key='sports' pageSize={8} country={'in'} category={'sports'} />}></Route>
-          <Route exact path='/technology' element={<News key='technology' pageSize={8} country={'in'} category={'technology'} />}></Route>
+          <Route exact path='/home' element={<News key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
+          <Route exact path='/business' element={<News key="business" pageSize={this.pageSize} country={'in'} category={'business'} />}></Route>
+          <Route exact path='/entertainment' element={<News key="entertainment" pageSize={this.pageSize} country={'in'} category={'entertainment'} />}></Route>
+          <Route exact path='/health' element={<News key="health" pageSize={this.pageSize} country={'in'} category={'health'} />} ></Route>
+          <Route exact path='/science' element={<News key="science" pageSize={this.pageSize} country={'in'} category={'science'} />}></Route>
+          <Route exact path='/sports' element={<News key='sports' pageSize={this.pageSize} country={'in'} category={'sports'} />}></Route>
+          <Route exact path='/technology' element={<News key='technology' pageSize={this.pageSize} country={'in'} category={'technology'} />}></Route>
         </Routes>
         </Router>
       </div>
diff --git a/src/components/News.js b/src/components/News.js
index 6ccf2c9..9981a3d 100644
--- a/src/components/News.js
+++ b/src/components/News.js
@@ -1,98 +1,129 @@
-import React, { Component } from 'react'
-import NewsItem from './NewsItem'
-import Spinner from './Spinner';
-import PropTypes from 'prop-types'
+import React, { Component } from "react";
+import NewsItem from "./NewsItem";
+import Spinner from "./Spinner";
+import PropTypes from "prop-types";
 
 export class News extends Component {
+  static defaultProps = {
+    country: "in",
+    pageSize: 8,
+    category: "science",
+  };
 
-    static defaultProps = {
-        country : 'in',
-        pageSize : 8,
-        category : 'science'
-    }
+  static propTypes = {
+    country: PropTypes.string,
+    pageSize: PropTypes.number,
+    category: PropTypes.string,
+  };
 
-    static propTypes = {
-        country : PropTypes.string,
-        pageSize : PropTypes.number,
-        category : PropTypes.string
-
-    }
-
-
-    constructor() {
-        super();
-        this.state = {
-            articles: [],
-            loading: false,
-            page: 1,
-            total_results: 0
-        }
-    }
+  constructor() {
+    super();
+    this.state = {
+      articles: [],
+      loading: false,
+      page: 1,
+      total_results: 0,
+    };
+  }
 
-    //Lifecycle method run after render method is called ; used for loading of data
-    componentDidMount() {
-        this.fetchNewsData(1) //intially fetch data for 1st page
-    }
+  //Lifecycle method run after render method is called ; used for loading of data
+  componentDidMount() {
+    this.fetchNewsData(this.state.page); //intially fetch data for 1st page
+  }
 
-    handleNextClick = () => {
-        this.setState({page: this.state.page + 1})
-        console.log(this.state.page)
-        this.fetchNewsData(this.state.page+1)
-    }
+  handleNextClick = () => {
+    this.setState({ page: this.state.page + 1 });
+    console.log(this.state.page);
+    this.fetchNewsData(this.state.page + 1);
+  };
 
-    handlePrevClick = () => {
-        this.setState({page: this.state.page - 1})
-        console.log(this.state.page)
-        this.fetchNewsData(this.state.page-1)
-    }
+  handlePrevClick = () => {
+    this.setState({ page: this.state.page - 1 });
+    console.log(this.state.page);
+    this.fetchNewsData(this.state.page - 1);
+  };
 
-    async fetchNewsData(page){
-        let todayDate = this.getCurrentDate()
-        let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&from=${todayDate}&sortBy=publishedAt&apiKey=7d248d9c8ea64fa6a4691432a30a74ac&pageSize=${this.props.pageSize}&page=` + page
-        console.log(url)
-        this.setState({loading: true}) 
-        let data = await fetch(url) ;
-        let parsedData = await data.json()
-        console.log(parsedData)
-        this.setState({loading: false})
-        this.setState({articles: parsedData.articles, total_results: parsedData.totalResults})
-    }
+  async fetchNewsData(page) {
+    let todayDate = this.getCurrentDate();
+    const url =
+      `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&from=${todayDate}&sortBy=publishedAt&apiKey=7d248d9c8ea64fa6a4691432a30a74ac&pageSize=${this.props.pageSize}&page=` +
+      page;
+    console.log(url);
+    this.setState({ loading: true });
+    let data = await fetch(url);
+    let parsedData = await data.json();
+    console.log(parsedData);
+    this.setState({ loading: false });
+    this.setState({
+      articles: parsedData.articles,
+      total_results: parsedData.totalResults,
+    });
+  }
 
-    showNextButton() {
-        return this.state.page + 1 > Math.ceil(this.state.total_results/this.props.pageSize)
-    }
+  showNextButton() {
+    return (
+      this.state.page + 1 >
+      Math.ceil(this.state.total_results / this.props.pageSize)
+    );
+  }
 
-    getCurrentDate() {
-        var today = new Date();
-        var dd = String(today.getDate()).padStart(2, '0');
-        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
-        var yyyy = today.getFullYear();
+  getCurrentDate() {
+    var today = new Date();
+    var dd = String(today.getDate()).padStart(2, "0");
+    var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
+    var yyyy = today.getFullYear();
 
-        today = yyyy + '-' + mm + '-' + dd;
-        return today
-    }
+    today = yyyy + "-" + mm + "-" + dd;
+    return today;
+  }
 
   render() {
     return (
-      <div className='container my-3'>
-        {this.state.loading && <Spinner/>}
-        <h1 className='text-center' style={{margin: '35px 0px'}}> NewsMonkey -- Top Headlines</h1>
-        <div className='row'>
-            {!this.state.loading && this.state.articles.map((element) => {
-                return <div className='col md-4' key={element.url}>
-                   <NewsItem title={element.title.slice(0,45)} description={element.description}
-                    imageUrl={element.urlToImage} newsUrl={element.url} author={element.author} 
-                    date={element.publishedAt.slice(0,10)}/>
-                </div> 
+      <div className="container my-3">
+        {this.state.loading && <Spinner />}
+        <h1 className="text-center" style={{ margin: "35px 0px" }}>
+          {" "}
+          NewsMonkey -- Top Headlines
+        </h1>
+        <div className="row">
+          {!this.state.loading &&
+            this.state.articles.map((element) => {
+              return (
+                <div className="col md-4" key={element.url}>
+                  <NewsItem
+                    title={element.title.slice(0, 45)}
+                    description={element.description}
+                    imageUrl={element.urlToImage}
+                    newsUrl={element.url}
+                    author={element.author}
+                    date={element.publishedAt.slice(0, 10)}
+                  />
+                </div>
+              );
             })}
+        </div>
+        <div className="container d-flex justify-content-between">
+          <button
+            disabled={this.state.page <= 1}
+            type="button"
+            className="btn btn-dark"
+            onClick={this.handlePrevClick}
+          >
+            {" "}
+            &larr; Previous
+          </button>
+          <button
+            disabled={this.showNextButton()}
+            type="button"
+            className="btn btn-dark"
+            onClick={this.handleNextClick}
+          >
+            Next &rarr;{" "}
+          </button>
+        </div>
       </div>
-      <div className='container d-flex justify-content-between'>
-      <button disabled={this.state.page <=1} type="button" className="btn btn-dark" onClick={this.handlePrevClick}> &larr; Previous</button>
-      <button disabled={this.showNextButton()} type="button" className="btn btn-dark" onClick={this.handleNextClick}>Next &rarr; </button>
-      </div>
-      </div>
-    )
+    );
   }
 }
 
-export default News
\ No newline at end of file
+export default News;