diff --git a/stories/Accordion/Accordion.mdx b/stories/Accordion/Accordion.mdx
index caad8b7f8..9451fcf7d 100644
--- a/stories/Accordion/Accordion.mdx
+++ b/stories/Accordion/Accordion.mdx
@@ -8,6 +8,8 @@ import {
   Default,
   KeepOnlyOneOpen,
 } from './Accordion.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm';
+
 
 <Meta title="Accordion" component={Accordion}  />
 
@@ -39,4 +41,6 @@ import Accordion from '@catho/quantum/Accordion';
 
 <Canvas>
   <Story of={KeepOnlyOneOpen} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Accordion" /> 
diff --git a/stories/Alert/Alert.mdx b/stories/Alert/Alert.mdx
index 70782fdc6..8dc3874de 100644
--- a/stories/Alert/Alert.mdx
+++ b/stories/Alert/Alert.mdx
@@ -12,6 +12,9 @@ import {
   WithIcon
 } from './Alert.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Alert" component={Alert}  />
 
 <Header title="Alert">
@@ -60,4 +63,6 @@ import Alert from '@catho/quantum/Alert';
 
 <Canvas>
   <Story of={WithIcon} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Alert" />
diff --git a/stories/AutoComplete/AutoComplete.mdx b/stories/AutoComplete/AutoComplete.mdx
index ba533364f..179e263ec 100644
--- a/stories/AutoComplete/AutoComplete.mdx
+++ b/stories/AutoComplete/AutoComplete.mdx
@@ -2,6 +2,8 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import { Header } from '../shared';
 import AutoComplete from '../../components/AutoComplete';
 import { Default, Required, Disabled, WithHelperText, WithLabel, WithError, WithSkin } from './AutoComplete.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Forms/AutoComplete" component={AutoComplete}  />
 
@@ -64,3 +66,5 @@ import AutoComplete from '@catho/quantum/AutoComplete';
 <Canvas>
   <Story of={WithSkin}/>
 </Canvas>
+
+<EvaluationForm componentName="AutoComplete" />
diff --git a/stories/Avatar/Avatar.mdx b/stories/Avatar/Avatar.mdx
index 77e5e3017..26d3217b7 100644
--- a/stories/Avatar/Avatar.mdx
+++ b/stories/Avatar/Avatar.mdx
@@ -12,6 +12,8 @@ import {
   WithHrefAndToggleAndIcon,
   CombinedWithPopover,
 } from './Avatar.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Avatar" component={Avatar}  />
 
@@ -68,3 +70,5 @@ import Avatar from '@catho/quantum/Avatar';
 <Canvas>
   <Story of={CombinedWithPopover} />
 </Canvas>
+
+<EvaluationForm componentName="Avatar" />
diff --git a/stories/Badge/Badge.mdx b/stories/Badge/Badge.mdx
index d5ebd7260..60b778f1a 100644
--- a/stories/Badge/Badge.mdx
+++ b/stories/Badge/Badge.mdx
@@ -12,6 +12,8 @@ import {
   Dot,
   Inverted
 } from './Badge.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Badge" component={Badge} />
 
@@ -69,3 +71,4 @@ import Badge from '@catho/quantum/Badge';
   <Story of={Inverted} />
 </Canvas>
 
+<EvaluationForm componentName="Badge" />
diff --git a/stories/Breadcrumbs/Breadcrumbs.mdx b/stories/Breadcrumbs/Breadcrumbs.mdx
index fca0a9963..10d077302 100644
--- a/stories/Breadcrumbs/Breadcrumbs.mdx
+++ b/stories/Breadcrumbs/Breadcrumbs.mdx
@@ -8,6 +8,9 @@ import {
   Default
 } from './Breadcrumbs.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Breadcrumbs" component={Breadcrumbs} />
 
 <Header title="Breadcrumbs">
@@ -36,3 +39,5 @@ import Breadcrumbs from '@catho/quantum/Breadcrumbs';
 <Canvas>
   <Story of={Default} />
 </Canvas>
+
+<EvaluationForm componentName="Breadcrumbs" />
diff --git a/stories/Breakpoints/Breakpoints.mdx b/stories/Breakpoints/Breakpoints.mdx
index 858a6089f..1232cb2a1 100644
--- a/stories/Breakpoints/Breakpoints.mdx
+++ b/stories/Breakpoints/Breakpoints.mdx
@@ -3,6 +3,8 @@ import { Meta } from '@storybook/addon-docs';
 import { Alert } from '../../components';
 import { Header } from '../shared'
 import { StyledDivExample } from './styles'
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Breakpoints" />
 
