src/pages/not-found.js

import React from 'react';
import { Box, Typography, Button, Container } from '@mui/material';
import { Link } from 'wouter';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import HomeIcon from '@mui/icons-material/Home';

export default function NotFound() {
  return (
    <Container maxWidth="md">

      <Box 

        sx={{ 

          display: 'flex', 

          flexDirection: 'column', 

          alignItems: 'center', 

          justifyContent: 'center',

          minHeight: '100vh',

          textAlign: 'center',

          py: 4

        }}

      >

        <ErrorOutlineIcon sx={{ fontSize: 100, color: 'error.main', mb: 2 }} />

        

        <Typography variant="h2" component="h1" gutterBottom>

          Page Not Found

        </Typography>

        

        <Typography variant="h5" color="textSecondary" paragraph>

          The page you're looking for doesn't exist or has been moved.

        </Typography>

        

        <Button 

          component={Link} 

          to="/" 

          variant="contained" 

          color="primary" 

          startIcon={<HomeIcon />}

          sx={{ mt: 3 }}

        >

          Go to Home

        </Button>

      </Box>

    </Container>
  );
}