diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/README.md b/packages/web/src/scss/components/UNSTABLE_Footer/README.md
new file mode 100644
index 0000000000..ba33f21eec
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Footer/README.md
@@ -0,0 +1,267 @@
+# UNSTABLE Footer
+
+> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+> Please use it with caution.
+
+The Footer is a highly variable and customizable component. It comes in several
+design variants and provides a handful of building blocks you can use to achieve
+your specific design goals.
+
+## Composition
+
+This is how all supported building blocks of the Footer build up the complete
+composition:
+
+```html
+
+```
+
+All of these blocks are optional, so it's possible to achieve desirable composition.
+
+⚠ The `Footer Content` is currently under development, so it's not part of this component yet.
+
+## Basic Usage
+
+The basic usage of this component could be:
+
+```html
+
+```
+
+### Columns variation
+
+In case you need specific number of columns for each row, you can use separated `Grid` components.
+The number of columns can be set for each breakpoint separately.
+
+```html
+
+```
+
+## Color Variants
+
+Currently, Footer comes in two color variants: **cover** (for light
+backgrounds) and **inverted** (for dark backgrounds). Add `Footer--inverted`
+modifier class to apply inverted background color to Footer.
+
+⚠️ Keep in mind that it is necessary to set all the text and link content to the suitable color variant also.
+
+```html
+
+```
diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss b/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss
new file mode 100644
index 0000000000..97fd968c33
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss
@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../../tools/breakpoint';
+@use 'theme';
+
+.UNSTABLE_Footer {
+ padding-block: theme.$padding-block;
+ background-color: theme.$background-color;
+}
+
+.UNSTABLE_Footer--inverted {
+ background-color: theme.$background-color-inverted;
+}
+
+.UNSTABLE_Footer__copyright {
+ display: flex;
+ flex-direction: column;
+ gap: theme.$gap;
+ justify-content: center;
+
+ @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
+ flex-direction: row;
+ }
+}
diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss
new file mode 100644
index 0000000000..0f8c450cf5
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss
@@ -0,0 +1,8 @@
+@use 'sass:map';
+@use '@tokens' as tokens;
+
+$breakpoints: tokens.$breakpoints;
+$background-color: tokens.$background-cover;
+$background-color-inverted: tokens.$background-inverted;
+$gap: tokens.$space-700;
+$padding-block: tokens.$space-1100 tokens.$space-1000;
diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/index.html b/packages/web/src/scss/components/UNSTABLE_Footer/index.html
new file mode 100644
index 0000000000..54440a4de8
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Footer/index.html
@@ -0,0 +1,998 @@
+{{#> web/layout/plain }}
+
+
+
+
+ Extended Usage with Section Title as a Link and Nested List
+
+
+
+
+
+
+ Usage without Copyright Block
+
+
+
+
+
+
+ Usage with a lot of Blocks and Custom Grid
+
+
+
+
+
+
+ Inverted Color Variant
+
+
+
+
+
+{{/web/layout/plain }}
diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/index.scss b/packages/web/src/scss/components/UNSTABLE_Footer/index.scss
new file mode 100644
index 0000000000..a75550c5f7
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Footer/index.scss
@@ -0,0 +1 @@
+@forward 'UNSTABLE_Footer';
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index 90ecd379ba..b8f3c5582c 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -28,6 +28,7 @@
@forward 'UNSTABLE_Avatar';
@forward 'UNSTABLE_Divider';
@forward 'UNSTABLE_EmptyState';
+@forward 'UNSTABLE_Footer';
@forward 'UNSTABLE_PartnerLogo';
@forward 'UNSTABLE_ProductLogo';
@forward 'UNSTABLE_Section';