diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index 8592924..c2b1bf1 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -18,7 +18,9 @@ import {
   Stack,
   Tab,
   Tabs,
-  Typography
+  Typography,
+  Link,
+  Breadcrumbs
 } from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import Alert from '@mui/material/Alert'
@@ -233,6 +235,12 @@ export default function ProductDetail({ productId, internalName }) {
             Link copied successfully!
           </Alert>
         </Snackbar>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" href="/">
+            Home
+          </Link>
+          <Typography color="textPrimary">Product</Typography>
+        </Breadcrumbs>
         <Box
           sx={{
             mt: 1,
diff --git a/frontend/pages/about.js b/frontend/pages/about.js
index bd004d1..74c0b1c 100644
--- a/frontend/pages/about.js
+++ b/frontend/pages/about.js
@@ -1,4 +1,12 @@
-import { Container, Grid, Link, Typography, Box, Stack } from '@mui/material'
+import {
+  Container,
+  Grid,
+  Link,
+  Typography,
+  Box,
+  Breadcrumbs,
+  Stack
+} from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { useRouter } from 'next/router'
 import Card from '@mui/material/Card'
@@ -14,6 +22,12 @@ export default function About() {
     <Container className={classes.root}>
       <Grid container spacing={8}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">About</Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,
diff --git a/frontend/pages/contact.js b/frontend/pages/contact.js
index 9fe2394..d23bf6e 100644
--- a/frontend/pages/contact.js
+++ b/frontend/pages/contact.js
@@ -1,4 +1,12 @@
-import { Container, Grid, Typography, Link, Box, Stack } from '@mui/material'
+import {
+  Container,
+  Grid,
+  Typography,
+  Link,
+  Box,
+  Stack,
+  Breadcrumbs
+} from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { useRouter } from 'next/router'
 import useStyles from '../styles/pages/contact'
@@ -14,6 +22,12 @@ export default function Contact() {
     <Container className={classes.root}>
       <Grid container spacing={2}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">Contact</Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,
diff --git a/frontend/pages/oficial_products.js b/frontend/pages/oficial_products.js
index 0535b29..52acef0 100644
--- a/frontend/pages/oficial_products.js
+++ b/frontend/pages/oficial_products.js
@@ -1,4 +1,13 @@
-import { Box, Button, Card, CardContent, Paper, Stack } from '@mui/material'
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Paper,
+  Stack,
+  Link,
+  Breadcrumbs
+} from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
@@ -31,6 +40,14 @@ export default function Products() {
     <Paper className={classes.root} elevation={3}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">
+              Rubin Observatory PZ Data Products
+            </Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,
diff --git a/frontend/pages/tutorials.js b/frontend/pages/tutorials.js
index 9d153dc..d94e7f4 100644
--- a/frontend/pages/tutorials.js
+++ b/frontend/pages/tutorials.js
@@ -1,4 +1,12 @@
-import { Container, Grid, Link, Typography, Box, Stack } from '@mui/material'
+import {
+  Container,
+  Grid,
+  Link,
+  Typography,
+  Box,
+  Stack,
+  Breadcrumbs
+} from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { useRouter } from 'next/router'
 import Card from '@mui/material/Card'
@@ -15,6 +23,12 @@ export default function Tutorials() {
     <Container className={classes.root}>
       <Grid container spacing={8}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">Tutorials</Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,
diff --git a/frontend/pages/user_products.js b/frontend/pages/user_products.js
index 3de8993..f462f61 100644
--- a/frontend/pages/user_products.js
+++ b/frontend/pages/user_products.js
@@ -5,7 +5,9 @@ import {
   CardContent,
   FormControl,
   Paper,
-  Stack
+  Stack,
+  Link,
+  Breadcrumbs
 } from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import Grid from '@mui/material/Grid'
@@ -36,6 +38,14 @@ export default function Products() {
     <Paper className={classes.root}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">
+              User-generated Data Products
+            </Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,