@@ -61,4 +63,6 @@ const StyledDiv = styled.div`
 
 Test the div in different sizes:
 
-<StyledDivExample>Test me in different sizes =)</StyledDivExample>
\ No newline at end of file
+<StyledDivExample>Test me in different sizes =)</StyledDivExample>
+
+<EvaluationForm componentName="Breakpoints" />
\ No newline at end of file
diff --git a/stories/Button/Button.mdx b/stories/Button/Button.mdx
index d7953ee0a..d877fba43 100644
--- a/stories/Button/Button.mdx
+++ b/stories/Button/Button.mdx
@@ -11,6 +11,9 @@ import {
   WithIcon
 } from './Button.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Button" component={Button}  />
 
 <Header title="Button">
@@ -76,3 +79,5 @@ The full catalogue of icons can be found [here](?path=/docs/foundation-icons--pa
 <Canvas>
   <Story of={WithIcon}/>
 </Canvas>
+
+<EvaluationForm componentName="Button" />
diff --git a/stories/Button/SocialButton.mdx b/stories/Button/SocialButton.mdx
index dc251cb21..8ffd6de61 100644
--- a/stories/Button/SocialButton.mdx
+++ b/stories/Button/SocialButton.mdx
@@ -5,6 +5,8 @@ import {
   Google,
   Facebook
 } from './SocialButton.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Button/Social" component={SocialButton}  />
 
@@ -38,4 +40,6 @@ import SocialButton from '@catho/quantum/SocialButton';
 
 <Canvas>
   <Story of={Facebook}/>
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="SocialButton" />
diff --git a/stories/Card/Card.mdx b/stories/Card/Card.mdx
index fff1a4b85..0bbe9a16b 100644
--- a/stories/Card/Card.mdx
+++ b/stories/Card/Card.mdx
@@ -6,6 +6,8 @@ import {
   CompoundComponentsList,
   AdvancedCard
 } from './Card.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Card" component={Card}  />
 
@@ -66,3 +68,5 @@ We provide a few components to build your Card.
 <Canvas>
   <Story of={AdvancedCard}/>
 </Canvas>
+
+<EvaluationForm componentName="Card" />
diff --git a/stories/Carousel/Carousel.mdx b/stories/Carousel/Carousel.mdx
index dbf76dd38..e479e1cc0 100644
--- a/stories/Carousel/Carousel.mdx
+++ b/stories/Carousel/Carousel.mdx
@@ -4,6 +4,8 @@ import Carousel from '../../components/Carousel';
 import Alert from '../../components/Alert';
 import { Default, WithSmallCards, WithLargeCards, WithEllipsisForLongTexts } from './Carousel.stories.jsx';
 import { Header } from '../shared';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Carousel" component={Carousel}  />
 
@@ -83,3 +85,5 @@ import Carousel from '@catho/quantum/Carousel';
 <Canvas>
   <Story of={WithEllipsisForLongTexts}/>
 </Canvas>
+
+<EvaluationForm componentName="Carousel" />
diff --git a/stories/ChargeBar/ChargeBar.mdx b/stories/ChargeBar/ChargeBar.mdx
index 27a34aae8..eeaafe7f4 100644
--- a/stories/ChargeBar/ChargeBar.mdx
+++ b/stories/ChargeBar/ChargeBar.mdx
@@ -3,6 +3,8 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import { Header } from '../shared';
 import ChargeBar from '../../components/ChargeBar';
 import { Default, WithSkin, WithProgressPercent, WithLabel } from './ChargeBar.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="ChargeBar" component={ChargeBar}  />
 
@@ -47,3 +49,5 @@ import ChargeBar from '@catho/quantum/ChargeBar';
 <Canvas>
   <Story of={WithLabel}/>
 </Canvas>
+
+<EvaluationForm componentName="ChargeBar" />
diff --git a/stories/Checkbox/Checkbox.mdx b/stories/Checkbox/Checkbox.mdx
index d5074941b..4de3b0a73 100644
--- a/stories/Checkbox/Checkbox.mdx
+++ b/stories/Checkbox/Checkbox.mdx
@@ -9,6 +9,8 @@ import {
   Checked,
   Disabled,
 } from './Checkbox.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Forms/Checkbox" component={Checkbox}  />
 
@@ -46,4 +48,6 @@ import Checkbox from '@catho/quantum/Checkbox';
 
 <Canvas>
   <Story of={Disabled} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Checkbox" />
diff --git a/stories/Checkbox/CheckboxGroup.mdx b/stories/Checkbox/CheckboxGroup.mdx
index 6251bb887..8aca31990 100644
--- a/stories/Checkbox/CheckboxGroup.mdx
+++ b/stories/Checkbox/CheckboxGroup.mdx
@@ -14,6 +14,9 @@ import {
   ControlledGroup,
 } from './CheckboxGroup.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/Checkbox/CheckboxGroup" component={CheckboxGroup}  />
 
 <Header title="Checkbox Group">
@@ -80,4 +83,6 @@ import CheckboxGroup from '@catho/quantum/Checkbox/CheckboxGroup';
 
 <Canvas>
   <Story of={ControlledGroup} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="CheckboxGroup" />
diff --git a/stories/Colors/Colors.mdx b/stories/Colors/Colors.mdx
index be3c0b636..f1465a934 100644
--- a/stories/Colors/Colors.mdx
+++ b/stories/Colors/Colors.mdx
@@ -2,6 +2,8 @@ import { Meta } from '@storybook/addon-docs';
 
 import { Header } from '../shared'
 import Colors from './Colors'
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Colors" />
 
@@ -37,3 +39,5 @@ console.log(Colors.secondary['500'])
 ```
 ## <a id="examples"></a>Examples
 <Colors />
