diff --git a/public/images/faq.png b/public/images/faq.png
new file mode 100644
index 00000000..397af491
Binary files /dev/null and b/public/images/faq.png differ
diff --git a/src/components/breadcrumb/styles.ts b/src/components/breadcrumb/styles.ts
index 95c755c7..58b9deed 100644
--- a/src/components/breadcrumb/styles.ts
+++ b/src/components/breadcrumb/styles.ts
@@ -5,6 +5,7 @@ const breadcrumb: SxStyleProp = {
   color: '#6b7785',
   mb: '24px',
   lineHeight: '18px',
+  flexWrap: 'wrap',
 }
 
 const breadcrumbItem: SxStyleProp = {
diff --git a/src/components/faq-card/index.tsx b/src/components/faq-card/index.tsx
new file mode 100644
index 00000000..22339f28
--- /dev/null
+++ b/src/components/faq-card/index.tsx
@@ -0,0 +1,34 @@
+import { Box, Text, Link } from '@vtex/brand-ui'
+
+import type { FaqCardDataElement } from 'utils/typings/types'
+
+import styles from './styles'
+import Tag from 'components/tag'
+import DateText from 'components/date-text'
+
+const FaqCard = ({
+  title,
+  productTeam,
+  slug,
+  createdAt,
+  updatedAt,
+}: FaqCardDataElement) => {
+  const createdAtDate = new Date(createdAt)
+  const updatedAtDate = new Date(updatedAt)
+
+  return (
+    <Link href={`faq/${slug}`}>
+      <Box sx={styles.container}>
+        <Tag color={'Gray'} sx={styles.tag}>
+          {productTeam}
+        </Tag>
+        <Text sx={styles.title} className="title">
+          {title}
+        </Text>
+        <DateText createdAt={createdAtDate} updatedAt={updatedAtDate} />
+      </Box>
+    </Link>
+  )
+}
+
+export default FaqCard
diff --git a/src/components/faq-card/styles.ts b/src/components/faq-card/styles.ts
new file mode 100644
index 00000000..5cbcdc76
--- /dev/null
+++ b/src/components/faq-card/styles.ts
@@ -0,0 +1,43 @@
+import type { SxStyleProp } from '@vtex/brand-ui'
+
+const container: SxStyleProp = {
+  px: ['32px', '32px', '36px', '64px'],
+  py: '24px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  borderRadius: '4px',
+  border: '1px solid #E7E9EE',
+  width: ['320px', '544px', '720px'],
+  transition: 'all 0.3s ease-out',
+  ':hover': {
+    cursor: 'pointer',
+  },
+  ':active, :hover': {
+    boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.1)',
+    transition: 'all 0.3 ease-out',
+
+    '.title, .module': {
+      transition: 'all 0.3s ease-out',
+      color: '#000711',
+    },
+  },
+}
+
+const title: SxStyleProp = {
+  fontSize: ['14px', '20px'],
+  fontWeight: '400',
+  lineHeight: ['22px', '30px'],
+  color: 'muted.0',
+}
+
+const tag: SxStyleProp = {
+  width: 'max-content',
+  px: '8px',
+}
+
+export default {
+  container,
+  title,
+  tag,
+}
diff --git a/src/components/filter/index.tsx b/src/components/filter/index.tsx
index bef95dd3..08078918 100644
--- a/src/components/filter/index.tsx
+++ b/src/components/filter/index.tsx
@@ -13,8 +13,8 @@ interface Filter {
 }
 
 interface Props {
-  tagFilter: Filter
-  checkBoxFilter: Filter
+  tagFilter?: Filter
+  checkBoxFilter?: Filter
   onApply: (filters: { tag: string[]; checklist: string[] }) => void
 }
 
@@ -69,7 +69,7 @@ const Filter = ({ tagFilter, checkBoxFilter, onApply }: Props) => {
           setIsModalOpen(true)
         }}
       >
