diff --git a/.storybook/preview.js b/.storybook/preview.js
index a18e1911..d1797896 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -73,6 +73,7 @@ export const parameters = {
         'Atoms',
         'Molecules',
         'Organisms',
+        'Features',
         'Releases',
       ],
     },
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index 3857df1d..ea514eb2 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -5,9 +5,22 @@
   font-size: var(--fs-text-size-5);
 }
 
-.sbdocs-content > header .sbdocs-p { margin: var(--fs-spacing-1) 0 0; }
+.sbdocs.sbdocs-p code {
+  font-size: var(--fs-text-size-legend);
+}
+
+.sbdocs.sbdocs-p a {
+  text-decoration: underline;
+}
 
-.sbdocs.sbdocs-p { font-size: var(--fs-text-size-body); }
+.sbdocs-content > header .sbdocs-p {
+  margin: var(--fs-spacing-1) 0 0;
+}
+
+.sbdocs.sbdocs-p,
+.sbdocs.sbdocs-li {
+  font-size: var(--fs-text-size-body);
+}
 
 .sbdocs.sbdocs-h2 {
   margin: 0 0 var(--fs-spacing-1);
@@ -21,13 +34,15 @@ h3.sbdocs.sbdocs-h3 {
   font-size: var(--fs-text-size-lead);
 }
 
-.sbdocs.sbdocs-h2 + .sbdocs.sbdocs-h3 { margin-top: var(--fs-spacing-4); }
+.sbdocs.sbdocs-h2 + .sbdocs.sbdocs-h3 {
+  margin-top: var(--fs-spacing-4);
+}
 
 /* Header */
 
 .sbdocs-content > header {
   padding: var(--fs-spacing-4) var(--fs-spacing-5);
-  margin-bottom: var(--fs-spacing-4);
+  margin-bottom: var(--fs-spacing-6);
   color: var(--fs-color-text-inverse);
   background-color: var(--fs-color-main-0);
   border-radius: var(--fs-border-radius);
@@ -100,21 +115,27 @@ h3.sbdocs.sbdocs-h3 {
   margin-top: var(--fs-spacing-4);
 }
 
-.sbdocs-best-practices-rule:not(:first-of-type) { margin-top: var(--fs-spacing-6); }
+.sbdocs-best-practices-rule:not(:first-of-type) {
+  margin-top: var(--fs-spacing-6);
+}
 
 .sbdocs-best-practices-rule > article {
   flex-basis: 100%;
   width: 0;
 }
 
-.sbdocs-best-practices-text { margin-top: var(--fs-spacing-3); }
+.sbdocs-best-practices-text {
+  margin-top: var(--fs-spacing-3);
+}
 
 .sbdocs-best-practices-text h3.sbdocs.sbdocs-h3 {
   margin: 0 0 var(--fs-spacing-1) 0;
   font-weight: var(--fs-text-weight-bold);
 }
 
-.sbdocs-best-practices-text h3 span { margin-right: var(--fs-spacing-0); }
+.sbdocs-best-practices-text h3 span {
+  margin-right: var(--fs-spacing-0);
+}
 
 .sbdocs-best-practices-text p {
   padding-right: var(--fs-spacing-4);
@@ -135,7 +156,9 @@ h3.sbdocs.sbdocs-h3 {
   max-width: 90%;
 }
 
-.sbdocs-best-practices-rule > article div > [data-fs-alert] { width: 90%; }
+.sbdocs-best-practices-rule > article div > [data-fs-alert] {
+  width: 90%;
+}
 
 /* Section */
 
@@ -150,6 +173,10 @@ h3.sbdocs.sbdocs-h3 {
   width: 0;
 }
 
+.no-code .docblock-code-toggle {
+  display: none;
+}
+
 .sbdocs-section-text {
   margin-top: var(--fs-spacing-3);
 }
@@ -174,6 +201,69 @@ h3.sbdocs.sbdocs-h3 {
   border-radius: var(--fs-border-radius);
 }
 
+/* List */
+
+.sbdocs-list {
+  display: flex;
+  justify-content: center;
+}
+
+.sbdocs-list .sbdocs-ul {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fs-spacing-4);
+  justify-content: center;
+  width: 100%;
+  padding: 0;
+  margin-top: var(--fs-spacing-4);
+}
+
+.sbdocs-list .sbdocs-li {
+  display: flex;
+  flex-basis: 100%;
+  column-gap: var(--fs-spacing-4);
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sbdocs-list .sbdocs-li > * {
+  flex-shrink: 0;
+  width: 48%;
+}
+
+.sbdocs-list .sbdocs-li > div {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 140px;
+  padding: var(--fs-spacing-3);
+  background-color: var(--fs-color-neutral-1);
+  border-radius: var(--fs-border-radius);
+}
+
+.sbdocs-list .sbdocs-div > img {
+  max-height: 100%;
+  border-radius: var(--fs-border-radius);
+}
+
+.sbdocs-list-text h3.sbdocs.sbdocs-h3 {
+  margin: 0 0 var(--fs-spacing-1) 0;
+  font-weight: var(--fs-text-weight-bold);
+}
+
+.sbdocs-list-text p {
+  padding-right: var(--fs-spacing-4);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.sbdocs-list .sbdocs-list-text [data-fs-button] {
+  margin-top: var(--fs-spacing-1);
+  margin-left: calc(-1 * var(--fs-spacing-1));
+}
+
 /* Callout */
 
 .sbdocs-callout {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e32d59c8..94ddad67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Creates Doc page for `Regionalization` Feature ([#110](https://github.com/vtex-sites/nextjs.store/pull/110))
+- Applies new local tokens to `RegionalizationBar` ([#104](https://github.com/vtex-sites/nextjs.store/pull/104))
 - Applies new local tokens to `Modal` and `RegionalizationModal` ([#128](https://github.com/vtex-sites/nextjs.store/pull/128))
 - PriceRange component ([#124](https://github.com/vtex-sites/nextjs.store/pull/124))
 - PriceRange component to PLP and StoryBook ([#121](https://github.com/vtex-sites/nextjs.store/pull/121))
diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx
index 179bfa3f..ec817a56 100644
--- a/src/components/common/Navbar/Navbar.tsx
+++ b/src/components/common/Navbar/Navbar.tsx
@@ -45,10 +45,8 @@ const collections = [
 function NavLinks({ onClickLink }: NavLinksProps) {
   return (
     <nav className="navlinks__list">
+      <RegionalizationButton />
       <UIList>
-        <li>
-          <RegionalizationButton classes="hidden-mobile" />
-        </li>
         {collections.map(({ href, name }) => (
           <li key={name}>
             <Link variant="display" href={href} onClick={onClickLink}>
diff --git a/src/components/common/Navbar/navbar.scss b/src/components/common/Navbar/navbar.scss
index 49ca96a1..7ab360ae 100644
--- a/src/components/common/Navbar/navbar.scss
+++ b/src/components/common/Navbar/navbar.scss
@@ -181,6 +181,9 @@
 }
 
 .navlinks__list {
+  display: flex;
+  align-items: center;
+
   li {
     display: flex;
     align-items: center;
@@ -191,16 +194,32 @@
     width: 100%;
   }
 
+  [data-fs-regionalization-button] {
+    margin-left: calc(-1 * var(--fs-spacing-1));
+
+    // TODO: remove this after navbar 2.0 is implemented
+    &[data-fs-button-variant="tertiary"] {
+      color: var(--fs-color-text-display);
+    }
+
+    @include media("<notebook") {
+      display: none;
+    }
+  }
+
   @include media(">=notebook") {
+    padding-top: var(--fs-spacing-1);
+
     ul {
       display: flex;
       column-gap: var(--fs-spacing-3);
-      padding-top: var(--fs-spacing-1);
+      padding-left: var(--fs-spacing-3);
+      margin-left: var(--fs-spacing-2);
+      border-left: var(--fs-border-width) solid var(--fs-border-color-light);
     }
 
     [data-fs-link] {
-      width: auto;
-      padding: var(--fs-spacing-0) 0;
+      padding: 0 var(--fs-spacing-0);
     }
   }
 
diff --git a/src/components/regionalization/Regionalization.stories.mdx b/src/components/regionalization/Regionalization.stories.mdx
new file mode 100644
index 00000000..2c8e2030
--- /dev/null
+++ b/src/components/regionalization/Regionalization.stories.mdx
@@ -0,0 +1,193 @@
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { SessionProvider } from '@faststore/sdk'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import RegionalizationButton from './RegionalizationButton'
+import ButtonLink from '../ui/Button/ButtonLink'
+import RegionalizationInput from './RegionalizationInput'
+import RegionalizationBar from './RegionalizationBar'
+import RegionalizationModal, {
+  RegionalizationModalContent,
+} from './RegionalizationModal'
+import Icon from '../ui/Icon'
+
+<Meta title="Features/Regionalization/Overview" />
+
+export const TemplateRegionalizationModal = () => {
+  const { modal, openModal } = useUI()
+  return <>{modal && <RegionalizationModal />}</>
+}
+
+export const TemplateButtonWithProvider = () => {
+  return (
+    <UIProvider>
+      <SessionProvider initialState={{}}>
+        <div
+          style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}
+        >
+          <p style={{ whiteSpace: 'nowrap' }}>Try me:</p>
+          <RegionalizationButton />
+          <TemplateRegionalizationModal />
+        </div>
+      </SessionProvider>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Regionalization
+
+This feature enables customers to set a location using a valid Postal Code.
+
+</header>
+
+## Overview
+
+Regionalization is a feature of [VTEX Intelligent Search](https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/3qgT47zY08biLP3d5os3DG) that allows for the optimization of search results according to the availability of sellers in the customer's region.
+
+Regionalization uses a behavior from VTEX Intelligent Search called [Availability](https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/7LMQbWK5nElIkXo0NK8Kux). It searches for products available in the inventory of sellers that serve a particular region.
+
+Stores that have more than one registered white label seller usually have specific inventories for each region. This is the case for supermarkets, for example.
+
+With the Regionalization feature enabled, if a customer enters their ZIP code while browsing the store (before checkout), only products available in the corresponding region will be displayed in the search results.
+
+### Steps
+
+1. Intentionally, a user Sets its location using a Postal Code
+2. Updates Product Catalog
+3. Gets notified if there's product conflict at minicart
+
+---
+
+## Components
+
+<section className="sbdocs-list">
+  <ul>
+    <li>
+      <div>
+        <SessionProvider>
+          <UIProvider>
+            <RegionalizationButton />
+            <TemplateRegionalizationModal />
+          </UIProvider>
+        </SessionProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationButton</h3>
+        <p>
+          Using a{' '}
+          <a href="../?path=/docs/atoms-button--button#tertiary">
+            Tertiary Button
+          </a>{' '}
+          as base, this component is usually placed on the <code>Navbar</code>{' '}
+          and triggers
+          <code>RegionalizationModal</code>.
+        </p>
+      </article>
+    </li>
+    <li>
+      <div>
+        <SessionProvider>
+          <UIProvider>
+            <RegionalizationBar />
+            <TemplateRegionalizationModal />
+          </UIProvider>
+        </SessionProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationBar</h3>
+        <p>
+          The Bar has a similar proposal for the button, usually used on mobile
+          devices only. It also triggers <code>RegionalizationModal</code>.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/features-regionalization-regionalizationbar--bar"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
+      </article>
+    </li>
+    <li>
+      <div>
+        <SessionProvider>
+          <UIProvider>
+            <RegionalizationInput />
+          </UIProvider>
+        </SessionProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationInput</h3>
+        <p>
+          An actionable{' '}
+          <a href="../?path=/docs/atoms-inputtext--actionable">InputText</a>{' '}
+          able to check the Postal Code authenticity.
+        </p>
+      </article>
+    </li>
+    <li>
+      <div>
+        <SessionProvider>
+          <UIProvider>
+            <RegionalizationModalContent onClose={() => {}} />
+          </UIProvider>
+        </SessionProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationModal</h3>
+        <p>
+          It's the modal that, trigged by <code>RegionalizationButton</code> or{' '}
+          <code>RegionalizationBar</code>, shows the user the{' '}
+          <code>RegionalizationInput</code> search.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
+      </article>
+    </li>
+  </ul>
+</section>
+
+---
+
+## Usage
+
+On your `Layout.txt` file:
+
+```jsx
+import RegionalizationModal from '../components/regionalization/RegionalizationModal'
+import { useUI } from 'src/sdk/ui/Provider'
+```
+
+and inside your `Layout` component:
+
+```jsx
+const { modal: displayModal } = useUI()
+
+return (
+  <>
+    {OtherLayoutComponents}
+    {displayModal && <RegionalizationModal />}
+  </>
+)
+```
+
+Then, you can add your `<RegionalizationButton />` or `<RegionalizationBar />` whenever it's needed.
+
+It's suggested to add it on `Navbar`.
+
+<Canvas
+  className="no-code"
+  style={{ display: 'flex', justifyContent: 'center' }}
+>
+  <Story name="default-button">{TemplateButtonWithProvider.bind({})}</Story>
+</Canvas>
diff --git a/src/components/regionalization/RegionalizationBar/RegionalizationBar.stories.mdx b/src/components/regionalization/RegionalizationBar/RegionalizationBar.stories.mdx
new file mode 100644
index 00000000..310edc3a
--- /dev/null
+++ b/src/components/regionalization/RegionalizationBar/RegionalizationBar.stories.mdx
@@ -0,0 +1,111 @@
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { SessionProvider } from '@faststore/sdk'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import RegionalizationBar from './RegionalizationBar'
+import RegionalizationModal from '../RegionalizationModal'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta title="Features/Regionalization/RegionalizationBar" />
+
+export const TemplateRegionalizationModal = () => {
+  const { modal: displayModal } = useUI()
+  return <>{displayModal && <RegionalizationModal />}</>
+}
+
+export const TemplateBarWithProvider = () => {
+  return (
+    <UIProvider>
+      <SessionProvider initialState={{}}>
+        <div
+          style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}
+        >
+          <p style={{ whiteSpace: 'nowrap' }}>Try me:</p>
+          <RegionalizationBar />
+          <TemplateRegionalizationModal />
+        </div>
+      </SessionProvider>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# RegionalizationBar
+
+The Bar is a similar proposal for the button, usually used on mobile devices only. It also triggers <code>RegionalizationModal</code>.
+
+</header>
+
+## Overview
+
+The `RegionalizationBar` is part of [Regionalization](?path=/docs/features-regionalization-overview--default-button) feature.
+
+---
+
+## Usage
+
+`import RegionalizationBar from '../components/regionalization/RegionalizationBar'`
+
+<Canvas
+  className="no-code"
+  style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}
+>
+  <Story name="Bar">{TemplateBarWithProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-regionalization-bar-width" value="100%" />
+  <TokenRow
+    token="--fs-regionalization-bar-padding"
+    value="var(--fs-spacing-0) var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-regionalization-bar-text-color"
+    value="var(--fs-color-text-display)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-regionalization-bar-background-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+  <TokenRow token="--fs-regionalization-bar-border" value="none" />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### CTA (Call To Action)
+
+<TokenTable>
+  <TokenRow token="--fs-regionalization-bar-cta-margin-left" value="auto" />
+  <TokenRow
+    token="--fs-regionalization-bar-cta-text-decoration"
+    value="underline"
+  />
+</TokenTable>
+
+### Message
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-bar-message-margin-right"
+    value="auto"
+  />
+</TokenTable>
+
+### Postal Code
+
+<TokenTable>
+  <TokenRow
+    token="--fs-regionalization-bar-postal-code-margin-right"
+    value="auto"
+  />
+</TokenTable>
diff --git a/src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx b/src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx
index 8b094153..025a33a0 100644
--- a/src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx
+++ b/src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx
@@ -5,6 +5,8 @@ import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { useUI } from 'src/sdk/ui/Provider'
 
+import styles from './regionalization-bar.module.scss'
+
 interface Props extends HTMLAttributes<HTMLDivElement> {
   classes: string
 }
@@ -14,16 +16,20 @@ function RegionBar({ classes, ...otherProps }: Props) {
   const { postalCode } = useSession()
 
   return (
-    <div data-fs-regionalization-bar className={classes} {...otherProps}>
+    <div
+      data-fs-regionalization-bar
+      className={`${classes} ${styles.fsRegionalizationBar}`}
+      {...otherProps}
+    >
       <Button onClick={openModal}>
         <Icon name="MapPin" width={24} height={24} />
         {postalCode ? (
           <>
-            <span>{postalCode}</span>
-            <span>Edit</span>
+            <span data-fs-regionalization-bar-postal-code>{postalCode}</span>
+            <span data-fs-regionalization-bar-cta>Edit</span>
           </>
         ) : (
-          <span>Set your location</span>
+          <span data-fs-regionalization-bar-message>Set your location</span>
         )}
         <Icon name="CaretRight" width={24} height={24} />
       </Button>
diff --git a/src/components/regionalization/RegionalizationBar/regionalization-bar.module.scss b/src/components/regionalization/RegionalizationBar/regionalization-bar.module.scss
new file mode 100644
index 00000000..41cc73aa
--- /dev/null
+++ b/src/components/regionalization/RegionalizationBar/regionalization-bar.module.scss
@@ -0,0 +1,54 @@
+@import "src/styles/scaffold";
+
+.fs-regionalization-bar {
+  // --------------------------------------------------------
+  // Design Tokens for Regionalization Bar
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-regionalization-bar-width                    : 100%;
+  --fs-regionalization-bar-padding                  : var(--fs-spacing-0) var(--fs-spacing-3);
+  --fs-regionalization-bar-text-color               : var(--fs-color-text-display);
+  --fs-regionalization-bar-background-color         : var(--fs-color-body-bkg);
+  --fs-regionalization-bar-border                   : none;
+
+  // CTA
+  --fs-regionalization-bar-cta-margin-left          : auto;
+  --fs-regionalization-bar-cta-text-decoration      : underline;
+
+  // Message
+  --fs-regionalization-bar-message-margin-right     : auto;
+
+  // Postal Code
+  --fs-regionalization-bar-postal-code-margin-right : auto;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: var(--fs-regionalization-bar-width);
+
+  [data-fs-button] {
+    width: var(--fs-regionalization-bar-width);
+    padding: var(--fs-regionalization-bar-padding);
+    color: var(--fs-regionalization-bar-text-color);
+    background-color: var(--fs-regionalization-bar-background-color);
+    border: var(--fs-regionalization-bar-border);
+    border-radius: 0;
+  }
+
+  [data-fs-regionalization-bar-cta] {
+    margin-left: var(--fs-regionalization-bar-cta-margin-left);
+    text-decoration: var(--fs-regionalization-bar-cta-text-decoration);
+  }
+
+  [data-fs-regionalization-bar-postal-code] {
+    margin-right: var(--fs-regionalization-bar-postal-code-margin-right);
+    font-weight: var(--fs-text-weight-regular);
+  }
+
+  [data-fs-regionalization-bar-message] {
+    margin-right: var(--fs-regionalization-bar-message-margin-right);
+    font-weight: var(--fs-text-weight-regular);
+  }
+}
diff --git a/src/components/regionalization/RegionalizationBar/regionalization-bar.scss b/src/components/regionalization/RegionalizationBar/regionalization-bar.scss
deleted file mode 100644
index be77adc1..00000000
--- a/src/components/regionalization/RegionalizationBar/regionalization-bar.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "src/styles/scaffold";
-
-[data-fs-regionalization-bar] {
-  width: 100%;
-
-  [data-fs-button] {
-    width: 100%;
-    padding: var(--fs-spacing-0) var(--fs-spacing-3);
-    color: var(--fs-color-text-display);
-    background-color: var(--fs-color-neutral-0);
-    border: 0;
-  }
-
-  span {
-    &:first-of-type {
-      margin-right: auto;
-      font-weight: var(--fs-text-weight-regular);
-    }
-
-    &:not(:first-of-type) {
-      margin-left: auto;
-      text-decoration: underline;
-    }
-  }
-}
diff --git a/src/components/regionalization/RegionalizationButton/RegionalizationButton.tsx b/src/components/regionalization/RegionalizationButton/RegionalizationButton.tsx
index 8f184dad..d3b0855a 100644
--- a/src/components/regionalization/RegionalizationButton/RegionalizationButton.tsx
+++ b/src/components/regionalization/RegionalizationButton/RegionalizationButton.tsx
@@ -1,30 +1,24 @@
 import { useSession } from '@faststore/sdk'
-import type { HTMLAttributes } from 'react'
 
 import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { useUI } from 'src/sdk/ui/Provider'
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  classes: string
-}
-
-function RegionButton({ classes, ...otherProps }: Props) {
+function RegionButton() {
   const { openModal } = useUI()
   const { postalCode } = useSession()
 
   return (
-    <div data-fs-regionalization-button className={classes} {...otherProps}>
-      <Button
-        variant="tertiary"
-        size="small"
-        icon={<Icon name="MapPin" width={24} height={24} />}
-        iconPosition="left"
-        onClick={openModal}
-      >
-        <span>{postalCode ?? 'Set your location'}</span>
-      </Button>
-    </div>
+    <Button
+      data-fs-regionalization-button
+      variant="tertiary"
+      size="small"
+      icon={<Icon name="MapPin" width={24} height={24} />}
+      iconPosition="left"
+      onClick={openModal}
+    >
+      <span>{postalCode ?? 'Set your location'}</span>
+    </Button>
   )
 }
 
diff --git a/src/components/regionalization/RegionalizationButton/regionalization-button.scss b/src/components/regionalization/RegionalizationButton/regionalization-button.scss
deleted file mode 100644
index 18651f75..00000000
--- a/src/components/regionalization/RegionalizationButton/regionalization-button.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "src/styles/scaffold";
-
-[data-fs-regionalization-button] {
-  padding-right: var(--fs-spacing-1);
-  margin-left: calc(-1 * var(--fs-spacing-2));
-  border-right: var(--fs-border-width) solid var(--fs-border-color-light);
-
-  [data-fs-button][data-fs-button-variant="tertiary"] {
-    color: var(--fs-color-text-display);
-  }
-}
diff --git a/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx b/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx
index bad52327..0b956ff2 100644
--- a/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx
+++ b/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx
@@ -20,12 +20,10 @@ export const ModalTemplate = () => {
   const { modal, openModal } = useUI()
   return (
     <div>
-      <RegionalizationButton onClick={() => openModal()}>Open Regionalization Modal</RegionalizationButton>
-      {
-        modal && (
-        <RegionalizationModal />
-        )
-      }
+      <RegionalizationButton onClick={() => openModal()}>
+        Open Regionalization Modal
+      </RegionalizationButton>
+      {modal && <RegionalizationModal />}
     </div>
   )
 }
@@ -60,14 +58,10 @@ This component calls a modal with some regionalization configurations.
 
 ## Overview
 
-This component uses [Modal](/docs/molecules-modal--overview) as a base.
+The `RegionalizationModal` is part of [Regionalization](?path=/docs/features-regionalization-overview--default-button) feature and uses [Modal](/docs/molecules-modal--overview) as a base.
 
-<Canvas  style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}>
-  <Story
-    name="Overview"
-  >
-    {RegionalizationModalContentTemplate.bind({})}
-  </Story>
+<Canvas style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}>
+  <Story name="Overview">{RegionalizationModalContentTemplate.bind({})}</Story>
 </Canvas>
 
 ---
@@ -77,11 +71,7 @@ This component uses [Modal](/docs/molecules-modal--overview) as a base.
 `import RegionalizationModal from src/components/regionalization/RegionalizationModal`
 
 <Canvas>
-  <Story
-    name="RegionalizationModalContent"
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="RegionalizationModalContent">{Template.bind({})}</Story>
 </Canvas>
 
 ---
@@ -126,10 +116,7 @@ This component uses [Modal](/docs/molecules-modal--overview) as a base.
     token="--fs-regionalization-modal-title-weight"
     value="var(--fs-text-weight-bold)"
   />
-  <TokenRow
-    token="--fs-regionalization-modal-title-line-height"
-    value="1.2"
-  />
+  <TokenRow token="--fs-regionalization-modal-title-line-height" value="1.2" />
 </TokenTable>
 
 ### Description
@@ -166,10 +153,7 @@ This component uses [Modal](/docs/molecules-modal--overview) as a base.
 ### Link
 
 <TokenTable>
-  <TokenRow
-    token="--fs-regionalization-modal-link-padding"
-    value="0"
-  />
+  <TokenRow token="--fs-regionalization-modal-link-padding" value="0" />
   <TokenRow
     token="--fs-regionalization-modal-link-color"
     value="var(--fs-color-link)"
diff --git a/src/components/ui/Modal/Modal.stories.mdx b/src/components/ui/Modal/Modal.stories.mdx
index 8f0ae40b..2c518206 100644
--- a/src/components/ui/Modal/Modal.stories.mdx
+++ b/src/components/ui/Modal/Modal.stories.mdx
@@ -1,49 +1,52 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 import UIProvider, { useUI } from 'src/sdk/ui/Provider'
 import Button from 'src/components/ui/Button'
+import ButtonLink from 'src/components/ui/Button/ButtonLink'
 import { RegionalizationModalContent } from 'src/components/regionalization/RegionalizationModal'
-import {  SessionProvider } from '@faststore/sdk'
+import { SessionProvider } from '@faststore/sdk'
 
 import Modal from '.'
+import Icon from '../Icon'
 import {
   TokenTable,
   TokenRow,
   TokenDivider,
 } from 'src/../.storybook/components'
 
-<Meta
-  title="Molecules/Modal"
-  component={Modal}
-/>
+<Meta title="Molecules/Modal" component={Modal} />
 
 export const ModalTemplate = (args) => {
   const { modal, openModal } = useUI()
   return (
     <div>
-      <Button variant="primary" onClick={() => openModal()}>Open Modal</Button>
-      {
-        modal && (
-          <Modal>
-            {({ fadeOut }) => (
-              <div style={{
-                  display: "flex",
-                  alignItems: "center",
-                  flexDirection: "column",
-                  padding: "3rem",
-                  backgroundColor: "white",
-              }}>
-                <h1 style={{
-                  fontSize: "2rem",
-                  paddingBottom: "1rem",
-                }}>
-                  Hello, i'm a Modal!
-                </h1>
-                <Button onClick={fadeOut}>Close Modal</Button>
-              </div>
-            )}
-          </Modal>
-        )
-      }
+      <Button variant="primary" onClick={() => openModal()}>
+        Open Modal
+      </Button>
+      {modal && (
+        <Modal>
+          {({ fadeOut }) => (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'column',
+                padding: '3rem',
+                backgroundColor: 'white',
+              }}
+            >
+              <h1
+                style={{
+                  fontSize: '2rem',
+                  paddingBottom: '1rem',
+                }}
+              >
+                Hello, i'm a Modal!
+              </h1>
+              <Button onClick={fadeOut}>Close Modal</Button>
+            </div>
+          )}
+        </Modal>
+      )}
     </div>
   )
 }
@@ -75,49 +78,24 @@ The `Modal` component uses [FastStore UI Modal](https://www.faststore.dev/refere
 `import Modal from 'src/components/ui/Modal'`
 
 <Canvas>
-  <Story
-    name="Overview"
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="Overview">{Template.bind({})}</Story>
 </Canvas>
 
 ---
 
 <TokenTable>
-  <TokenRow
-    token="--fs-modal-position-top"
-    value="30vh"
-  />
-  <TokenRow
-    token="--fs-modal-position-right"
-    value="var(--fs-spacing-4)"
-  />
-  <TokenRow
-    token="--fs-modal-position-left"
-    value="var(--fs-spacing-4)"
-  />
+  <TokenRow token="--fs-modal-position-top" value="30vh" />
+  <TokenRow token="--fs-modal-position-right" value="var(--fs-spacing-4)" />
+  <TokenRow token="--fs-modal-position-left" value="var(--fs-spacing-4)" />
   <TokenRow
     token="--fs-modal-max-width"
     value="calc(var(--fs-grid-breakpoint-desktop) / 3)"
   />
-  <TokenRow
-    token="--fs-modal-min-height"
-    value="var(--fs-spacing-5)"
-  />
-  <TokenRow
-    token="--fs-modal-margin"
-    value="auto"
-  />
-  <TokenRow
-    token="--fs-modal-border-radius"
-    value="var(--fs-spacing-0)"
-  />
+  <TokenRow token="--fs-modal-min-height" value="var(--fs-spacing-5)" />
+  <TokenRow token="--fs-modal-margin" value="auto" />
+  <TokenRow token="--fs-modal-border-radius" value="var(--fs-spacing-0)" />
   <TokenDivider />
-  <TokenRow
-    token="--fs-modal-width-tablet"
-    value="calc(100vw / 3)"
-  />
+  <TokenRow token="--fs-modal-width-tablet" value="calc(100vw / 3)" />
   <TokenRow
     token="--fs-modal-min-width-tablet"
     value="calc(var(--fs-grid-breakpoint-desktop) / 3)"
@@ -127,40 +105,41 @@ The `Modal` component uses [FastStore UI Modal](https://www.faststore.dev/refere
     token="--fs-modal-transition-timing"
     value="var(--fs-transition-timing)"
   />
-  <TokenRow
-    token="--fs-modal-transition-property"
-    value="transform"
-  />
-  <TokenRow
-    token="--fs-modal-transition-in-function"
-    value="ease-in"
-  />
-  <TokenRow
-    token="--fs-modal-transition-out-function"
-    value="ease-out"
-  />
+  <TokenRow token="--fs-modal-transition-property" value="transform" />
+  <TokenRow token="--fs-modal-transition-in-function" value="ease-in" />
+  <TokenRow token="--fs-modal-transition-out-function" value="ease-out" />
 </TokenTable>
 
 ---
 
 ## Use Cases
 
-<section className="sbdocs-section">
-  <article>
-    <div style={{ height: '280px' }}>
-      <SessionProvider>
-        <RegionalizationModalContent />
-      </SessionProvider>
-    </div>
-    <a href="?path=/docs/features-regionalization-regionalizationmodal--overview">
-      <article className="sbdocs-section-text">
-          <h3>Regionalization Modal Content</h3>
-          <p>
-            Displays a set of actions/items to the user, usually used to show a menu of options.
-          </p>
+<section className="sbdocs-list">
+  <ul>
+    <li>
+      <div>
+        <SessionProvider>
+          <UIProvider>
+            <RegionalizationModalContent onClose={() => {}} />
+          </UIProvider>
+        </SessionProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationModal</h3>
+        <p>
+          It's the modal that, trigged by <code>RegionalizationButton</code> or{' '}
+          <code>RegionalizationBar</code>, shows the user the{' '}
+          <code>RegionalizationInput</code> search.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
       </article>
-    </a>
-  </article>
+    </li>
+  </ul>
 </section>
-
----
diff --git a/src/stories/getting-started.stories.mdx b/src/stories/getting-started.stories.mdx
index d20f5eea..47c22ecd 100644
--- a/src/stories/getting-started.stories.mdx
+++ b/src/stories/getting-started.stories.mdx
@@ -1,5 +1,4 @@
-import { Description } from '@storybook/addon-docs'
-import { Meta } from '@storybook/addon-docs'
+import { Description, Meta } from '@storybook/addon-docs'
 
 <Meta
   title="Getting Started"
diff --git a/src/stories/theming.stories.mdx b/src/stories/theming.stories.mdx
index b411be57..8371621a 100644
--- a/src/stories/theming.stories.mdx
+++ b/src/stories/theming.stories.mdx
@@ -1,5 +1,4 @@
-import { Description } from '@storybook/addon-docs'
-import { Meta } from '@storybook/addon-docs'
+import { Description, Meta } from '@storybook/addon-docs'
 
 <Meta title="Theming" parameters={{ options: { showToolbar: false } }} />
 
diff --git a/src/styles/global/components.scss b/src/styles/global/components.scss
index c9c2a9a0..bf69a4a5 100644
--- a/src/styles/global/components.scss
+++ b/src/styles/global/components.scss
@@ -7,8 +7,6 @@
 @import "src/components/common/Footer/footer.scss";
 @import "src/components/common/SearchInput/search-input.scss";
 @import "src/components/common/Navbar/navbar.scss";
-@import "src/components/regionalization/RegionalizationBar/regionalization-bar.scss";
-@import "src/components/regionalization/RegionalizationButton/regionalization-button.scss";
 
 // Search
 @import "src/components/search/Filter/filter.scss";