diff --git a/server/app.js b/server/app.js
index 300af9e..6d5b62e 100644
--- a/server/app.js
+++ b/server/app.js
@@ -136,9 +136,11 @@ app.use('/', authRouter);
 app.use('/', clowderRouter);
 app.use('/api/rctdb', rctdbRouter);
 
-app.use('/home',express.static('../dist'));
-app.use('/public',express.static('../dist/public'));
-app.use('/public', express.static('public'));
+// Serve built assets from root so relative-path bundle references work on any page
+app.use(express.static(path.join(__dirname, '../dist')));
+app.use('/home',express.static(path.join(__dirname, '../dist')));
+app.use('/public',express.static(path.join(__dirname, '../dist/public')));
+app.use('/public', express.static(path.join(__dirname, 'public')));
 
 
 app.get('/client',ensureLoggedIn, function (req, res, next){
@@ -159,7 +161,25 @@ app.get('/home', ensureLoggedIn, function (req, res, next){
 	res.sendFile(path.join(__dirname, '../dist', 'index.html'));
 });
 
-// catch 404 and forward to error handler
+app.get('/preview', ensureLoggedIn, function (req, res, next){
+	res.sendFile(path.join(__dirname, '../dist', 'index.html'));
+});
+
+// SPA fallback: serve React app for any unmatched non-API, non-asset route so
+// that client-side routes (React Router) work on direct navigation / refresh.
+// Requests with a file extension (JS, CSS, images, etc.) are NOT intercepted —
+// those should 404 rather than receiving index.html (which causes "Unexpected token '<'").
+app.use(function(req, res, next) {
+  if (req.path.startsWith('/api/')) {
+    return next(createError(404));
+  }
+  if (path.extname(req.path)) {
+    return next(createError(404));
+  }
+  res.sendFile(path.join(__dirname, '../dist', 'index.html'));
+});
+
+// catch 404 and forward to error handler (API routes only reach here)
 app.use(function(req, res, next) {
   next(createError(404));
 });
diff --git a/src/components/previewers/Pdf.js b/src/components/previewers/Pdf.js
index be3b372..4b43eae 100644
--- a/src/components/previewers/Pdf.js
+++ b/src/components/previewers/Pdf.js
@@ -509,7 +509,7 @@ export default function Pdf(props) {
 				{/* Relative positioning container for PDF and overlay canvas with scrollable content */}
 				<div style={{ 
 					position: 'relative', 
-					width: `${(pageWidth * pdf_render_scale) + (3 * marginWidth)}px`, 
+					width: `${(pageWidth * pdf_render_scale) + (3 * marginWidth)}px`,
 					maxHeight: '80vh', // Limit height to 80% of viewport height
 					overflowY: 'scroll', // Add vertical scrollbar when content exceeds maxHeight
 					border: '1px solid #ccc' // Optional: add border to visualize the scrollable area
diff --git a/src/routes.tsx b/src/routes.tsx
index 643c11b..c1654a9 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,10 +1,45 @@
-import {BrowserRouter, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Route, Routes, useNavigate} from "react-router-dom";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import HomeIcon from "@mui/icons-material/Home";
 
 import Dashboard from "./components/Dashboard";
 import Preview from "./components/Preview";
 import Faq from "./components/Faq";
 // import CreateAndUpload from "./components/childComponents/CreateAndUpload";
 
+function NotFound(): JSX.Element {
+	const navigate = useNavigate();
+	return (
+		<Box
+			display="flex"
+			flexDirection="column"
+			alignItems="center"
+			justifyContent="center"
+			minHeight="100vh"
+			gap={3}
+		>
+			<Typography variant="h3" fontWeight="bold" color="text.primary">
+				404
+			</Typography>
+			<Typography variant="h6" color="text.secondary">
+				Page not found
+			</Typography>
+			<Typography variant="body2" color="text.secondary">
+				The page you&apos;re looking for doesn&apos;t exist or has been moved.
+			</Typography>
+			<Button
+				variant="contained"
+				startIcon={<HomeIcon />}
+				onClick={() => navigate("/home/")}
+				size="large"
+			>
+				Go to Home
+			</Button>
+		</Box>
+	);
+}
 
 export const AppRoutes = (): JSX.Element => {
 	return (
@@ -14,13 +49,7 @@ export const AppRoutes = (): JSX.Element => {
 				{/* <Route path="/create/" element={<CreateAndUpload/>}/> */}
 				<Route path="/preview" element={<Preview/>} />
 				<Route path="/faq" element={<Faq/>} />
-				<Route path="*"
-					   element={
-						   <main style={{padding: "1rem"}}>
-							   <p>Page Not Found!</p>
-						   </main>
-					   }
-				/>
+				<Route path="*" element={<NotFound />} />
 			</Routes>
 		</BrowserRouter>
 	);