diff --git a/src/components/TimeToRead/index.tsx b/src/components/TimeToRead/index.tsx
new file mode 100644
index 00000000..89f1c7a9
--- /dev/null
+++ b/src/components/TimeToRead/index.tsx
@@ -0,0 +1,33 @@
+import { Text } from '@vtex/brand-ui'
+import { useIntl } from 'react-intl'
+
+import readingTime from 'styles/documentation-page'
+
+interface props {
+  minutes: string
+}
+
+const TimeToRead = ({ minutes }: props) => {
+  function shouldTimeDisplay(minutes: string): boolean {
+    return parseInt(minutes) >= 5
+  }
+
+  const intl = useIntl()
+
+  if (shouldTimeDisplay(minutes)) {
+    return (
+      <Text sx={readingTime}>
+        {intl.formatMessage(
+          {
+            id: 'documentation_reading_time.text',
+            defaultMessage: '',
+          },
+          { minutes: minutes }
+        )}
+      </Text>
+    )
+  }
+  return null
+}
+
+export default TimeToRead
diff --git a/src/components/TimeToRead/styles.ts b/src/components/TimeToRead/styles.ts
new file mode 100644
index 00000000..64fb3149
--- /dev/null
+++ b/src/components/TimeToRead/styles.ts
@@ -0,0 +1,11 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+const readingTime: SxStyleProp = {
+  color: '#A1AAB7',
+  fontSize: '16px',
+  lineHeight: '18px',
+}
+
+export default {
+  readingTime,
+}
diff --git a/src/components/breadcrumb/index.tsx b/src/components/breadcrumb/index.tsx
index e38ac127..613c0975 100644
--- a/src/components/breadcrumb/index.tsx
+++ b/src/components/breadcrumb/index.tsx
@@ -9,29 +9,20 @@ interface Props {
 const Breadcrumb = ({ breadcrumbList }: Props) => {
   return (
     <Flex sx={styles.breadcrumb}>
-      {breadcrumbList.map((item, idx) =>
-        item.type === 'category' ? (
-          <>
-            <Text>{item.name}</Text>
-            {idx < breadcrumbList.length - 1 ? (
-              <IconCaret direction="right" size={16} />
-            ) : (
-              ''
-            )}
-          </>
-        ) : (
-          <>
+      {breadcrumbList.map((item, idx) => (
+        <>
+          {item.type === 'markdown' ? (
             <Link sx={styles.breadcrumbItem} href={item.slug}>
               {item.name}
             </Link>
-            {idx < breadcrumbList.length - 1 ? (
-              <IconCaret direction="right" size={16} />
-            ) : (
-              ''
-            )}
-          </>
-        )
-      )}
+          ) : (
+            <Text>{item.name}</Text>
+          )}
+          {idx < breadcrumbList.length - 1 ? (
+            <IconCaret direction="right" size={16} />
+          ) : null}
+        </>
+      ))}
     </Flex>
   )
 }
diff --git a/src/components/documentation-section-card/styles.ts b/src/components/documentation-section-card/styles.ts
index 7e883c14..492c8ecc 100644
--- a/src/components/documentation-section-card/styles.ts
+++ b/src/components/documentation-section-card/styles.ts
@@ -94,7 +94,7 @@ const quickStartedContainer: SxStyleProp = {
     transition: 'all 0.3s ease-out',
 
     '.learnMoreText': {
-      color: '#000711',
+      color: '#c81e51',
       transition: 'all 0.3s ease-out',
     },
   },
@@ -104,7 +104,8 @@ const learnMoreText: SxStyleProp = {
   fontSize: '16px',
   lineHeight: '22px',
   fontWeight: '400',
-  color: 'muted.0',
+  color: '#e31c58',
+  textDecoration: 'underline solid 1px',
 }
 
 const accessPortal: SxStyleProp = {
diff --git a/src/components/support-section-card/styles.ts b/src/components/support-section-card/styles.ts
index 3ea589ef..4457b0a7 100644
--- a/src/components/support-section-card/styles.ts
+++ b/src/components/support-section-card/styles.ts
@@ -96,7 +96,8 @@ const learnMoreText: SxStyleProp = {
   fontSize: '16px',
   lineHeight: '22px',
   fontWeight: '400',
-  color: 'muted.0',
+  color: '#e31c58',
+  textDecoration: 'underline solid 1px',
 }
 
 const accessPortal: SxStyleProp = {
diff --git a/src/components/tag/styles.ts b/src/components/tag/styles.ts
index c53dda2c..4fec9751 100644
--- a/src/components/tag/styles.ts
+++ b/src/components/tag/styles.ts
@@ -21,8 +21,8 @@ const statusColors: {
     | 'Gray']: SxStyleProp
 } = {
   Backlog: {
-    border: '1px solid #979797',
-    color: '#979797',
+    border: '1px solid #D3D3D3',
+    color: '#4A596B',
     background: '#E9E9E9',
   },
   Fixed: {
@@ -31,18 +31,18 @@ const statusColors: {
     background: '#DFF5DB',
   },
   Closed: {
-    border: '1px solid #2953B2',
+    border: '1px solid #A5C0FF',
     color: '#2953B2',
     background: '#DEE8FE',
   },
   Scheduled: {
-    border: '1px solid #FAB42B',
-    color: '#FAB42B',
+    border: '1px solid #FFD581',
+    color: '#D77809',
     background: '#FFF3DA',
   },
   'No fix': {
-    border: '1px solid #F83D24',
-    color: '#F83D24',
+    border: '1px solid #FAA397',
+    color: '#CB2610',
     background: '#FFDFDB',
   },
   Default: {
diff --git a/src/components/tutorial-markdown-render/index.tsx b/src/components/tutorial-markdown-render/index.tsx
index 1cf13526..3ad4903c 100644
--- a/src/components/tutorial-markdown-render/index.tsx
+++ b/src/components/tutorial-markdown-render/index.tsx
@@ -16,6 +16,7 @@ import ArticlePagination from 'components/article-pagination'
 import Contributors from 'components/contributors'
 import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { ContributorsType } from 'utils/getFileContributors'
+import TimeToRead from 'components/TimeToRead'
 
 interface Props {
   content: string
@@ -92,17 +93,11 @@ const TutorialMarkdownRender = (props: Props) => {
                     {props.serialized.frontmatter?.excerpt}
                   </Text>
                 </header>
-                <Text sx={styles.readingTime}>
-                  {intl.formatMessage(
-                    {
-                      id: 'documentation_reading_time.text',
-                      defaultMessage: '',
-                    },
-                    {
-                      minutes: props.serialized.frontmatter?.readingTime,
-                    }
-                  )}
-                </Text>
+                {props.serialized.frontmatter?.readingTime && (
+                  <TimeToRead
+                    minutes={props.serialized.frontmatter.readingTime}
+                  />
+                )}
                 <MarkdownRenderer serialized={props.serialized} />
               </article>
             </Box>
diff --git a/src/pages/docs/tracks/[slug].tsx b/src/pages/docs/tracks/[slug].tsx
index 03a16fcd..5fa31300 100644
--- a/src/pages/docs/tracks/[slug].tsx
+++ b/src/pages/docs/tracks/[slug].tsx
@@ -45,9 +45,11 @@ import {
 } from 'utils/navigation-utils'
 import { MarkdownRenderer } from '@vtexdocs/components'
 // import { ParsedUrlQuery } from 'querystring'
-import { useIntl } from 'react-intl'
+
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
+
 import theme from 'styles/code-hike-theme'
+import TimeToRead from 'components/TimeToRead'
 
 const docsPathsGLOBAL = await getTracksPaths('tracks')
 
@@ -96,7 +98,6 @@ const TrackPage: NextPage<Props> = ({
 }) => {
   const [headings, setHeadings] = useState<Item[]>([])
   const { setBranchPreview } = useContext(PreviewContext)
-  const intl = useIntl()
   setBranchPreview(branch)
   const { setActiveSidebarElement } = useContext(LibraryContext)
   const articleRef = useRef<HTMLElement>(null)
@@ -132,15 +133,11 @@ const TrackPage: NextPage<Props> = ({
                     <Text sx={styles.documentationTitle} className="title">
                       {serialized.frontmatter?.title}
                     </Text>
-                    <Text sx={styles.readingTime}>
-                      {intl.formatMessage(
-                        {
-                          id: 'documentation_reading_time.text',
-                          defaultMessage: '',
-                        },
-                        { minutes: serialized.frontmatter?.readingTime }
-                      )}
-                    </Text>
+                    {serialized.frontmatter?.readingTime && (
+                      <TimeToRead
+                        minutes={serialized.frontmatter.readingTime}
+                      />
+                    )}
                   </Flex>
                 </header>
                 <MarkdownRenderer serialized={serialized} />
diff --git a/src/pages/faq/[slug].tsx b/src/pages/faq/[slug].tsx
index 23b911f1..0ad8af07 100644
--- a/src/pages/faq/[slug].tsx
+++ b/src/pages/faq/[slug].tsx
@@ -21,6 +21,7 @@ import Contributors from 'components/contributors'
 import OnThisPage from 'components/on-this-page'
 import { Item, TableOfContents } from '@vtexdocs/components'
 import Breadcrumb from 'components/breadcrumb'
+import TimeToRead from 'components/TimeToRead'
 
 import getHeadings from 'utils/getHeadings'
 import getNavigation from 'utils/getNavigation'
@@ -36,7 +37,6 @@ import { getLogger } from 'utils/logging/log-util'
 import { localeType } from 'utils/navigation-utils'
 import { MarkdownRenderer } from '@vtexdocs/components'
 // import { ParsedUrlQuery } from 'querystring'
-import { useIntl } from 'react-intl'
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
 import { getDocsPaths as getFaqPaths } from 'utils/getDocsPaths'
 import { getMessages } from 'utils/get-messages'
@@ -66,7 +66,6 @@ const FaqPage: NextPage<Props> = ({
 }) => {
   const [headings, setHeadings] = useState<Item[]>([])
   const { setBranchPreview } = useContext(PreviewContext)
-  const intl = useIntl()
   setBranchPreview(branch)
   const articleRef = useRef<HTMLElement>(null)
 
@@ -108,15 +107,11 @@ const FaqPage: NextPage<Props> = ({
                     <Text sx={styles.documentationTitle} className="title">
                       {serialized.frontmatter?.title}
                     </Text>
-                    <Text sx={styles.readingTime}>
-                      {intl.formatMessage(
-                        {
-                          id: 'documentation_reading_time.text',
-                          defaultMessage: '',
-                        },
-                        { minutes: serialized.frontmatter?.readingTime }
-                      )}
-                    </Text>
+                    {serialized.frontmatter?.readingTime && (
+                      <TimeToRead
+                        minutes={serialized.frontmatter.readingTime}
+                      />
+                    )}
                     {createdAtDate && updatedAtDate && (
                       <DateText
                         createdAt={createdAtDate}
diff --git a/src/pages/faq/index.tsx b/src/pages/faq/index.tsx
index 408fad87..9e5e628c 100644
--- a/src/pages/faq/index.tsx
+++ b/src/pages/faq/index.tsx
@@ -30,8 +30,6 @@ interface Props {
   totalPages: number
 }
 
-const docsPathsGLOBAL = await getFaqPaths('faq')
-
 const FaqPage: NextPage<Props> = ({ faqData, branch }) => {
   const intl = useIntl()
   const { setBranchPreview } = useContext(PreviewContext)
@@ -147,6 +145,7 @@ export const getStaticProps: GetStaticProps = async ({
       ? JSON.parse(JSON.stringify(previewData)).branch
       : 'main'
   const branch = preview ? previewBranch : 'main'
+  const docsPathsGLOBAL = await getFaqPaths('faq', branch)
   const logger = getLogger('FAQ')
   const currentLocale: localeType = locale
     ? (locale as localeType)
diff --git a/src/pages/known-issues/[slug].tsx b/src/pages/known-issues/[slug].tsx
index 066fec6e..e87d3e3b 100644
--- a/src/pages/known-issues/[slug].tsx
+++ b/src/pages/known-issues/[slug].tsx
@@ -21,6 +21,7 @@ import Contributors from 'components/contributors'
 import OnThisPage from 'components/on-this-page'
 import { Item, TableOfContents } from '@vtexdocs/components'
 import Breadcrumb from 'components/breadcrumb'
+import TimeToRead from 'components/TimeToRead'
 
 import getHeadings from 'utils/getHeadings'
 import getNavigation from 'utils/getNavigation'
@@ -36,7 +37,7 @@ import { getLogger } from 'utils/logging/log-util'
 import { localeType } from 'utils/navigation-utils'
 import { MarkdownRenderer } from '@vtexdocs/components'
 // import { ParsedUrlQuery } from 'querystring'
-import { useIntl } from 'react-intl'
+
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
 import { getDocsPaths as getKnownIssuesPaths } from 'utils/getDocsPaths'
 import { getMessages } from 'utils/get-messages'
@@ -67,7 +68,7 @@ const KnownIssuePage: NextPage<Props> = ({
 }) => {
   const [headings, setHeadings] = useState<Item[]>([])
   const { setBranchPreview } = useContext(PreviewContext)
-  const intl = useIntl()
+
   setBranchPreview(branch)
   const articleRef = useRef<HTMLElement>(null)
 
@@ -109,15 +110,11 @@ const KnownIssuePage: NextPage<Props> = ({
                     <Text sx={styles.documentationTitle} className="title">
                       {serialized.frontmatter?.title}
                     </Text>
-                    <Text sx={styles.readingTime}>
-                      {intl.formatMessage(
-                        {
-                          id: 'documentation_reading_time.text',
-                          defaultMessage: '',
-                        },
-                        { minutes: serialized.frontmatter?.readingTime }
-                      )}
-                    </Text>
+                    {serialized.frontmatter?.readingTime && (
+                      <TimeToRead
+                        minutes={serialized.frontmatter.readingTime}
+                      />
+                    )}
                   </Flex>
                   <Box sx={styles.divider}></Box>
                   <Flex sx={styles.detailedInfo}>
diff --git a/src/pages/known-issues/index.tsx b/src/pages/known-issues/index.tsx
index 2f474826..2a7f47c9 100644
--- a/src/pages/known-issues/index.tsx
+++ b/src/pages/known-issues/index.tsx
@@ -38,8 +38,6 @@ interface Props {
   totalPages: number
 }
 
-const docsPathsGLOBAL = await getKnownIssuesPaths('known-issues')
-
 const KnownIssuesPage: NextPage<Props> = ({ knownIssuesData, branch }) => {
   const intl = useIntl()
   const { setBranchPreview } = useContext(PreviewContext)
@@ -169,6 +167,7 @@ export const getStaticProps: GetStaticProps = async ({
       ? JSON.parse(JSON.stringify(previewData)).branch
       : 'main'
   const branch = preview ? previewBranch : 'main'
+  const docsPathsGLOBAL = await getKnownIssuesPaths('known-issues')
   const logger = getLogger('Known Issues')
   const currentLocale: localeType = locale
     ? (locale as localeType)
diff --git a/src/styles/documentation-page.ts b/src/styles/documentation-page.ts
index 4ea3b2b0..a43a5177 100644
--- a/src/styles/documentation-page.ts
+++ b/src/styles/documentation-page.ts
@@ -52,7 +52,7 @@ const articleBox: SxStyleProp = {
   },
   strong: {
     fontWeight: '600',
-    overflowWrap: 'anywhere',
+    overflowWrap: 'break-word',
   },
   hr: {
     border: '0.5px solid #E7E9EE',
@@ -114,12 +114,6 @@ const divider: SxStyleProp = {
   borderBottom: '1px solid #E7E9EE',
 }
 
-const readingTime: SxStyleProp = {
-  color: '#A1AAB7',
-  fontSize: '16px',
-  lineHeight: '18px',
-}
-
 const flexContainer: SxStyleProp = {
   flexWrap: 'wrap',
   flexDirection: 'column',
@@ -183,7 +177,6 @@ export default {
   documentationExcerpt,
   innerContainer,
   divider,
-  readingTime,
   flexContainer,
   detailedInfo,
   id,
diff --git a/src/styles/global.css b/src/styles/global.css
index db324760..c47ccb4c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,6 +3,9 @@ body,
 * {
   font-family: 'VTEX Trust Regular', -apple-system, system-ui,
     BlinkMacSystemFont, sans-serif !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; 
+    text-rendering: optimizeLegibility;
 }
 
 body.modal-open {
@@ -13,7 +16,7 @@ body.modal-open {
 
 a {
   color: #e31c58;
-  text-decoration: none !important;
+  text-decoration: none;
 }
 
 a:hover {
@@ -69,6 +72,7 @@ table th {
   font-size: 0.875em;
   border: 1px solid #e7e9ef;
   padding: 0.5em;
+  min-width: 60px;
 }
 
 table tbody tr:nth-of-type(even) {