Added NoPage design.

01-frontend/src/App.css

@@ -36,4 +36,4 @@
 
 .read-the-docs {
   color: #888;
-}
+}

01-frontend/src/helper/ItemCard.tsx

@@ -17,7 +17,7 @@ export default function ItemCard({item}: {item: Item}) {
                         <Typography gutterBottom variant="h5" component="div">
                             {item.name}
                         </Typography>
-                        <Rating name="half-rating" defaultValue={item.rating} precision={0.5} />
+                        <Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
                         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                            {item.description}
                         </Typography>

01-frontend/src/pages/Home.tsx

@@ -1,8 +1,9 @@
-import { Pagination } from "@mui/material";
+import { Box, Pagination } from "@mui/material";
 import ItemCard from "../helper/ItemCard";
 import Item from "../components/Item";
 
 export default function Home() {
+
     const items: Item[] = [
         {
             id: "1",
@@ -28,10 +29,12 @@ export default function Home() {
 
     return (
         <div>
-            {items.map((item) => (
-                <ItemCard item={item} />
-            ))}
-            <Pagination count={10} variant="outlined" shape="rounded" />
+            <Box className="cardgrid">
+                {items.map((item) => (
+                    <ItemCard item={item} />
+                ))}
+                <Pagination count={10} variant="outlined" shape="rounded" />
+            </Box>
         </div>
     );
 }

01-frontend/src/pages/NoPage.tsx

@@ -1,8 +1,34 @@
+import { Box, Typography, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import "./pages.css";
+
 export default function NoPage() {
+    const navigate = useNavigate();
+
+    const handleGoHome = () => {
+        navigate("/");
+    };
+
     return (
-        <div>
-            <h1>404 Not Found</h1>
-            <p>The page you are looking for does not exist.</p>
-        </div>
-    )
+        <Box className="no-page-container">
+            <Typography variant="h1" className="no-page-title">
+                404
+            </Typography>
+            <Typography variant="h5" className="no-page-subtitle">
+                Oops! The page you're looking for doesn't exist.
+            </Typography>
+            <Typography variant="body1" className="no-page-description">
+                It seems you may have taken a wrong turn. Let's get you back on track.
+            </Typography>
+            <Button
+                variant="contained"
+                color="primary"
+                size="large"
+                className="no-page-button"
+                onClick={handleGoHome}
+            >
+                Go Back to Home
+            </Button>
+        </Box>
+    );
 }

01-frontend/src/pages/pages.css

@@ -0,0 +1,50 @@
+.no-page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  text-align: center;
+  background: linear-gradient(135deg, #ece9e6, #ffffff);
+  color: #333;
+  gap: 2%;
+}
+
+.no-page-title {
+  font-size: 8rem;
+  font-weight: bold;
+  color: #1976d2; /* Material-UI Primary Color */
+  margin-bottom: 16px;
+}
+
+.no-page-subtitle {
+  font-size: 1.5rem;
+  margin-bottom: 8px;
+  color: #555;
+}
+
+.no-page-description {
+  font-size: 1rem;
+  margin-bottom: 24px;
+  color: #777;
+}
+
+.no-page-button {
+  font-size: 1rem;
+  padding: 12px 24px;
+  background-color: #1976d2;
+  color: white;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+
+.no-page-button:hover {
+  background-color: #115293;
+}
+
+cardgrid {
+    display: grid;
+    gap: 2%;
+    max-width: 3%;
+  }
+