diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
index c2b1bf1..0a7fef7 100644
--- a/frontend/components/ProductDetail.js
+++ b/frontend/components/ProductDetail.js
@@ -1,38 +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,
-  Link,
-  Breadcrumbs
-} from '@mui/material'
-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 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 {
@@ -239,6 +239,7 @@ export default function ProductDetail({ productId, internalName }) {
           <Link color="inherit" href="/">
             Home
           </Link>
+          <Typography>Data Products</Typography>
           <Typography color="textPrimary">Product</Typography>
         </Breadcrumbs>
         <Box
@@ -260,7 +261,8 @@ export default function ProductDetail({ productId, internalName }) {
               onClick={() => {
                 router.back()
               }}
-              sx={{ cursor: 'pointer' }}
+              color="primary"
+              cursor="pointer"
             />
             <Typography variant="h6">Product</Typography>
           </Stack>
diff --git a/frontend/pages/about.js b/frontend/pages/about.js
index 74c0b1c..be81d1d 100644
--- a/frontend/pages/about.js
+++ b/frontend/pages/about.js
@@ -1,22 +1,16 @@
-import {
-  Container,
-  Grid,
-  Link,
-  Typography,
-  Box,
-  Breadcrumbs,
-  Stack
-} from '@mui/material'
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
-import { useRouter } from 'next/router'
+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()
-  const router = useRouter()
 
   return (
     <Container className={classes.root}>
@@ -28,32 +22,9 @@ export default function About() {
             </Link>
             <Typography color="textPrimary">About</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()
-                }}
-                sx={{ cursor: 'pointer' }}
-              />
-              <Typography variant="h6" sx={{ mb: 2 }}>
-                About
-              </Typography>
-            </Stack>
-          </Box>
+          <Typography variant="h6" sx={{ mb: 2 }}>
+            About
+          </Typography>
           <Card>
             <CardContent>
               <Typography variant="body1" component="span">
diff --git a/frontend/pages/contact.js b/frontend/pages/contact.js
index d23bf6e..42f9ae2 100644
--- a/frontend/pages/contact.js
+++ b/frontend/pages/contact.js
@@ -1,21 +1,15 @@
-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'
-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 router = useRouter()
   const classes = useStyles()
 
   return (
@@ -28,32 +22,9 @@ export default function Contact() {
             </Link>
             <Typography color="textPrimary">Contact</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()
-                }}
-                sx={{ cursor: 'pointer' }}
-              />
-              <Typography variant="h6" sx={{ mb: 2 }}>
-                Contact
-              </Typography>
-            </Stack>
-          </Box>
+          <Typography variant="h6" sx={{ mb: 2 }}>
+            Contact
+          </Typography>
           <Card>
             <CardContent>
               <Typography variant="body1" component="span">
diff --git a/frontend/pages/oficial_products.js b/frontend/pages/oficial_products.js
index 52acef0..2680281 100644
--- a/frontend/pages/oficial_products.js
+++ b/frontend/pages/oficial_products.js
@@ -1,20 +1,21 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Paper,
-  Stack,
-  Link,
-  Breadcrumbs
-} 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'
@@ -67,9 +68,9 @@ export default function Products() {
                 onClick={() => {
                   router.back()
                 }}
-                sx={{ cursor: 'pointer' }}
+                color="primary"
+                cursor="pointer"
               />
-              {/* TODO: Aqui deve entrar o BREADCRUMB */}
               <Typography variant="h3" className={classes.title}>
                 Rubin Observatory PZ Data Products
               </Typography>
diff --git a/frontend/pages/product/edit/[pid].js b/frontend/pages/product/edit/[pid].js
index ee151c1..f06577f 100644
--- a/frontend/pages/product/edit/[pid].js
+++ b/frontend/pages/product/edit/[pid].js
@@ -1,3 +1,5 @@
+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'
@@ -17,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'
@@ -190,6 +192,7 @@ export default function EditProduct() {
           <Link color="inherit" href="/">
             Home
           </Link>
+          <Typography>Data Products</Typography>
           <Typography color="textPrimary">Edit Product</Typography>
         </Breadcrumbs>
         <Box
@@ -211,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 d94e7f4..a6f01af 100644
--- a/frontend/pages/tutorials.js
+++ b/frontend/pages/tutorials.js
@@ -1,23 +1,17 @@
-import {
-  Container,
-  Grid,
-  Link,
-  Typography,
-  Box,
-  Stack,
-  Breadcrumbs
-} from '@mui/material'
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
-import { useRouter } from 'next/router'
+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'
 
 export default function Tutorials() {
   const classes = useStyles()
-  const router = useRouter()
 
   return (
     <Container className={classes.root}>
@@ -29,32 +23,9 @@ export default function Tutorials() {
             </Link>
             <Typography color="textPrimary">Tutorials</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()
-                }}
-                sx={{ cursor: 'pointer' }}
-              />
-              <Typography variant="h6" sx={{ mb: 2 }}>
-                Tutorials
-              </Typography>
-            </Stack>
-          </Box>
+          <Typography variant="h6" sx={{ mb: 2 }}>
+            Tutorials
+          </Typography>
           <Card>
             <CardContent>
               <Typography variant="h6">Download</Typography>
diff --git a/frontend/pages/user_products.js b/frontend/pages/user_products.js
index f462f61..cec2d18 100644
--- a/frontend/pages/user_products.js
+++ b/frontend/pages/user_products.js
@@ -1,20 +1,21 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  FormControl,
-  Paper,
-  Stack,
-  Link,
-  Breadcrumbs
-} 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'
@@ -65,9 +66,9 @@ export default function Products() {
                 onClick={() => {
                   router.back()
                 }}
-                sx={{ cursor: 'pointer' }}
+                color="primary"
+                cursor="pointer"
               />
-              {/* TODO: Aqui deve entrar o BREADCRUMB */}
               <Typography variant="h3" className={classes.title}>
                 User-generated Data Products
               </Typography>
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',
diff --git a/frontend/themes/light.js b/frontend/themes/light.js
index 69bd7e5..ce4c26d 100644
--- a/frontend/themes/light.js
+++ b/frontend/themes/light.js
@@ -6,8 +6,6 @@ const light = createTheme({
       light: '#4f5964',
       main: '#283663',
       dark: '#24292e'
-      // dark: '#283663',
-      // main: '#24292e'
     },
     secondary: {
       main: '#ffdd00'
@@ -26,11 +24,6 @@ const light = createTheme({
       secondary: 'rgba(18,48,78,0.6)',
       disabled: 'rgba(18,48,78,0.38)'
     }
-    // text: {
-    //   primary: 'rgb(52, 71, 103)',
-    //   secondary: 'rgb(52, 71, 103, 0.6)',
-    //   disabled: 'rgb(52, 71, 103, 0.38)'
-    // }
   }
 })