+
+<EvaluationForm componentName="Colors" />
diff --git a/stories/Dialog/Dialog.mdx b/stories/Dialog/Dialog.mdx
index 6cde9c581..ad8c3be79 100644
--- a/stories/Dialog/Dialog.mdx
+++ b/stories/Dialog/Dialog.mdx
@@ -6,6 +6,9 @@ import {
   CloseOnTime,
   DisableClickOutside
 } from './Dialog.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 
 <Meta title="Dialog" component={Dialog}  />
 
@@ -93,3 +96,6 @@ export default function SimpleDialog() {
 <Canvas withSource="none">
   <Story of={DisableClickOutside}/>
 </Canvas>
+
+
+<EvaluationForm componentName="Dialog" />
diff --git a/stories/Dropdown/Dropdown.mdx b/stories/Dropdown/Dropdown.mdx
index a7708c29e..a8de2837b 100644
--- a/stories/Dropdown/Dropdown.mdx
+++ b/stories/Dropdown/Dropdown.mdx
@@ -14,6 +14,9 @@ import {
   Controlled
 } from './Dropdown.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/Dropdown" component={Dropdown}  />
 
 <Header title="Dropdown">
@@ -99,4 +102,6 @@ import Dropdown from '@catho/quantum/Dropdown';
 
 <Canvas>
   <Story of={Controlled}/>
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Dropdown" />
diff --git a/stories/DropdownLight/DropdownLight.mdx b/stories/DropdownLight/DropdownLight.mdx
index 5ff788c7f..06bd3824c 100644
--- a/stories/DropdownLight/DropdownLight.mdx
+++ b/stories/DropdownLight/DropdownLight.mdx
@@ -18,6 +18,9 @@ import {
   SelectedItemControlled
 } from './DropdownLight.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/DropdownLight" component={DropdownLight}  />
 
 <Header title="DropdownLight">
@@ -106,3 +109,4 @@ import DropdownLight from '@catho/quantum/DropdownLight';
   <Story of={SelectedItemControlled}/>
 </Canvas>
 
+<EvaluationForm componentName="DropdownLight" />
diff --git a/stories/Form/Form.mdx b/stories/Form/Form.mdx
index da446b2b7..d1ec43c36 100644
--- a/stories/Form/Form.mdx
+++ b/stories/Form/Form.mdx
@@ -8,6 +8,9 @@ import {
   WithCustomValidation
 } from './Form.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/Form" component={Form}  />
 
 <Header title="Form">
@@ -60,4 +63,6 @@ messages.
 
 <Canvas>
   <Story of={WithCustomValidation}/>
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Form" />
diff --git a/stories/Grid/Grid.mdx b/stories/Grid/Grid.mdx
index 80f7f9065..641e8d9f9 100644
--- a/stories/Grid/Grid.mdx
+++ b/stories/Grid/Grid.mdx
@@ -3,6 +3,8 @@ import { Meta } from '@storybook/addon-docs';
 
 import Header from '../shared/Header';
 import { SizesTable, HorizontalExample, MobileDesktopExample, NoGuttersExample, HideExample, OffsetExample, OffsetWithTwoColumnsExample } from './Grid';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Grid" />
 
@@ -242,4 +244,7 @@ When setting a "offset" value, it is important to consider the space occupied by
 
 In the example above, the space occupied by the first column is the sum of the "small" and "small-offset" props. The result must also be added to the desired gap value for the column.
 Therefore, the value of the "offset" prop of the second column is composed of:
-2 ("small" of the 1st column) + 1 ("small-offset" of the 1st column) + 2 (desired gap betwen the 2nd column) = 5.
\ No newline at end of file
+2 ("small" of the 1st column) + 1 ("small-offset" of the 1st column) + 2 (desired gap betwen the 2nd column) = 5.
+
+
+<EvaluationForm componentName="Grid" />
\ No newline at end of file
diff --git a/stories/Hamburger/Hamburguer.mdx b/stories/Hamburger/Hamburguer.mdx
index 7ea0c22f9..36c7a8e38 100644
--- a/stories/Hamburger/Hamburguer.mdx
+++ b/stories/Hamburger/Hamburguer.mdx
@@ -2,6 +2,8 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import { Header } from '../shared';
 import { Hamburger } from '../../components';
 import { Default, Opened, Inverted, WithNotificationIcon } from './Hamburger.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Hamburger" component={Hamburger} />
 
@@ -45,4 +47,6 @@ import { Hamburger } from '@catho/quantum/Hamburger';
 
 <Canvas>
   <Story of={WithNotificationIcon} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Hamburguer" />
diff --git a/stories/Hooks/Hooks.mdx b/stories/Hooks/Hooks.mdx
index cedb1bdfd..328e8cb44 100644
--- a/stories/Hooks/Hooks.mdx
+++ b/stories/Hooks/Hooks.mdx
@@ -2,11 +2,14 @@ import { Meta } from '@storybook/addon-docs';
 
 import { Header } from '../shared';
 import { Alert } from '../../components';
+import EvaluationForm from '../../stories/shared/EvaluationForm';
+
 
 <Meta title="Hooks/useMaxWithMediaQuery" />
 
 <Header title="UseMaxWithMediaQuery" />
 
+
 - [Importing](#importing)
 - [Usage](#usage)
 
@@ -64,4 +67,6 @@ const Component = () => {
 }
 
 export default Component;
-```
\ No newline at end of file
+```
+
+<EvaluationForm componentName="Hooks/useMaxWithMediaQuery" /> 
diff --git a/stories/Icon/Icon.mdx b/stories/Icon/Icon.mdx
index 27443198b..9c4f130b9 100644
--- a/stories/Icon/Icon.mdx
+++ b/stories/Icon/Icon.mdx
@@ -3,6 +3,8 @@ import { Meta, Story } from '@storybook/addon-docs';
 import Header from '../shared/Header';
 import { ExampleIcons, ExampleIncorrectIcons } from './ExampleIcons';
 import Catalogue from './Catalogue';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Icons" />
 
@@ -65,4 +67,6 @@ element and no icon will render.
 
 ### Available Icons
 
-<Catalogue/>
\ No newline at end of file
+<Catalogue/>
+
+<EvaluationForm componentName="Icons" />
\ No newline at end of file
diff --git a/stories/InfiniteScroll/InfiniteScroll.mdx b/stories/InfiniteScroll/InfiniteScroll.mdx
index acdbba16e..c20cdf430 100644
--- a/stories/InfiniteScroll/InfiniteScroll.mdx
+++ b/stories/InfiniteScroll/InfiniteScroll.mdx
@@ -10,6 +10,9 @@ import {
   WithLoaderIndicator
 } from './InfiniteScroll.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="InfiniteScroll" component={InfiniteScroll}  />
 
 <Header title="InfiniteScroll">
@@ -102,4 +105,6 @@ export default function InfiniteScrollWithLoader() {
 ```
 <Canvas withSource="none">
   <Story of={WithLoaderIndicator} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="InfiniteScroll" />
diff --git a/stories/Input/Input.mdx b/stories/Input/Input.mdx
index 90fee2e95..54821c31b 100644
--- a/stories/Input/Input.mdx
+++ b/stories/Input/Input.mdx
@@ -22,6 +22,10 @@ import {
   ControlledExample,
 } from './Input.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
+
 <Meta title="Forms/Input" component={Input}  />
 
 <Header title="Input">
@@ -125,3 +129,5 @@ import Input from '@catho/quantum/Input';
 <Canvas>
   <Story of={ControlledExample} />
 </Canvas>
+
+<EvaluationForm componentName="Input" />
diff --git a/stories/Introduction/Introduction.mdx b/stories/Introduction/Introduction.mdx
index 1c42d2368..ff43050de 100644
--- a/stories/Introduction/Introduction.mdx
+++ b/stories/Introduction/Introduction.mdx
@@ -2,6 +2,7 @@ import { Meta } from '@storybook/addon-docs';
 
 import { Alert } from '../../components';
 import { Header } from '../shared'
+import EvaluationForm from '../../stories/shared/EvaluationForm'
 
 <Meta title="Introduction/GettingStarted" />
 
@@ -39,4 +40,6 @@ yarn add @catho/quantum
 import Button from '@catho/quantum/Button';
 
 export default () => <Button>Click here!</Buttom>;
-```
\ No newline at end of file
+```
+
+<EvaluationForm componentName="Introduction" />
\ No newline at end of file
diff --git a/stories/Link/Link.mdx b/stories/Link/Link.mdx
index bee82cf12..379e0c0a1 100644
--- a/stories/Link/Link.mdx
+++ b/stories/Link/Link.mdx
@@ -9,6 +9,9 @@ import {
   Dark,
 } from './Link.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta 
   title="Foundation/Link"
   component={Link}
@@ -44,4 +47,6 @@ import Link from '@catho/quantum/Link';
 
 <Canvas>
   <Story of={Dark}/>
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Link" />
diff --git a/stories/List/List.mdx b/stories/List/List.mdx
index 10a0f4c33..8f9b0f385 100644
--- a/stories/List/List.mdx
+++ b/stories/List/List.mdx
@@ -13,6 +13,9 @@ import {
   WithIcons,
 } from './List.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta 
   title="Foundation/List"
   component={List}
@@ -66,4 +69,6 @@ import List from '@catho/quantum/List';
 
 <Canvas>
   <Story of={WithIcons} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="List" />
diff --git a/stories/Loaders/CircularLoader.mdx b/stories/Loaders/CircularLoader.mdx
index 6c7a2578b..9806f0248 100644
--- a/stories/Loaders/CircularLoader.mdx
+++ b/stories/Loaders/CircularLoader.mdx
@@ -3,6 +3,8 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import Header from '../shared/Header';
 import CircularLoader from '../../components/CircularLoader';
 import { Default, WithSkin, WithSize } from './CircularLoader.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Loaders/CircularLoader" component={CircularLoader} />
 
@@ -40,4 +42,6 @@ import CircularLoader from '@catho/quantum/CircularLoader';
 
 <Canvas>
   <Story of={WithSize}/>
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="CircularLoader" />
diff --git a/stories/Loaders/ProgressBar.mdx b/stories/Loaders/ProgressBar.mdx
index b3417bee1..8c2865600 100644
--- a/stories/Loaders/ProgressBar.mdx
+++ b/stories/Loaders/ProgressBar.mdx
@@ -3,6 +3,8 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import Header from '../shared/Header';
 import ProgressBar from '../../components/ProgressBar';
 import { Default, WithProgressPercent, WithProgressText, WithLabel} from './ProgressBar.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Loaders/ProgressBar" component={ProgressBar} />
 
@@ -48,3 +50,5 @@ import ProgressBar from '@catho/quantum/ProgressBar';
 <Canvas>
   <Story of={WithLabel}/>
 </Canvas>
+
+<EvaluationForm componentName="ProgressBar" />
diff --git a/stories/Loaders/Skeleton.mdx b/stories/Loaders/Skeleton.mdx
index 6789f551b..6aba6c4e3 100644
--- a/stories/Loaders/Skeleton.mdx
+++ b/stories/Loaders/Skeleton.mdx
@@ -4,6 +4,8 @@ import Header from '../shared/Header';
 
 import Skeleton from '../../components/Skeleton';
 import { Default, WithType, WithSize } from './Skeleton.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Loaders/Skeleton" component={Skeleton} />
 
@@ -43,3 +45,5 @@ import Skeleton from '@catho/quantum/Skeleton';
   <Story of={WithSize}/>
 </Canvas>
 
+<EvaluationForm componentName="Skeleton" />
+
diff --git a/stories/Modal/Modal.mdx b/stories/Modal/Modal.mdx
index c9cf7d2e2..f8bee1bcc 100644
--- a/stories/Modal/Modal.mdx
+++ b/stories/Modal/Modal.mdx
@@ -9,6 +9,9 @@ import {
   AdvancedModal,
 } from './Modal.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Modal" component={Modal} />
 
 <Header title="Modal">
@@ -112,6 +115,7 @@ export default function AdvancedModal() {
   <Story of={AdvancedModal}/>
 </Canvas>
 
+<EvaluationForm componentName="Modal" />
 
 
 
diff --git a/stories/Pagination/Pagination.mdx b/stories/Pagination/Pagination.mdx
index 8c707998d..7d899248e 100644
--- a/stories/Pagination/Pagination.mdx
+++ b/stories/Pagination/Pagination.mdx
@@ -4,6 +4,9 @@ import Header from '../shared/Header';
 import { Alert } from '../../components';
 import Pagination from '../../components/Pagination';
 import { Default, WithSeveralPagesAndActivePage, WithCustomNextAndPrevButtonText, HideLastPage, WithPageHref, MobileWithCustomHelperText, ControlledPagination } from './Pagination.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 
 <Meta title="Pagination" component={Pagination} />
 
@@ -72,4 +75,6 @@ import Pagination from '@catho/quantum/Pagination';
 
 <Canvas>
   <Story of={ControlledPagination} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Pagination" />
diff --git a/stories/Popover/Popover.mdx b/stories/Popover/Popover.mdx
index d7e4f222c..78909f849 100644
--- a/stories/Popover/Popover.mdx
+++ b/stories/Popover/Popover.mdx
@@ -11,6 +11,8 @@ import {
   Inverted,
   Visible
 } from './Popover.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Popover" component={Popover} />
 
@@ -60,4 +62,6 @@ import Popover from '@catho/quantum/Popover';
 
 <Canvas>
   <Story of={Visible} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Popover" />
diff --git a/stories/RadioGroup/RadioGroup.mdx b/stories/RadioGroup/RadioGroup.mdx
index a55b107a7..5429b678f 100644
--- a/stories/RadioGroup/RadioGroup.mdx
+++ b/stories/RadioGroup/RadioGroup.mdx
@@ -13,6 +13,9 @@ import {
   Button,
 } from './RadioGroup.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/RadioGroup" component={RadioGroup}  />
 
 <Header title="Radio group">
@@ -68,3 +71,5 @@ import RadioGroup from '@catho/quantum/RadioGroup';
 <Canvas>
   <Story of={Inline} />
 </Canvas>
+
+<EvaluationForm componentName="RadioGroup" />
diff --git a/stories/RangeSlider/RangeSlider.mdx b/stories/RangeSlider/RangeSlider.mdx
index 79f28dd9c..bd9a7eb21 100644
--- a/stories/RangeSlider/RangeSlider.mdx
+++ b/stories/RangeSlider/RangeSlider.mdx
@@ -14,6 +14,9 @@ import {
   ControlledExample,
 } from './RangeSlider.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/RangeSlider" component={RangeSlider}  />
 
 <Header title="RangeSlider">
@@ -85,4 +88,6 @@ The same is applied when an object is used in value prop.
 
 <Canvas>
   <Story of={ControlledExample} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="RangeSlider" />
diff --git a/stories/Score/Score.mdx b/stories/Score/Score.mdx
index 2806413e4..b9305e8d1 100644
--- a/stories/Score/Score.mdx
+++ b/stories/Score/Score.mdx
@@ -10,6 +10,8 @@ import {
   WithSkin,
   WithCustomText
 } from './Score.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="RingGraph/Score" component={Score}  />
 
@@ -52,4 +54,6 @@ import { Score } from '@catho/quantum';
 
 <Canvas>
   <Story of={WithCustomText} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="Score" />
diff --git a/stories/SegmentedControl/SegmentedControl.mdx b/stories/SegmentedControl/SegmentedControl.mdx
index 3b17d0c2a..f538cbcc3 100644
--- a/stories/SegmentedControl/SegmentedControl.mdx
+++ b/stories/SegmentedControl/SegmentedControl.mdx
@@ -11,6 +11,8 @@ import {
   DarkThemeWith3ItemsAndNoItemChecked,
   DarkThemeWith5ItemsAndNoItemChecked
 } from './SegmentedControl.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="SegmentedControl" component={SegmentedControl} />
 
@@ -61,3 +63,5 @@ import SegmentedControl from '@catho/quantum/SegmentedControl';
 <Canvas>
   <Story of={DarkThemeWith5ItemsAndNoItemChecked} />
 </Canvas>
+
+<EvaluationForm componentName="SegmentedControl" />
diff --git a/stories/SnackBar/SnackBar.mdx b/stories/SnackBar/SnackBar.mdx
index 0d9210a11..b20c29540 100644
--- a/stories/SnackBar/SnackBar.mdx
+++ b/stories/SnackBar/SnackBar.mdx
@@ -14,6 +14,8 @@ import {
   Inverted,
   WithActionTrigger
 } from './SnackBar.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="SnackBar" component={SnackBar} />
 
@@ -198,4 +200,6 @@ export default function Template () {
 
 <Canvas withSource="none">
   <Story of={WithActionTrigger} />
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="SnackBar" />
diff --git a/stories/Socials/Socials.mdx b/stories/Socials/Socials.mdx
index 43c947ee1..b49e9380f 100644
--- a/stories/Socials/Socials.mdx
+++ b/stories/Socials/Socials.mdx
@@ -10,6 +10,8 @@ import {
   WithSize,
   AllItems
 } from './Socials.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Socials" component={Socials} />
 
@@ -56,6 +58,7 @@ import Socials from '@catho/quantum/Socials';
 </Canvas>
 
 
+<EvaluationForm componentName="Socials" />
 
 
 
diff --git a/stories/Stepper/Stepper.mdx b/stories/Stepper/Stepper.mdx
index a6438c41a..c3d5044bd 100644
--- a/stories/Stepper/Stepper.mdx
+++ b/stories/Stepper/Stepper.mdx
@@ -13,6 +13,9 @@ import {
   WithI18n,
   WithTotal
 } from './Stepper.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 
 <Meta title="RingGraph/Stepper" component={Stepper} />
 
@@ -77,6 +80,8 @@ import Stepper from '@catho/quantum/Stepper';
   <Story of={WithI18n} />
 </Canvas>
 
+<EvaluationForm componentName="Stepper" />
+
 
 
 
diff --git a/stories/TabbedView/TabbedView.mdx b/stories/TabbedView/TabbedView.mdx
index 9c8fa91ec..e178cd8a0 100644
--- a/stories/TabbedView/TabbedView.mdx
+++ b/stories/TabbedView/TabbedView.mdx
@@ -11,6 +11,8 @@ import {
   ActiveTab,
   WithIconAndBadge
 } from './TabbedView.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="TabbedView" component={TabbedView} />
 
@@ -75,5 +77,6 @@ import { TabbedView } from '@catho/quantum/TabbedView';
   <Story of={WithIconAndBadge} />
 </Canvas>
 
+<EvaluationForm componentName="TabbedView" />
 
 
diff --git a/stories/Tag/Tag.mdx b/stories/Tag/Tag.mdx
index 59c6b512a..452eb659e 100644
--- a/stories/Tag/Tag.mdx
+++ b/stories/Tag/Tag.mdx
@@ -12,6 +12,8 @@ import {
   Bold,
   WithSize
 } from './Tag.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Tag" component={Tag} />
 
@@ -70,3 +72,4 @@ import Tag from '@catho/quantum/Tag';
 </Canvas>
 
 
+<EvaluationForm componentName="Tag" />
diff --git a/stories/TextArea/TextArea.mdx b/stories/TextArea/TextArea.mdx
index ae362bd12..c9eeae94a 100644
--- a/stories/TextArea/TextArea.mdx
+++ b/stories/TextArea/TextArea.mdx
@@ -2,6 +2,8 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import { Header } from '../shared';
 import TextArea from '../../components/TextArea';
 import { Default, Disabled, Required, WithAutoSize, WithCustomAutoSize, WithHelperText, WithError, WithLabel } from './TextArea.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Forms/TextArea" component={TextArea}  />
 
@@ -70,4 +72,6 @@ import TextArea from '@catho/quantum/TextArea';
 
 <Canvas>
   <Story of={WithError}/>
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<EvaluationForm componentName="TextArea" />
diff --git a/stories/Theme/Theme.mdx b/stories/Theme/Theme.mdx
index a79b09e10..70dd19aca 100644
--- a/stories/Theme/Theme.mdx
+++ b/stories/Theme/Theme.mdx
@@ -3,6 +3,8 @@ import { Meta } from '@storybook/addon-docs';
 import { Header } from '../shared'
 
 import { BreakpointsProperties, ColorIntensity, SpacingValues } from './Theme';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Theme" />
 
@@ -129,4 +131,6 @@ badge: {
     },
   },
 }
-```
\ No newline at end of file
+```
+
+<EvaluationForm componentName="Theme" />
\ No newline at end of file
diff --git a/stories/Toggle/Toogle.mdx b/stories/Toggle/Toogle.mdx
index bab8413d2..23336f278 100644
--- a/stories/Toggle/Toogle.mdx
+++ b/stories/Toggle/Toogle.mdx
@@ -3,6 +3,8 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import Toggle from '../../components/Toggle';
 import { Default, Checked, WithLeftLabel, WithRightLabel } from './Toggle.stories.jsx';
 import { Header } from '../shared';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Forms/Toggle" component={Toggle}  />
 
@@ -50,3 +52,4 @@ import Toggle from '@catho/quantum/Toggle';
 </Canvas>
 
 
+<EvaluationForm componentName="Toggle" />
diff --git a/stories/Tooltip/Tooltip.mdx b/stories/Tooltip/Tooltip.mdx
index 9b242b7df..c8b6f2eda 100644
--- a/stories/Tooltip/Tooltip.mdx
+++ b/stories/Tooltip/Tooltip.mdx
@@ -9,6 +9,8 @@ import {
   Visible,
 } from './Tooltip.stories.jsx';
 import { Header } from '../shared';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta
   title="Tooltip"
@@ -63,3 +65,5 @@ import Tooltip from '@catho/quantum/Tooltip';
 <Canvas>
   <Story of={Visible} />
 </Canvas>
+
+<EvaluationForm componentName="Tooltip" />
diff --git a/stories/Typography/Components.jsx b/stories/Typography/Components.jsx
index e1b6dfbd2..b33cc10ff 100644
--- a/stories/Typography/Components.jsx
+++ b/stories/Typography/Components.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 import styled from 'styled-components';
 
 import { Title, Subtitle, Blockquote } from '../../components/GlobalStyle';
diff --git a/stories/Typography/Typography.mdx b/stories/Typography/Typography.mdx
index 96cfdde67..038ba42c3 100644
--- a/stories/Typography/Typography.mdx
+++ b/stories/Typography/Typography.mdx
@@ -2,6 +2,8 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import { Header } from '../shared'
 import { Headings, Texts, Lists } from './Components'
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Typography" />
 
@@ -66,4 +68,6 @@ const exampleItemsDefault = [
 ];
 ```
 
-<Lists />
\ No newline at end of file
+<Lists />
+
+<EvaluationForm componentName="Typography" />
diff --git a/stories/shared/EvaluationForm/index.jsx b/stories/shared/EvaluationForm/index.jsx
new file mode 100644
index 000000000..00d6e7f4c
--- /dev/null
+++ b/stories/shared/EvaluationForm/index.jsx
@@ -0,0 +1,38 @@
+import { Unstyled } from '@storybook/addon-docs';
+import styled from 'styled-components';
+import Accordion from '../../../components/Accordion';
+
+const urlGenerator = (componentName) =>
+  `https://docs.google.com/forms/d/e/1FAIpQLSewdS_VhSt_JSFOxiuiIc-auEj0MQwn_P_WiXYhAEAE1DqJhg/viewform?entry.1112120969=${componentName}`;
+
+const IFrame = styled.iframe`
+  width: 100%;
+  height: 500px;
+  border: 0;
+`;
+
+const EvaluationForm = ({ componentName }) => (
+  <Unstyled>
+    <Accordion
+      items={[
+        {
+          content: (
+            <ul>
+              <li>
+                <IFrame
+                  title="Rate our Documentation"
+                  src={`${urlGenerator(componentName)}`}
+                >
+                  Carregando…
+                </IFrame>
+              </li>
+            </ul>
+          ),
+          title: 'Rate our Documentation ⭐ ',
+        },
+      ]}
+    />
+  </Unstyled>
+);
+
+export default EvaluationForm;