diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index cef95d4..0a7fef7 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -1,35 +1,38 @@
+import React from 'react'
+
 import ShareIcon from '@mui/icons-material/Share'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import VerifiedIcon from '@mui/icons-material/Verified'
+import EditIcon from '@mui/icons-material/Edit'
+
 import LoadingButton from '@mui/lab/LoadingButton'
-import {
-  Box,
-  Card,
-  CardContent,
-  CardMedia,
-  Chip,
-  Divider,
-  Grid,
-  IconButton,
-  List,
-  ListItem,
-  ListItemText,
-  Paper,
-  Snackbar,
-  Stack,
-  Tab,
-  Tabs,
-  Typography
-} from '@mui/material'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Chip from '@mui/material/Chip'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Paper from '@mui/material/Paper'
+import Snackbar from '@mui/material/Snackbar'
+import Stack from '@mui/material/Stack'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
 import Alert from '@mui/material/Alert'
-import ProductShare from './ProductShare'
 
-import EditIcon from '@mui/icons-material/Edit'
 import moment from 'moment'
 import { useRouter } from 'next/router'
 import prettyBytes from 'pretty-bytes'
 import PropTypes from 'prop-types'
-import React from 'react'
 import Loading from '../components/Loading'
+import ProductShare from './ProductShare'
 import ProductDataGrid from '../components/ProductDataGrid'
 import ProductNotFound from '../components/ProductNotFound'
 import {
@@ -232,7 +235,38 @@ export default function ProductDetail({ productId, internalName }) {
             Link copied successfully!
           </Alert>
         </Snackbar>
-        <Typography variant="h6">Product</Typography>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" href="/">
+            Home
+          </Link>
+          <Typography>Data Products</Typography>
+          <Typography color="textPrimary">Product</Typography>
+        </Breadcrumbs>
+        <Box
+          sx={{
+            mt: 1,
+            mb: 1,
+            p: 1
+          }}
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Stack
+            direction="row"
+            justifyContent="flex-start"
+            alignItems="center"
+            spacing={2}
+          >
+            <ArrowBackIosIcon
+              onClick={() => {
+                router.back()
+              }}
+              color="primary"
+              cursor="pointer"
+            />
+            <Typography variant="h6">Product</Typography>
+          </Stack>
+        </Box>
       </Box>
       <Box component="form" noValidate autoComplete="off">
         <Grid
diff --git a/frontend/pages/about.js b/frontend/pages/about.js
index cbca95f..be81d1d 100644
--- a/frontend/pages/about.js
+++ b/frontend/pages/about.js
@@ -1,14 +1,27 @@
-import { Container, Grid, Link, Typography } from '@mui/material'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Typography from '@mui/material/Typography'
+import Container from '@mui/material/Container'
+import Link from '@mui/material/Link'
+import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
+
 import { parseCookies } from 'nookies'
 import useStyles from '../styles/pages/about'
+
 export default function About() {
   const classes = useStyles()
+
   return (
     <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>
           <Typography variant="h6" sx={{ mb: 2 }}>
             About
           </Typography>
diff --git a/frontend/pages/contact.js b/frontend/pages/contact.js
index 929b45b..42f9ae2 100644
--- a/frontend/pages/contact.js
+++ b/frontend/pages/contact.js
@@ -1,14 +1,27 @@
-import { Container, Grid, Typography, Link } from '@mui/material'
-import useStyles from '../styles/pages/contact'
-import { parseCookies } from 'nookies'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Typography from '@mui/material/Typography'
+import Container from '@mui/material/Container'
+import Link from '@mui/material/Link'
+import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
+
+import { parseCookies } from 'nookies'
+import useStyles from '../styles/pages/contact'
+
 export default function Contact() {
   const classes = useStyles()
+
   return (
     <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>
           <Typography variant="h6" sx={{ mb: 2 }}>
             Contact
           </Typography>
diff --git a/frontend/pages/oficial_products.js b/frontend/pages/oficial_products.js
index 6a0e0e3..2680281 100644
--- a/frontend/pages/oficial_products.js
+++ b/frontend/pages/oficial_products.js
@@ -1,10 +1,21 @@
-import { Box, Button, Card, CardContent, Paper } from '@mui/material'
+import * as React from 'react'
+
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
+import Link from '@mui/material/Link'
+import Stack from '@mui/material/Stack'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
 import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
+
 import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies'
-import * as React from 'react'
 import ProductGrid from '../components/ProductGrid'
 import ProductTypeSelect from '../components/ProductTypeSelect'
 import ReleaseSelect from '../components/ReleaseSelect'
@@ -30,10 +41,41 @@ export default function Products() {
     <Paper className={classes.root} elevation={3}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
-          {/* TODO: Aqui deve entrar o BREADCRUMB */}
-          <Typography variant="h3" className={classes.title}>
-            Rubin Observatory PZ Data Products
-          </Typography>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">
+              Rubin Observatory PZ Data Products
+            </Typography>
+          </Breadcrumbs>
+          <Box
+            sx={{
+              mt: 1,
+              mb: 1,
+              p: 1
+            }}
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Stack
+              direction="row"
+              justifyContent="flex-start"
+              alignItems="center"
+              spacing={2}
+            >
+              <ArrowBackIosIcon
+                onClick={() => {
+                  router.back()
+                }}
+                color="primary"
+                cursor="pointer"
+              />
+              <Typography variant="h3" className={classes.title}>
+                Rubin Observatory PZ Data Products
+              </Typography>
+            </Stack>
+          </Box>
         </Grid>
         <Grid item xs={4}>
           {/* TODO: Aqui deve entrar botões de ações da pagina */}
diff --git a/frontend/pages/product/edit/[pid].js b/frontend/pages/product/edit/[pid].js
index 0659575..f06577f 100644
--- a/frontend/pages/product/edit/[pid].js
+++ b/frontend/pages/product/edit/[pid].js
@@ -1,8 +1,11 @@
+import React, { useState } from 'react'
+
 import UploadIcon from '@mui/icons-material/Upload'
 import VerifiedIcon from '@mui/icons-material/Verified'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 
 import Alert from '@mui/material/Alert'
+import { Breadcrumbs, Link } from '@mui/material'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Card from '@mui/material/Card'
@@ -16,10 +19,10 @@ import Snackbar from '@mui/material/Snackbar'
 import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
+
 import moment from 'moment'
 import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies'
-import React, { useState } from 'react'
 import FileUploader from '../../../components/FileUploader'
 import LinearProgressWithLabel from '../../../components/LinearProgressWithLabel'
 import Loading from '../../../components/Loading'
@@ -185,6 +188,13 @@ export default function EditProduct() {
     <Container sx={{ flex: 1, m: 4 }}>
       {isLoading && <Loading isLoading={isLoading} />}
       <React.Fragment>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" href="/">
+            Home
+          </Link>
+          <Typography>Data Products</Typography>
+          <Typography color="textPrimary">Edit Product</Typography>
+        </Breadcrumbs>
         <Box
           sx={{
             mt: 2,
@@ -204,7 +214,8 @@ export default function EditProduct() {
               onClick={() => {
                 router.back()
               }}
-              sx={{ cursor: 'pointer' }}
+              color="primary"
+              cursor="pointer"
             />
             <Typography variant="h6">Edit Product</Typography>
           </Stack>
diff --git a/frontend/pages/tutorials.js b/frontend/pages/tutorials.js
index 3fcbe4d..a6f01af 100644
--- a/frontend/pages/tutorials.js
+++ b/frontend/pages/tutorials.js
@@ -1,17 +1,28 @@
-import { Container, Grid, Link, Typography } from '@mui/material'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Typography from '@mui/material/Typography'
+import Container from '@mui/material/Container'
+import Link from '@mui/material/Link'
+import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Divider from '@mui/material/Divider'
+
 import { parseCookies } from 'nookies'
 import useStyles from '../styles/pages/tutorials'
-// import ReactPrismjs from '@uiw/react-prismjs'
-// import 'prismjs/components/prism-bash'
+
 export default function Tutorials() {
   const classes = useStyles()
+
   return (
     <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>
           <Typography variant="h6" sx={{ mb: 2 }}>
             Tutorials
           </Typography>
diff --git a/frontend/pages/user_products.js b/frontend/pages/user_products.js
index 3d3dcd9..cec2d18 100644
--- a/frontend/pages/user_products.js
+++ b/frontend/pages/user_products.js
@@ -1,16 +1,21 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  FormControl,
-  Paper
-} from '@mui/material'
+import * as React from 'react'
+
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
+import Link from '@mui/material/Link'
+import Stack from '@mui/material/Stack'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
+
 import { useRouter } from 'next/router'
 import { parseCookies } from 'nookies'
-import * as React from 'react'
 import ProductGrid from '../components/ProductGrid'
 import ProductTypeSelect from '../components/ProductTypeSelect'
 import ReleaseSelect from '../components/ReleaseSelect'
@@ -34,10 +39,41 @@ export default function Products() {
     <Paper className={classes.root}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
-          {/* TODO: Aqui deve entrar o BREADCRUMB */}
-          <Typography variant="h3" className={classes.title}>
-            User-generated Data Products
-          </Typography>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">
+              User-generated Data Products
+            </Typography>
+          </Breadcrumbs>
+          <Box
+            sx={{
+              mt: 1,
+              mb: 1,
+              p: 1
+            }}
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Stack
+              direction="row"
+              justifyContent="flex-start"
+              alignItems="center"
+              spacing={2}
+            >
+              <ArrowBackIosIcon
+                onClick={() => {
+                  router.back()
+                }}
+                color="primary"
+                cursor="pointer"
+              />
+              <Typography variant="h3" className={classes.title}>
+                User-generated Data Products
+              </Typography>
+            </Stack>
+          </Box>
         </Grid>
         <Grid item xs={4}>
           {/* TODO: Aqui deve entrar botões de ações da pagina */}
diff --git a/frontend/styles/pages/products.js b/frontend/styles/pages/products.js
index 513f915..7c10305 100644
--- a/frontend/styles/pages/products.js
+++ b/frontend/styles/pages/products.js
@@ -6,7 +6,6 @@ const useStyles = makeStyles(theme => ({
     borderRadius: '4px',
     padding: theme.spacing(3),
     flex: '1 1 0%',
-    // background: 'rgb(247, 249, 252)'
   },
   gridTitle: {
     display: 'flex',
@@ -25,8 +24,6 @@ const useStyles = makeStyles(theme => ({
     marginBottom: theme.spacing(3),
     marginLeft: theme.spacing(2),
     width: '100%'
-    // marginRight: `calc(${theme.spacing(2)} * -1})`
-
   },
   gridContent: {
     display: 'flex',