-        <FilterIcon />
+        <FilterIcon size={16} />
         <Text>{intl.formatMessage({ id: 'filter_modal.title' })}</Text>
         {numberOfFilters > 0 && (
           <Text sx={styles.numberOfFilters}>{numberOfFilters}</Text>
@@ -78,6 +78,56 @@ const Filter = ({ tagFilter, checkBoxFilter, onApply }: Props) => {
     )
   }
 
+  const TagFilter = () => {
+    if (!tagFilter) return <></>
+    return (
+      <Box sx={styles.filterContainer}>
+        <Text sx={styles.filterTitle}>{tagFilter.name}</Text>
+        <Flex sx={styles.tagContainer}>
+          {tagFilter.options.map((option, index) => (
+            <Tag
+              sx={styles.tag}
+              key={index}
+              color={
+                isFilterSelected(option.id, 'tag') ? 'Selected' : 'Default'
+              }
+              onClick={() => handleFilterClick(option.id, 'tag')}
+            >
+              {option.name}
+            </Tag>
+          ))}
+        </Flex>
+      </Box>
+    )
+  }
+
+  const CheckboxFilter = () => {
+    if (!checkBoxFilter) return <></>
+    return (
+      <Box sx={styles.filterContainer}>
+        <Text sx={styles.filterTitle}>{checkBoxFilter.name}</Text>
+        <Box sx={styles.checkBoxContainer}>
+          {checkBoxFilter.options.map((option, index) => (
+            <Checkbox
+              key={index}
+              label={option.name}
+              checked={isFilterSelected(option.id, 'checklist')}
+              onClick={() => handleFilterClick(option.id, 'checklist')}
+            />
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+
+  const Divider = () => {
+    return (
+      <Box sx={styles.sectionDivider}>
+        <hr />
+      </Box>
+    )
+  }
+
   const FilterModal = () => {
     return (
       <>
@@ -90,41 +140,9 @@ const Filter = ({ tagFilter, checkBoxFilter, onApply }: Props) => {
             </Flex>
           </Box>
           <Box sx={styles.innerContainer}>
-            <Box sx={styles.filterContainer}>
-              <Text sx={styles.filterTitle}>{tagFilter.name}</Text>
-              <Flex sx={styles.tagContainer}>
-                {tagFilter.options.map((option, index) => (
-                  <Tag
-                    sx={styles.tag}
-                    key={index}
-                    color={
-                      isFilterSelected(option.id, 'tag')
-                        ? 'Selected'
-                        : 'Default'
-                    }
-                    onClick={() => handleFilterClick(option.id, 'tag')}
-                  >
-                    {option.name}
-                  </Tag>
-                ))}
-              </Flex>
-            </Box>
-            <Box sx={styles.sectionDivider}>
-              <hr />
-            </Box>
-            <Box sx={styles.filterContainer}>
-              <Text sx={styles.filterTitle}>{checkBoxFilter.name}</Text>
-              <Box sx={styles.checkBoxContainer}>
-                {checkBoxFilter.options.map((option, index) => (
-                  <Checkbox
-                    key={index}
-                    label={option.name}
-                    checked={isFilterSelected(option.id, 'checklist')}
-                    onClick={() => handleFilterClick(option.id, 'checklist')}
-                  />
-                ))}
-              </Box>
-            </Box>
+            <TagFilter />
+            {checkBoxFilter && tagFilter && <Divider />}
+            <CheckboxFilter />
           </Box>
           <Flex sx={styles.buttonsContainer}>
             <Button
diff --git a/src/components/filter/styles.ts b/src/components/filter/styles.ts
index d0c10fb8..b5517324 100644
--- a/src/components/filter/styles.ts
+++ b/src/components/filter/styles.ts
@@ -4,12 +4,12 @@ const filterButton: SxStyleProp = {
   cursor: 'pointer',
   alignItems: 'center',
   borderRadius: '4px',
-  border: '1px solid #4A596B',
+  border: '1px solid #E7E9EE',
+  fontSize: '14px',
   gap: '8px',
   px: '8px',
-  py: '4px',
   transition: '0.3s',
-  height: '36px',
+  height: '24px',
 
   ':hover': {
     color: '#F71963',
diff --git a/src/components/select/styles.ts b/src/components/select/styles.ts
index 1df7b87d..9299b861 100644
--- a/src/components/select/styles.ts
+++ b/src/components/select/styles.ts
@@ -11,9 +11,10 @@ const selectContainer: SxStyleProp = {
 const select: SxStyleProp = {
   borderRadius: '4px',
   padding: '0px 4px',
-  height: '36px',
+  height: '24px',
   fontSize: '14px',
   border: '1px solid #E7E9EE',
+  outline: 'none',
 }
 
 export default { selectContainer, select }
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
index 824e0aa7..3405d7e7 100644
--- a/src/components/tag/index.tsx
+++ b/src/components/tag/index.tsx
@@ -11,7 +11,7 @@ const Tag = ({
 }: {
   sx?: SxStyleProp
   children: React.ReactNode
-  color?: KnownIssueStatus | 'Default' | 'Selected' | 'New'
+  color?: KnownIssueStatus | 'Default' | 'Selected' | 'New' | 'Gray'
   onClick?: () => void
 }) => {
   return (
diff --git a/src/components/tag/styles.ts b/src/components/tag/styles.ts
index df3e90bb..496c72a4 100644
--- a/src/components/tag/styles.ts
+++ b/src/components/tag/styles.ts
@@ -13,7 +13,12 @@ const tag: SxStyleProp = {
 }
 
 const statusColors: {
-  [status in KnownIssueStatus | 'Default' | 'Selected' | 'New']: SxStyleProp
+  [status in
+    | KnownIssueStatus
+    | 'Default'
+    | 'Selected'
+    | 'New'
+    | 'Gray']: SxStyleProp
 } = {
   Backlog: {
     border: '1px solid #979797',
@@ -64,6 +69,11 @@ const statusColors: {
     color: '#F71963',
     background: '#FFE0EF',
   },
+  Gray: {
+    border: '1px solid #4A596B',
+    color: '#4A596B',
+    background: '#E7E9EE',
+  },
 }
 
 export default {
diff --git a/src/messages/en.json b/src/messages/en.json
index 91565012..23bf8572 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -244,9 +244,10 @@
   "sort.label": "Sort by:",
   "sort.recently_updated": "Recently updated",
   "sort.newest": "Newest",
-  "known_issues_result.empty": "No matching results. Try other filters.",
   "date_text.created": "Published on",
   "date_text.updated": "Last update on",
   "announcements_page_result.empty": "No matching results.",
-  "announcements_page_search.placeholder": "Search in Announcements..."
+  "announcements_page_search.placeholder": "Search in Announcements...",
+  "search_result.empty": "No matching results.",
+  "faq_filter.title": "Products"
 }
diff --git a/src/messages/es.json b/src/messages/es.json
index 76ed3205..39215cf7 100644
--- a/src/messages/es.json
+++ b/src/messages/es.json
@@ -250,9 +250,10 @@
   "sort.label": "Ordenar por:",
   "sort.recently_updated": "Recientemente actualizados",
   "sort.newest": "Más nuevos",
-  "known_issues_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros.",
   "date_text.created": "Publicado en",
   "date_text.updated": "Última actualización",
   "announcements_page_result.empty": "Ningún resultado coincidente.",
-  "announcements_page_search.placeholder": "Buscar en Anuncios..."
+  "announcements_page_search.placeholder": "Buscar en Anuncios...",
+  "search_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros.",
+  "faq_filter.title": "Produtos"
 }
diff --git a/src/messages/pt.json b/src/messages/pt.json
index 07a1b8a3..ddc0382d 100644
--- a/src/messages/pt.json
+++ b/src/messages/pt.json
@@ -265,9 +265,10 @@
   "sort.label": "Ordenar por:",
   "sort.recently_updated": "Recentemente atualizado",
   "sort.newest": "Mais novos",
-  "known_issues_result.empty": "Nenhum resultado correspondente. Tente outros filtros.",
   "date_text.created": "Publicado em",
   "date_text.updated": "Última atualização em",
   "announcements_page_result.empty": "Nenhum resultado correspondente.",
-  "announcements_page_search.placeholder": "Pesquise em Comunicados..."
+  "announcements_page_search.placeholder": "Pesquise em Comunicados...",
+  "search_result.empty": "Nenhum resultado correspondente. Tente outros filtros.",
+  "faq_filter.title": "Produtos"
 }
diff --git a/src/pages/docs/tracks/[slug].tsx b/src/pages/docs/tracks/[slug].tsx
index 722a8b3c..fa1bf132 100644
--- a/src/pages/docs/tracks/[slug].tsx
+++ b/src/pages/docs/tracks/[slug].tsx
@@ -126,8 +126,11 @@ const TrackPage: NextPage<Props> = ({
             <Box sx={styles.contentContainer}>
               <article ref={articleRef}>
                 <header>
+                  <Breadcrumb breadcrumbList={breadcrumbList} />
                   <Flex sx={styles.flexContainer}>
-                    <Breadcrumb breadcrumbList={breadcrumbList} />
+                    <Text sx={styles.documentationTitle} className="title">
+                      {serialized.frontmatter?.title}
+                    </Text>
                     <Text sx={styles.readingTime}>
                       {intl.formatMessage(
                         {
@@ -138,12 +141,6 @@ const TrackPage: NextPage<Props> = ({
                       )}
                     </Text>
                   </Flex>
-                  <Text sx={styles.documentationTitle} className="title">
-                    {serialized.frontmatter?.title}
-                  </Text>
-                  <Text sx={styles.documentationExcerpt}>
-                    {serialized.frontmatter?.excerpt}
-                  </Text>
                 </header>
                 <MarkdownRenderer serialized={serialized} />
               </article>
diff --git a/src/pages/faq/[slug].tsx b/src/pages/faq/[slug].tsx
new file mode 100644
index 00000000..67978748
--- /dev/null
+++ b/src/pages/faq/[slug].tsx
@@ -0,0 +1,295 @@
+import Head from 'next/head'
+import { useEffect, useState, useContext, useRef } from 'react'
+import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
+import { PHASE_PRODUCTION_BUILD } from 'next/constants'
+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXRemoteSerializeResult } from 'next-mdx-remote'
+import remarkGFM from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import hljsCurl from 'highlightjs-curl'
+import remarkBlockquote from 'utils/remark_plugins/rehypeBlockquote'
+
+import remarkImages from 'utils/remark_plugins/plaiceholder'
+
+import { Box, Flex, Text } from '@vtex/brand-ui'
+
+import DocumentContextProvider from 'utils/contexts/documentContext'
+
+import Contributors from 'components/contributors'
+import OnThisPage from 'components/on-this-page'
+import { Item, TableOfContents } from '@vtexdocs/components'
+import Breadcrumb from 'components/breadcrumb'
+
+import getHeadings from 'utils/getHeadings'
+import getNavigation from 'utils/getNavigation'
+// import getGithubFile from 'utils/getGithubFile'
+import escapeCurlyBraces from 'utils/escapeCurlyBraces'
+import replaceHTMLBlocks from 'utils/replaceHTMLBlocks'
+import { PreviewContext } from 'utils/contexts/preview'
+
+import styles from 'styles/documentation-page'
+import { ContributorsType } from 'utils/getFileContributors'
+
+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'
+import DateText from 'components/date-text'
+
+const docsPathsGLOBAL = await getFaqPaths('faq')
+
+interface Props {
+  sectionSelected: string
+  breadcrumbList: { slug: string; name: string; type: string }[]
+  content: string
+  serialized: MDXRemoteSerializeResult
+  contributors: ContributorsType[]
+  path: string
+  headingList: Item[]
+  branch: string
+}
+
+const FaqPage: NextPage<Props> = ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  serialized,
+  headingList,
+  contributors,
+  breadcrumbList,
+  branch,
+}) => {
+  const [headings, setHeadings] = useState<Item[]>([])
+  const { setBranchPreview } = useContext(PreviewContext)
+  const intl = useIntl()
+  setBranchPreview(branch)
+  const articleRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    setHeadings(headingList)
+  }, [serialized.frontmatter])
+
+  const createdAtDate = serialized.frontmatter?.createdAt
+    ? new Date(serialized.frontmatter?.createdAt)
+    : undefined
+
+  const updatedAtDate = serialized.frontmatter?.updatedAt
+    ? new Date(serialized.frontmatter?.updatedAt)
+    : undefined
+
+  return (
+    <>
+      <Head>
+        <title>{serialized.frontmatter?.title as string}</title>
+        <meta name="docsearch:doctype" content="Start here" />
+        {serialized.frontmatter?.hidden && (
+          <meta name="robots" content="noindex" />
+        )}
+        {serialized.frontmatter?.excerpt && (
+          <meta
+            property="og:description"
+            content={serialized.frontmatter?.excerpt as string}
+          />
+        )}
+      </Head>
+      <DocumentContextProvider headings={headings}>
+        <Flex sx={styles.innerContainer}>
+          <Box sx={styles.articleBox}>
+            <Box sx={styles.contentContainer}>
+              <article ref={articleRef}>
+                <header>
+                  <Breadcrumb breadcrumbList={breadcrumbList} />
+                  <Flex sx={styles.flexContainer}>
+                    <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>
+                    {createdAtDate && updatedAtDate && (
+                      <DateText
+                        createdAt={createdAtDate}
+                        updatedAt={updatedAtDate}
+                      />
+                    )}
+                  </Flex>
+                </header>
+                <MarkdownRenderer serialized={serialized} />
+              </article>
+            </Box>
+
+            <Box sx={styles.bottomContributorsContainer}>
+              <Box sx={styles.bottomContributorsDivider} />
+              <Contributors contributors={contributors} />
+            </Box>
+          </Box>
+          <Box sx={styles.rightContainer}>
+            <Contributors contributors={contributors} />
+            <TableOfContents headingList={headings} />
+          </Box>
+          <OnThisPage />
+        </Flex>
+      </DocumentContextProvider>
+    </>
+  )
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  }
+}
+
+export const getStaticProps: GetStaticProps = async ({
+  params,
+  locale,
+  preview,
+  previewData,
+}) => {
+  const previewBranch =
+    preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch')
+      ? JSON.parse(JSON.stringify(previewData)).branch
+      : 'main'
+  const branch = preview ? previewBranch : 'main'
+  const slug = params?.slug as string
+  const currentLocale: localeType = locale
+    ? (locale as localeType)
+    : ('en' as localeType)
+  const docsPaths =
+    process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD
+      ? docsPathsGLOBAL
+      : await getFaqPaths('faq', branch)
+
+  const logger = getLogger('FAQ')
+
+  const path = docsPaths[slug].find((e) => e.locale === currentLocale)?.path
+
+  if (!path) {
+    return {
+      notFound: true,
+    }
+  }
+
+  let documentationContent =
+    (await fetch(
+      `https://raw.githubusercontent.com/vtexdocs/help-center-content/${branch}/${path}`
+    )
+      .then((res) => res.text())
+      .catch((err) => console.log(err))) || ''
+
+  const contributors =
+    (await fetch(
+      `https://github.com/vtexdocs/help-center-content/file-contributors/${branch}/${path}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+      }
+    )
+      .then((res) => res.json())
+      .then(({ users }) => {
+        const result: ContributorsType[] = []
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        for (let i = 0; i < users.length; i++) {
+          const user = users[i]
+          if (user.id === '41898282') continue
+          result.push({
+            name: user.login,
+            login: user.login,
+            avatar: user.primaryAvatarUrl,
+            userPage: `https://github.com${user.profileLink}`,
+          })
+        }
+
+        return result
+      })
+      .catch((err) => console.log(err))) || []
+
+  let format: 'md' | 'mdx' = 'mdx'
+  try {
+    if (path.endsWith('.md')) {
+      documentationContent = escapeCurlyBraces(documentationContent)
+      documentationContent = replaceHTMLBlocks(documentationContent)
+    }
+  } catch (error) {
+    logger.error(`${error}`)
+    format = 'md'
+  }
+
+  try {
+    const headingList: Item[] = []
+    let serialized = await serialize(documentationContent, {
+      parseFrontmatter: true,
+      mdxOptions: {
+        remarkPlugins: [
+          remarkGFM,
+          remarkImages,
+          [getHeadings, { headingList }],
+          remarkBlockquote,
+          remarkReadingTime,
+        ],
+        rehypePlugins: [
+          [rehypeHighlight, { languages: { hljsCurl }, ignoreMissing: true }],
+        ],
+        format,
+      },
+    })
+
+    const sidebarfallback = await getNavigation()
+    serialized = JSON.parse(JSON.stringify(serialized))
+
+    logger.info(`Processing ${slug}`)
+    const seeAlsoData: {
+      url: string
+      title: string
+      category: string
+    }[] = []
+
+    const breadcrumbList: { slug: string; name: string; type: string }[] = [
+      {
+        slug: '/faq/',
+        name: getMessages()[currentLocale]['landing_page_faq.title'],
+        type: 'category',
+      },
+      {
+        slug,
+        name: serialized?.frontmatter?.title ?? '',
+        type: '',
+      },
+    ]
+
+    return {
+      props: {
+        slug,
+        serialized,
+        sidebarfallback,
+        headingList,
+        contributors,
+        path,
+        seeAlsoData,
+        breadcrumbList,
+        branch,
+      },
+      revalidate: 600,
+    }
+  } catch (error) {
+    logger.error(`Error while processing ${path}\n${error}`)
+    return {
+      notFound: true,
+    }
+  }
+}
+
+export default FaqPage
diff --git a/src/pages/faq/index.tsx b/src/pages/faq/index.tsx
new file mode 100644
index 00000000..408fad87
--- /dev/null
+++ b/src/pages/faq/index.tsx
@@ -0,0 +1,226 @@
+import { Flex } from '@vtex/brand-ui'
+import { GetStaticProps, NextPage } from 'next'
+import { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
+import getNavigation from 'utils/getNavigation'
+
+import { FaqCardDataElement, SortByType } from 'utils/typings/types'
+import Head from 'next/head'
+import styles from 'styles/known-issues-page'
+import { PreviewContext } from 'utils/contexts/preview'
+import { Fragment, useContext, useMemo, useState } from 'react'
+import { getDocsPaths as getFaqPaths } from 'utils/getDocsPaths'
+import { serialize } from 'next-mdx-remote/serialize'
+import { getLogger } from 'utils/logging/log-util'
+import PageHeader from 'components/page-header'
+import { useIntl } from 'react-intl'
+import startHereImage from '../../../public/images/faq.png'
+import Pagination from 'components/pagination'
+import { localeType } from 'utils/navigation-utils'
+import Select from 'components/select'
+import { faqFilter, sortBy } from 'utils/constants'
+import FaqCard from 'components/faq-card'
+import Filter from 'components/filter'
+
+interface Props {
+  sidebarfallback: any //eslint-disable-line
+  sectionSelected?: DocumentationTitle | UpdatesTitle | ''
+  faqData: FaqCardDataElement[]
+  branch: string
+  page: number
+  totalPages: number
+}
+
+const docsPathsGLOBAL = await getFaqPaths('faq')
+
+const FaqPage: NextPage<Props> = ({ faqData, branch }) => {
+  const intl = useIntl()
+  const { setBranchPreview } = useContext(PreviewContext)
+  setBranchPreview(branch)
+  const itemsPerPage = 5
+  const [page, setPage] = useState({ curr: 1, total: 1 })
+  const [filters, setFilters] = useState<string[]>([])
+  const [sortByValue, setSortByValue] = useState<SortByType>('newest')
+
+  const filteredResult = useMemo(() => {
+    const data = faqData.filter((question) => {
+      return filters.length === 0 || filters.includes(question.productTeam)
+    })
+
+    data.sort((a, b) => {
+      const dateA =
+        sortByValue === 'newest' ? new Date(b.createdAt) : new Date(b.updatedAt)
+      const dateB =
+        sortByValue === 'newest' ? new Date(a.createdAt) : new Date(a.updatedAt)
+
+      return dateA.getTime() - dateB.getTime()
+    })
+
+    setPage({ curr: 1, total: Math.ceil(data.length / itemsPerPage) })
+
+    return data
+  }, [filters, sortByValue, intl.locale])
+
+  const paginatedResult = useMemo(() => {
+    return filteredResult.slice(
+      (page.curr - 1) * itemsPerPage,
+      page.curr * itemsPerPage
+    )
+  }, [page])
+
+  function handleClick(props: { selected: number }) {
+    if (props.selected !== undefined && props.selected !== page.curr)
+      setPage({ ...page, curr: props.selected })
+  }
+
+  return (
+    <>
+      <Head>
+        <title>
+          {intl.formatMessage({
+            id: 'landing_page_faq.title',
+          })}
+        </title>
+        <meta
+          property="og:title"
+          content={intl.formatMessage({
+            id: 'landing_page_faq.description',
+          })}
+          key="title"
+        />
+      </Head>
+      <Fragment>
+        <PageHeader
+          title={intl.formatMessage({
+            id: 'landing_page_faq.title',
+          })}
+          description={intl.formatMessage({
+            id: 'landing_page_faq.description',
+          })}
+          imageUrl={startHereImage}
+          imageAlt={intl.formatMessage({
+            id: 'landing_page_faq.title',
+          })}
+        />
+        <Flex sx={styles.container}>
+          <Flex sx={styles.optionsContainer}>
+            <Filter
+              checkBoxFilter={faqFilter(intl)}
+              onApply={(newFilters) => setFilters(newFilters.checklist)}
+            />
+            <Select
+              label={intl.formatMessage({ id: 'sort.label' })}
+              value={sortByValue}
+              options={sortBy(intl)}
+              onSelect={(ordering) => setSortByValue(ordering as SortByType)}
+            />
+          </Flex>
+          <Flex sx={styles.cardContainer}>
+            {paginatedResult.length === 0 && (
+              <Flex sx={styles.noResults}>
+                {intl.formatMessage({ id: 'search_result.empty' })}
+              </Flex>
+            )}
+            {paginatedResult.map((question, id) => {
+              return <FaqCard key={id} {...question} />
+            })}
+          </Flex>
+          <Pagination
+            forcePage={page.curr}
+            pageCount={page.total}
+            onPageChange={handleClick}
+          />
+        </Flex>
+      </Fragment>
+    </>
+  )
+}
+
+export const getStaticProps: GetStaticProps = async ({
+  locale,
+  preview,
+  previewData,
+}) => {
+  const sidebarfallback = await getNavigation()
+  const sectionSelected = 'FAQ'
+  const previewBranch =
+    preview && JSON.parse(JSON.stringify(previewData)).hasOwnProperty('branch')
+      ? JSON.parse(JSON.stringify(previewData)).branch
+      : 'main'
+  const branch = preview ? previewBranch : 'main'
+  const logger = getLogger('FAQ')
+  const currentLocale: localeType = locale
+    ? (locale as localeType)
+    : ('en' as localeType)
+
+  const slugs = Object.keys(docsPathsGLOBAL)
+
+  const fetchFromGithub = async (path: string, slug: string) => {
+    try {
+      const response = await fetch(
+        `https://raw.githubusercontent.com/vtexdocs/help-center-content/${branch}/${path}`
+      )
+      const data = await response.text()
+      return { content: data, slug }
+    } catch (error) {
+      logger.error(`Error fetching data for path ${path}` + ' ' + error)
+      return { content: '', slug }
+    }
+  }
+
+  const batchSize = 100
+
+  const fetchBatch = async (batch: string[]) => {
+    const promises = batch.map(async (slug) => {
+      const path = docsPathsGLOBAL[slug]?.find(
+        (e) => e.locale === currentLocale
+      )?.path
+
+      if (path) return fetchFromGithub(path, slug)
+
+      return { content: '', slug }
+    })
+
+    return Promise.all(promises)
+  }
+
+  const faqData: FaqCardDataElement[] = []
+
+  for (let i = 0; i < slugs.length; i += batchSize) {
+    const batch = slugs.slice(i, i + batchSize)
+    const batchResults = await fetchBatch(batch)
+
+    for (const data of batchResults) {
+      if (data?.content) {
+        try {
+          const onlyFrontmatter = `---\n${data.content.split('---')[1]}---\n`
+
+          const { frontmatter } = await serialize(onlyFrontmatter, {
+            parseFrontmatter: true,
+          })
+
+          if (frontmatter)
+            faqData.push({
+              title: frontmatter.title,
+              slug: data.slug,
+              createdAt: String(frontmatter.createdAt),
+              updatedAt: String(frontmatter.updatedAt),
+              productTeam: frontmatter.productTeam,
+            })
+        } catch (error) {
+          logger.error(`${error}`)
+        }
+      }
+    }
+  }
+
+  return {
+    props: {
+      sidebarfallback,
+      sectionSelected,
+      faqData,
+      branch,
+    },
+  }
+}
+
+export default FaqPage
diff --git a/src/pages/known-issues/[slug].tsx b/src/pages/known-issues/[slug].tsx
index 9287b055..122dd16d 100644
--- a/src/pages/known-issues/[slug].tsx
+++ b/src/pages/known-issues/[slug].tsx
@@ -102,8 +102,11 @@ const KnownIssuePage: NextPage<Props> = ({
             <Box sx={styles.contentContainer}>
               <article ref={articleRef}>
                 <header>
+                  <Breadcrumb breadcrumbList={breadcrumbList} />
                   <Flex sx={styles.flexContainer}>
-                    <Breadcrumb breadcrumbList={breadcrumbList} />
+                    <Text sx={styles.documentationTitle} className="title">
+                      {serialized.frontmatter?.title}
+                    </Text>
                     <Text sx={styles.readingTime}>
                       {intl.formatMessage(
                         {
@@ -114,9 +117,6 @@ const KnownIssuePage: NextPage<Props> = ({
                       )}
                     </Text>
                   </Flex>
-                  <Text sx={styles.documentationTitle} className="title">
-                    {serialized.frontmatter?.title}
-                  </Text>
                   <Box sx={styles.divider}></Box>
                   <Flex sx={styles.detailedInfo}>
                     <Flex sx={styles.id}>
diff --git a/src/pages/known-issues/index.tsx b/src/pages/known-issues/index.tsx
index 6d1a7efd..2f474826 100644
--- a/src/pages/known-issues/index.tsx
+++ b/src/pages/known-issues/index.tsx
@@ -139,7 +139,7 @@ const KnownIssuesPage: NextPage<Props> = ({ knownIssuesData, branch }) => {
           <Flex sx={styles.cardContainer}>
             {paginatedResult.length === 0 && (
               <Flex sx={styles.noResults}>
-                {intl.formatMessage({ id: 'known_issues_result.empty' })}
+                {intl.formatMessage({ id: 'search_result.empty' })}
               </Flex>
             )}
             {paginatedResult.map((issue, id) => {
diff --git a/src/styles/documentation-page.ts b/src/styles/documentation-page.ts
index cf115603..c5f615fb 100644
--- a/src/styles/documentation-page.ts
+++ b/src/styles/documentation-page.ts
@@ -114,16 +114,16 @@ const divider: SxStyleProp = {
 }
 
 const readingTime: SxStyleProp = {
-  color: '#6b7785',
-  mb: '24px',
+  color: '#A1AAB7',
+  fontSize: '16px',
   lineHeight: '18px',
-  ml: 'auto',
 }
 
 const flexContainer: SxStyleProp = {
-  justifyContent: ['center', 'space-between'],
-  flexWrap: 'wrap-reverse',
-  columnGap: '16px',
+  flexWrap: 'wrap',
+  flexDirection: 'column',
+  gap: '16px',
+  mb: '16px',
 }
 
 const detailedInfo: SxStyleProp = {
diff --git a/src/styles/known-issues-page.ts b/src/styles/known-issues-page.ts
index 68129954..2ddc72cf 100644
--- a/src/styles/known-issues-page.ts
+++ b/src/styles/known-issues-page.ts
@@ -27,6 +27,14 @@ const optionsContainer: SxStyleProp = {
   flexWrap: 'wrap',
 }
 
+const optionContainer: SxStyleProp = {
+  justifyContent: ['center', 'flex-end'],
+  alignItems: 'center',
+  alignContent: 'center',
+  width: '100%',
+  flexWrap: 'wrap',
+}
+
 const noResults: SxStyleProp = {
   py: '32px',
   textAlign: 'center',
@@ -35,6 +43,7 @@ const noResults: SxStyleProp = {
 export default {
   container,
   cardContainer,
+  optionContainer,
   optionsContainer,
   noResults,
 }
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index ff04347f..7cb832e1 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -106,7 +106,7 @@ export const updatesData = (intl: IntlShape) => {
       description: intl.formatMessage({
         id: 'updates_info_notes.description',
       }),
-      link: '/announcements', //TODO: mudar rota
+      link: '/faq',
     },
     {
       id: 'Announcements',
@@ -586,3 +586,65 @@ export const sortBy = (intl: IntlShape) => {
 
   return data
 }
+
+export const faqFilter = (intl: IntlShape) => {
+  const data = {
+    name: intl.formatMessage({ id: 'faq_filter.title' }),
+    options: [
+      {
+        id: 'Shopping',
+        name: 'Shopping',
+      },
+      {
+        id: 'Post-purchase',
+        name: 'Post-purchase',
+      },
+      {
+        id: 'Marketing & Merchandising',
+        name: 'Marketing & Merchandising',
+      },
+      {
+        id: 'Financial',
+        name: 'Financial',
+      },
+      {
+        id: 'Channels',
+        name: 'Channels',
+      },
+      {
+        id: 'VTEX IO',
+        name: 'VTEX IO',
+      },
+      {
+        id: 'Master Data',
+        name: 'Master Data',
+      },
+      {
+        id: 'Identity',
+        name: 'Identity',
+      },
+      {
+        id: 'Reliability',
+        name: 'Reliability',
+      },
+      {
+        id: 'Others',
+        name: 'Others',
+      },
+      {
+        id: 'Apps',
+        name: 'Apps',
+      },
+      {
+        id: 'Billing',
+        name: 'Billing',
+      },
+      {
+        id: 'Management',
+        name: 'Management',
+      },
+    ],
+  }
+
+  return data
+}
diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts
index fa9d7c80..10f658c4 100644
--- a/src/utils/typings/types.ts
+++ b/src/utils/typings/types.ts
@@ -84,3 +84,11 @@ export type AnnouncementDataElement = {
 }
 
 export type SortByType = 'newest' | 'recently_updated'
+
+export type FaqCardDataElement = {
+  title: string
+  slug: string
+  createdAt: string
+  updatedAt: string
+  productTeam: string
+}