route to main-page

 import React from 'react';
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import Landing from './Landing';
 import Landing from './Landing';
+import Main from './Main';
 
 
 
 
 class App extends React.Component {
 class App extends React.Component {
@@ -9,6 +10,7 @@ class App extends React.Component {
             <Router>
             <Router>
                 <Switch>
                 <Switch>
                     <Route exact path="/landing" component={Landing} />
                     <Route exact path="/landing" component={Landing} />
+                    <Route exact path="/main" component={Main} />
                     <Redirect path="*" to="/landing" /> 
                     <Redirect path="*" to="/landing" /> 
                 </Switch>
                 </Switch>
             </Router>
             </Router>

@@ -5,10 +5,9 @@ import "../style/Landing.css";
 const Button = () => {
 const Button = () => {
     return (
     return (
         <div className="mainBtnContainer">
         <div className="mainBtnContainer">
-            <Link to='./main'>
+            <Link to="/main">
                 <button className="startBtn">Get Started!</button>
                 <button className="startBtn">Get Started!</button>
             </Link>
             </Link>
-
         </div>
         </div>
     )
     )
 }
 }

 import React from 'react'
 import React from 'react'
-
+import { Link } from 'react-router-dom';
+import logo from '../style/Logo.JPG';
 const Header = () => {
 const Header = () => {
     return (
     return (
-        <div className="Header">
-            <img src="../style/Logo.jpg" alt="Logo"></img>
+        <div className="HeaderContainer"
+            style={{
+                display: 'inline-block',
+                width: '100vw',
+                height: '100px',
+                background: '#2f3640'
+            }}
+        >
+
+            <div className="logo">
+                <Link to="/landing">
+                    <img
+                        src={logo}
+                        width='100px'
+                        height='100px'
+                        alt="Logo"></img>
+                </Link>
+            </div>
+
+
         </div>
         </div>
     )
     )
 }
 }

@@ -17,6 +17,7 @@ body {
     width: 100vw;
     width: 100vw;
     height: 100vh;
     height: 100vh;
 }
 }
+/*
 .Landingbg:after {
 .Landingbg:after {
     content: '';
     content: '';
     position: absolute;
     position: absolute;
@@ -28,7 +29,7 @@ body {
     background: rgba(0,0,0,0.001);
     background: rgba(0,0,0,0.001);
     box-shadow: inset 100px 100px 250px #000000, inset -100px -100px 250px #000000;
     box-shadow: inset 100px 100px 250px #000000, inset -100px -100px 250px #000000;
 }
 }
-
+*/
 .mainTextContainer{
 .mainTextContainer{
     text-align: center;
     text-align: center;
     position: relative;
     position: relative;
@@ -60,5 +61,5 @@ body {
 }
 }
 
 
 .startBtn:hover {
 .startBtn:hover {
-    opacity: 0.5;
+    opacity: 0.8;
 }
 }
\ No newline at end of file