diff --git a/package.json b/package.json
index f6a74772d..fbc747541 100644
--- a/package.json
+++ b/package.json
@@ -15,5 +15,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
index 7bee02710..b0af97486 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React Router Basic Nav</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.js b/src/App.js
index 8dcc53b0b..cdccefa76 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import './App.css';
+import { Route } from "react-router-dom"
 import { Home, About, Contact, Navigation } from './components';
 
 const App = () => (
   <div>
     <Navigation />
+    <Route exact path="/" component={Home} />
+    <Route path="/about" component={About} />
+    <Route path="/contact" component={Contact} />
   </div>
 );
 
diff --git a/src/components/Contact.js b/src/components/Contact.js
index 23026b0db..3c49005a3 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
 
-const Contact = () => <h1>Contact</h1>;
+const Contact = () => <h1>Contact Us</h1>;
 
 export default Contact;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 2a0b35d9e..8a57a55f5 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+import { Link } from "react-router-dom";
 
 const Navigation = () => {
   return (
@@ -6,13 +7,13 @@ const Navigation = () => {
       <div className="App">
         <h1>React Router Mini</h1>
         <div>
-          <a href="">Home</a>
+          <Link to="/">Home</Link>
         </div>
         <div>
-          <a href="">About</a>
+          <Link to="/about">About</Link>
         </div>
         <div>
-          <a href="">Contact</a>
+          <Link to="/contact">Contact</Link>
         </div>
       </div>
     </div>
diff --git a/src/index.js b/src/index.js
index a682d5a8a..3a1fd33cd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import { BrowserRouter as Router} from "react-router-dom"
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.css';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+<Router>
+    <App />
+</Router>, 
+document.getElementById('root'));
