diff --git a/frontend/src/App.js b/frontend/src/App.js
index f69651a..3789f2d 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,19 +1,20 @@
 import './App.css';
 import HomePage from './pages/HomePage'
-import { BrowserRouter as Router} from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import AuthPage from './pages/AuthPage'
-import { Switch, Route } from 'react-router-dom';
 
 function App() {
   return (
     <Router>
-      <div className="App">
-        <Switch>
-          <Route path="/auth" component={AuthPage} />
-        </Switch>
-        <HomePage />
-      </div>
+
+    <Routes>
+    <Route path="/auth" element={<AuthPage />} />
+    <Route path="/" element={<div className="App">
+      <HomePage />
+      </div>} />
+    </Routes>
     </Router>
+
   );
 }
 
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 2d2ca83..a206509 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -17,6 +17,7 @@ import {
 } from 'mdb-react-ui-kit';
 import 'mdb-react-ui-kit/dist/css/mdb.min.css';
 import "@fortawesome/fontawesome-free/css/all.min.css";
+import { Link } from 'react-router-dom';
 
 export default function App() {
   const [showBasic, setShowBasic] = useState(false);
@@ -24,7 +25,9 @@ export default function App() {
   return (
     <MDBNavbar expand='lg' light bgColor='light'>
       <MDBContainer fluid>
-        <MDBNavbarBrand href='#'>CodeBox</MDBNavbarBrand>
+        <Link to="/">
+        <MDBNavbarBrand>CodeBox</MDBNavbarBrand>
+        </Link>
 
         <MDBNavbarToggler
           aria-controls='navbarSupportedContent'
diff --git a/frontend/src/components/MainCard.jsx b/frontend/src/components/MainCard.jsx
index aaa9ed3..2dbcb3b 100644
--- a/frontend/src/components/MainCard.jsx
+++ b/frontend/src/components/MainCard.jsx
@@ -10,12 +10,11 @@ import {
 } from 'mdb-react-ui-kit';
 import 'mdb-react-ui-kit/dist/css/mdb.min.css';
 import "@fortawesome/fontawesome-free/css/all.min.css";
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
 
 const MainCard = () => {
   return (
-    <>
-      <MDBCard>
+      <MDBCard style={{width: "80%"}}>
         <MDBCardBody>
           <MDBCardTitle>Welcome to CodeBox!</MDBCardTitle>
           <MDBCardText>
@@ -26,7 +25,6 @@ const MainCard = () => {
 
         </MDBCardBody>
       </MDBCard>
-    </>
   );
 }
 
diff --git a/frontend/src/pages/BasicPage.jsx b/frontend/src/pages/BasicPage.jsx
index 089f811..d1efbc6 100644
--- a/frontend/src/pages/BasicPage.jsx
+++ b/frontend/src/pages/BasicPage.jsx
@@ -1,12 +1,12 @@
 import Header from '../components/Header'
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 
-function BasicPage(props){
+const BasicPage = (props, style) => {
     return (
-        <>
+        <div style={style}>
             <Header />
             {props.children}
-        </>
+        </div>
     );
 }
 
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 32fca54..5b63169 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -3,7 +3,7 @@ import MainCard from '../components/MainCard'
 
 const Page = () => {
     return (
-        <BasicPage>
+        <BasicPage style={{margin: "20%"}}>
             <MainCard />
         </BasicPage>
     );