Acho que esta

frontend/src/App.js

@@ -1,11 +1,7 @@
+// src/App.js
 import React from 'react';
-
-
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import LoginPage from './pages/LoginPageMain'; // Ajuste o caminho conforme a estrutura de pastas
-
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import LoginPage from './pages/LoginPageMain';
 import RegisterPage from './pages/RegisterPage';
 import StorysPage from './pages/StorysPage';
 import HomePage from './pages/HomePagee';
@@ -15,10 +11,14 @@ import ThirdLayout from './layouts/ThirdLayout';
 import Profile from './pages/Profile';
 import CreateStory from './pages/CreateStory';
 import Story from './pages/Story';
+import NotFound from './pages/NotFound'; // Importação da página 404
+
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
   return (
-      <Router>
+      <Router basename="/storytime"> {/* Certifique-se de substituir "/StoryTime" pelo nome do seu repositório */}
           <Routes>
               <Route element={<MainPageLayout />}>
                   <Route path="/" element={<HomePage />} />
@@ -39,11 +39,13 @@ function App() {
                   <Route path="/create-story" element={<CreateStory />} />
                   <Route path="/story/:id" element={<Story />} /> 
               </Route>
+
+              {/* Rota para páginas não encontradas */}
+              <Route path="*" element={<NotFound />} />
           </Routes>
           <ToastContainer />
       </Router>
   );
 }
 
-
 export default App;

frontend/src/pages/NotFound.js

@@ -0,0 +1,52 @@
+// src/pages/NotFound.js
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #f8f9fa;
+  text-align: center;
+`;
+
+const Title = styled.h1`
+  font-size: 4rem;
+  color: #343a40;
+`;
+
+const Message = styled.p`
+  font-size: 1.5rem;
+  color: #6c757d;
+  margin-bottom: 2rem;
+`;
+
+const HomeButton = styled(Link)`
+  padding: 0.75rem 1.5rem;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 0.25rem;
+  text-decoration: none;
+  font-size: 1rem;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
+const NotFound = () => {
+  return (
+    <Container>
+      <Title>404</Title>
+      <Message>Oops! A página que você está procurando não foi encontrada.</Message>
+      <HomeButton to="/">Voltar para Home</HomeButton>
+    </Container>
+  );
+};
+
+export default NotFound;