diff --git a/package.json b/package.json
index fdd64ca..5d03370 100755
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-markdown": "^4.0.6",
+    "react-router-dom": "^5.1.2",
     "reactstrap": "^6.5.0"
   },
   "husky": {
diff --git a/src/App.js b/src/App.js
index 7b14f5a..bfc63ed 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import React, { Fragment, Component } from "react";
 import { Button } from 'reactstrap';
-
+import { BrowserRouter, Route } from 'react-router-dom';
 import Navigation from './Components/Navigation';
 import Main from './Components/Main';
 import Herocontent from './Components/Herocontent';
@@ -10,51 +10,50 @@ import AppMarkdown from '../README.md';
 const markdownContext = require.context('../docs', false, /\.md$/);
 const markdownFiles = markdownContext
   .keys()
-  //.map((filename) => markdownContext(filename))
+//.map((filename) => markdownContext(filename))
 //console.log("hey"+markdownFiles); 
 
 class App extends React.Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
-      count : 5,
-      posts1 : []
-    }    
+      count: 5,
+      posts1: []
+    }
   }
-  
+
   componentDidMount() {
     var newPosts = [];
     const posts = markdownFiles.forEach(
-                    (file, key  ) => {
-                      newPosts.push({
-                        id: key, 
-                        data:  "."+file
-                      });
-                    }
-                  );
+      (file, key) => {
+        newPosts.push({
+          id: key,
+          data: "." + file
+        });
+      }
+    );
 
     newPosts.map(
-                  (post) => 
-                  {
-                    let a =10;
-                    console.log("new values===>"+post.data);
-                    let av = this.apiGetAll(post.data);
-                    console.log("json--->"+JSON.stringify(av));
-                  }
-                );    
+      (post) => {
+        let a = 10;
+        console.log("new values===>" + post.data);
+        let av = this.apiGetAll(post.data);
+        console.log("json--->" + JSON.stringify(av));
+      }
+    );
     //this.apiGetAll(newPosts["data"]);
     return false;
   }
 
-  async apiGetAll (newPosts) {
+  async apiGetAll(newPosts) {
     let cc = [];
     try {
-      const resp = await fetch(newPosts).then( res => res.text() );
-      console.log("fetch---"+resp);
+      const resp = await fetch(newPosts).then(res => res.text());
+      console.log("fetch---" + resp);
       cc.push({
-        data : resp
+        data: resp
       });
-      console.log("json--->"+JSON.stringify(cc));
+      console.log("json--->" + JSON.stringify(cc));
       /* const newResp = await Promise.all((resp)).then(result => {
        console.log("hey--->"+result);
         this.setState({posts1: result});
@@ -65,7 +64,7 @@ class App extends React.Component {
     } catch (err) {
       console.log(err);
     }
-  }  
+  }
 
   /*getFileResults(newPosts) {
     let data = [];
@@ -92,30 +91,32 @@ class App extends React.Component {
                 });
   }*/
 
-  render() {  
+  render() {
     return (
       <div>
-        <Navigation />
-        <Herocontent />
-        <Main />
-        <Fragment>
-          <section className="section">
-            <div className="container">
-              <div className="card">
-                <div className="card-content">
-                  <div className="content">
-                    {
-                      //newPosts.map((post, idx) => (
-                      // this.state.posts1
-                      // ))
-                    } 
-                    <ReactMarkdown source={this.state.posts1} />
+        <BrowserRouter>
+          <Navigation />
+          <Herocontent />
+          <Route exact path="/" component={Main} />
+          <Fragment>
+            <section className="section">
+              <div className="container">
+                <div className="card">
+                  <div className="card-content">
+                    <div className="content">
+                      {
+                        //newPosts.map((post, idx) => (
+                        // this.state.posts1
+                        // ))
+                      }
+                      <ReactMarkdown source={this.state.posts1} />
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </section>
-        </Fragment>
+            </section>
+          </Fragment>
+        </BrowserRouter>
       </div>
     );
   }
diff --git a/src/Components/Main.js b/src/Components/Main.js
index faaaec0..54033ae 100755
--- a/src/Components/Main.js
+++ b/src/Components/Main.js
@@ -1,44 +1,45 @@
 
 import React from 'react';
-import {titleMetaData} from './data';
+import { Link } from 'react-router-dom'
+import { titleMetaData } from './data';
 
 class Main extends React.Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
-      count : 5,
-      posts1 : []
-    }    
+      count: 5,
+      posts1: []
+    }
   }
-  
+
   componentDidMount() {
     //console.log(JSON.stringify(titleMetaData));
   }
 
   render() {
-    return(
+    return (
       <div className="main thememain-white">
         {
-            titleMetaData.map( (title) =>
-              <div className="container content-main">
-                <div className="row">
-                  <div className="col-12">
-                    <h3>{ title.labelTitle }</h3>
-                  </div>
+          titleMetaData.map((title) =>
+            <div className="container content-main">
+              <div className="row">
+                <div className="col-12">
+                  <h3>{title.labelTitle}</h3>
                 </div>
-                <div className="row">
-                  <div className="col-sm">
-                    <ul>
-                      {title.topics.map((topics) =>
-                        <li><a href={topics.url}>{topics.title}</a></li>
-                      )}
-                    </ul>
-                  </div>
+              </div>
+              <div className="row">
+                <div className="col-sm">
+                  <ul>
+                    {title.topics.map((topics) =>
+                      <li><Link to={topics.url}>{topics.title}</Link></li>
+                    )}
+                  </ul>
                 </div>
               </div>
-            )
-          }
-        </div>
+            </div>
+          )
+        }
+      </div>
     );
   }
 }