diff --git a/frontend/src/components/App.jsx b/frontend/src/components/App.jsx
new file mode 100644
index 00000000..2458e2e3
--- /dev/null
+++ b/frontend/src/components/App.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import {Routes, Route} from 'react-router-dom';
+import Home from "../pages/Home.js";
+import PlayButton from "../pages/PlayButton.js";
+import Field from "../pages/Field";
+import Login42 from "../pages/Login42.js";
+import Messages from "../pages/Messages.jsx";
+import { useLocation } from "react-router-dom";
+import {AnimatePresence} from "framer-motion";
+
+function AnimatedRoute () {
+	const location = useLocation();
+	return (
+		<AnimatePresence>
+			<Routes location={location} key={location.pathname}>
+				<Route exact path="/" element={<Home/>}/>
+				<Route path="/game" element={<PlayButton />}/>
+				<Route exact path="/pong/play" element={<Field />}/>
+				<Route exact path="/login42" element={<Login42 />}/>
+				<Route exact path="/messages" element={<Messages />}/>
+			</Routes>
+		</AnimatePresence>
+	)
+}
+
+export default AnimatedRoute
\ No newline at end of file
diff --git a/frontend/src/pages/NewLogin.js b/frontend/src/pages/NewLogin.js
new file mode 100644
index 00000000..4e98f900
--- /dev/null
+++ b/frontend/src/pages/NewLogin.js
@@ -0,0 +1,23 @@
+import '../styles/field.css';
+// import { useHistory } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
+
+function PlayButton() {
+
+	const history = useNavigate();
+
+	const handleButtonClick = () => {
+		let path = `play`; 
+		history(path);
+	};
+
+	return (
+		<div className="notClicked" id="canvas_container">
+			<button onClick={handleButtonClick} className="playButton">Play</button>
+			{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
+
+		</div>
+		);
+}
+
+export default PlayButton;
\ No newline at end of file