diff --git a/.eslintrc b/.eslintrc
index 19f5c0b80..0138c2e29 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -69,11 +69,15 @@
     "linebreak-style": "off",
     "no-debugger": "off",
     "no-alert": "off",
-    "no-use-before-define": "warn",
-    "no-unused-vars": [
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
       "warn",
       {
-        "argsIgnorePattern": "res|next|^err"
+        "argsIgnorePattern": "res|next|^err|^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
       }
     ],
     "prefer-const": [
@@ -110,20 +114,8 @@
     "consistent-return": "off",
     "jsx-a11y/accessible-emoji": "off",
     "radix": "off",
-    "no-shadow": [
-      2,
-      {
-        "hoist": "all",
-        "allow": [
-          "resolve",
-          "reject",
-          "done",
-          "next",
-          "err",
-          "error"
-        ]
-      }
-    ],
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["warn"],
     "quotes": [
       2,
       "single",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3852ea521..b56da700e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,193 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.28] - 29.09.2022
+
+## Added
+
+- Add `disabled` for Dropdown options
+# [2.5.27] - 04.08.2022
+
+## Added
+
+- Changed the color of the text in the footer for Previews from fixed value to a value from the theme colors
+
+# [2.5.26] - 21.07.2022
+
+## Added
+
+- Add `hasItemEntries` prop for Table component
+
+# [2.5.25] - 04.04.2022
+
+## Added
+
+- Add `displayFormat` prop for DayPicker component
+
+# [2.5.24] - 09.03.2022
+
+## Added
+
+- New `useAnalytics` hook as an alternative to `AnalyticsComponent`
+
+# [2.5.23] - 21.02.2022
+
+## Change
+
+- Buy button tag name on paywall previews
+
+# [2.5.22] - 04.02.2022
+
+## Added
+
+- Option in column table to make fields(columns) editable
+- onBlur function to trigger persa when input and textarea are focused-out
+
+# [2.5.21] - 25.01.2022
+
+## Change
+
+- Styling changes in preview templates for restricted asset
+- FooterText component refactored
+
+# [2.5.20] - 21.01.2022
+
+## Fixes
+
+- TextArea by providing the required props
+
+# [2.5.19] - 21.01.2022
+
+## Added
+
+- Handlers for Input, TextArea, Pagination, Accordion and Switch.
+- Tagging Paywall previews
+
+## Fixes
+
+- TabNavigation handler type
+
+# [2.5.18] - 10.01.2022
+
+## Added
+
+- Handlers for Checkbox, Radiobutton, Daypicker and Datepicker.
+- Handler for selected Tab change.
+
+# [2.5.17] - 12.11.2021
+
+## Added
+
+- Tagging for StepWizard
+
+## Fixes
+
+- Dropdown component tag sent in tracker
+
+# [2.5.16] - 12.11.2021
+
+## Added
+
+- Analytics handler for dropdown component
+- Tagging for pagination and navbar
+
+# [2.5.15] - 02.11.2021
+
+## Fixes
+
+- Tab component import bug
+
+### Change
+
+- Accordion component to be analytics ready
+
+# [2.5.14] - 27.10.2021
+
+## Added
+
+- Analytics handler for button component
+
+# [2.5.13] - 05-10-2021
+
+## Added
+
+- AnalyticsProps type to the components in index.d.ts file.
+
+# [2.5.12] - 28-09-2021
+
+## Added
+
+- Explicit exports for components, types and interfaces from `src/analytics`.
+
+# [2.5.11] - 28-09-2021
+
+## Added
+
+- Analytics tracking adds forgotten import for React.
+
+# [2.5.10] - 27-09-2021
+
+### Added
+
+- Analytics tracking props for all components.
+
+# [2.5.9] - 23-09-2021
+
+### Added
+
+- Add another type of datepicker component with dropdown presets
+- Drawer component functionality and design
+
+# [2.5.8] - 19-08-2021
+
+### Change
+
+- Return Accordion panel label when toggling it.
+
+# [2.5.7] - 17-06-2021
+
+### Change
+
+- Changes connected with logo re-branding
+
+# [2.5.6] - 09-04-2021
+
+### Fixes
+
+- Changed width, height and padding-left of Checkbox component's top wrapper to be in `em` instead of `rem`
+
+# [2.5.5] - 22-03-2021
+
+### Change
+
+- Add styling changes for asset restrictions in preview templates
+
+# [2.5.4] - 12-03-2021
+
+### Change
+
+- Add missing className for Switch component in order to externaly style it with styled-components
+
+# [2.5.3] - 23-02-2021
+
+### Fixes
+
+- Daypicker moment type error
+
+# [2.5.2] - 22-01-2021
+
+### Change
+
+- Use pixels instead of rem for font sizes
+
+# [2.5.1] - 15-01-2021
+
+### Added
+
+- Add the possibility to have more than one table button
+
 # [2.5.0] - 12-01-2021
+
 ### Changes
 
 - Change footer text depending on user auth state
diff --git a/index.d.ts b/index.d.ts
index 4570f85ef..d9ddbd48b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -19,7 +19,113 @@ import { FocusedInputShape } from 'react-dates';
 
 export { FocusedInputShape } from 'react-dates';
 
-export interface ContainerProps {
+export type AnalyticsTag = string;
+
+/**
+ * Props present on various components which aid in the tracking of analytics events.
+ */
+export interface AnalyticsProps {
+  /** Unique identifier of the component within the logical page hierarchy. */
+  tag?: AnalyticsTag;
+
+  /** Posiition of the component within a table-like component. */
+  position?: {
+    /** Unique ID of the row (usually what you would use as a key in react). */
+    id: string;
+
+    /** Row index. */
+    row?: number;
+
+    /** Column index or name. */
+    column?: number | string;
+  };
+}
+
+export declare class AnalyticsTracker {
+  registerHandler: (fn: AnalyticsHandlerFn) => void;
+  deregisterHandler: (fn: AnalyticsHandlerFn) => void;
+  track: (event: Event) => void;
+}
+
+export interface AnalyticsContextValue {
+  pages: AnalyticsPage[];
+  tracker: AnalyticsTracker;
+  merchantId: number;
+  ip: string;
+}
+
+export type AnalyticsPageProps = {
+  /** Tag of this page. */
+  tag: AnalyticsTag;
+
+  /** Type of this page. */
+  type: AnalyticsPageType;
+
+  /** Children in the page. */
+  children?: React.ReactNode;
+
+  /** merchant id */
+  merchantId?: number;
+
+  /** user ip address */
+  ip?: string;
+};
+
+export type AnalyticsComponentProps = {
+  children: (context: AnalyticsContextValue) => React.ReactNode;
+};
+
+export declare const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue;
+
+export enum AnalyticsEvents {
+  CLICK = 'click',
+  DROPDOWN_CHANGE = 'dropdown_change',
+  SWITCH_ON = 'switch_on',
+  SWITCH_OFF = 'switch_off',
+  DROPDOWN_SELECT = 'dropdown_select',
+  CHECKBOX_ON = 'checkbox_on',
+  CHECKBOX_OFF = 'checkbox_off',
+  RADIOBUTTON_SELECT = 'radiobutton_select',
+  DATEPICKER_CHANGE = 'datepicker_date_change',
+  DAYPICKER_CHANGE = 'daypicker_date_change',
+  KEYBOARD_EVENT = 'keyboard_event',
+}
+
+export enum AnalyticsComponentType {
+  BUTTON = 'button',
+  DROPDOWN = 'dropdown',
+  SWITCH = 'switch',
+  PAGINATION = 'pagination',
+  ICON = 'icon',
+  LINK = 'link',
+  CHECKBOX = 'checkbox',
+  DATEPICKER = 'datepicker',
+  DAYPICKER = 'daypicker',
+  DATEPICKER_PRESET = 'datepicker_preset',
+  TAB = 'tab',
+  ACCORDION = 'accordion',
+  MODAL = 'modal',
+  INPUT = 'input',
+  TEXTAREA = 'textarea',
+  TAB_NAVIGATION = 'tab_navigation',
+}
+
+export interface Event {
+  // temporarily mark them as strings
+  event: AnalyticsEvents | string;
+  type: AnalyticsComponentType | string;
+  tag: AnalyticsTag;
+  pages: AnalyticsPage[];
+  merchantId?: number;
+  ip?: string;
+}
+
+export type AnalyticsHandlerFn = (event: Record<string, any>) => void;
+
+export declare const AnalyticsPage: FunctionComponent<AnalyticsPageProps>;
+
+export declare const AnalyticsComponent: FunctionComponent<AnalyticsComponentProps>;
+export interface ContainerProps extends AnalyticsProps {
   className?: string;
   columns?: number | string;
   gap?: string;
@@ -34,7 +140,15 @@ export interface ContainerProps {
   alignContent?: string;
 }
 
-export interface CellProps {
+declare type TrackParams = Pick<Event, 'event' | 'type' | 'tag'> &
+  Partial<Pick<Event, 'pages' | 'merchantId' | 'ip'>>;
+
+export declare const useAnalytics: () => {
+  track: (trackParams: TrackParams) => void;
+  trackCallback: (trackParams: TrackParams) => () => void;
+};
+
+export interface CellProps extends AnalyticsProps {
   className?: string;
   width?: number;
   height?: number;
@@ -52,7 +166,7 @@ interface IGrid {
 
 export declare const Grid: IGrid;
 
-export interface CheckboxProps {
+export interface CheckboxProps extends AnalyticsProps {
   label: string;
   id: string;
   name?: string;
@@ -74,7 +188,7 @@ export interface MenuItem {
   smallSize?: boolean;
 }
 
-export interface ModalProps {
+export interface ModalProps extends AnalyticsProps {
   isModalOpen: boolean;
   closeModal: () => any;
   children: ReactNode;
@@ -87,7 +201,7 @@ export declare const Modal: FunctionComponent<ModalProps>;
 
 export type NoteType = 'informative' | 'success' | 'warning' | 'danger';
 
-export interface NoteProps {
+export interface NoteProps extends AnalyticsProps {
   title: string;
   text: string;
   type: NoteType;
@@ -95,7 +209,7 @@ export interface NoteProps {
 
 export declare const Note: FunctionComponent<NoteProps>;
 
-export interface RadioProps {
+export interface RadioProps extends AnalyticsProps {
   label: string;
   id: string;
   name?: string;
@@ -110,11 +224,17 @@ export interface RadioProps {
 
 export declare const Radio: FunctionComponent<RadioProps>;
 
+export interface EditableFields {
+  fn: (props: ColumnFunctionProps) => void;
+  validationSchema: ObjectSchema<any>;
+}
+
 export interface TableColumn<T extends TableRowData> {
   title: string;
   key: string;
   render?: (props: TableColumn$RenderProps<T>) => ReactNode;
   style?: CSSProperties;
+  editable?: EditableFields;
 }
 
 export interface TableRowData extends Object {
@@ -126,6 +246,12 @@ export interface TableColumn$RenderProps<T extends TableRowData, V = any> {
   rowValues: T;
 }
 
+export interface ColumnFunctionProps {
+  value: string;
+  currentValue: string;
+  id: number;
+}
+
 export interface RowAction<T extends TableRowData> {
   icon?: string;
   onClick?: (id: number | string) => any;
@@ -147,7 +273,14 @@ export interface TableOptions<T extends TableRowData> {
   headerSection?: Node | JSX.Element | null;
 }
 
-export interface TableProps<TableData extends TableRowData = TableRowData> {
+interface TableButtonProps extends AnalyticsProps {
+  label: string;
+  icon?: string | ReactNode;
+  onClick: (e: SyntheticEvent) => any;
+  type: string;
+}
+
+export interface TableProps<TableData extends TableRowData = TableRowData> extends AnalyticsProps {
   columns: Array<TableColumn<TableData>>;
   data: Array<TableData>;
   showLoader?: boolean;
@@ -155,13 +288,11 @@ export interface TableProps<TableData extends TableRowData = TableRowData> {
   className?: string;
   style?: CSSProperties;
   options?: Partial<TableOptions<TableData>>;
-  tableButton?: {
-    label: string;
-    icon?: string | Node | JSX.Element;
-    onClick: (e: SyntheticEvent) => any;
-    type: string;
-  };
+  tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
+  editableById?: string;
+  hasItemEntries?: boolean;
+  totalItems?: number;
 }
 
 interface TableState {
@@ -182,7 +313,7 @@ export declare class Table<TableData extends TableRowData> extends Component<
   renderColumns: (data: Array<TableColumn<TableData>>) => ReactNodeArray;
   renderRows: (data: Array<TableData>) => ReactNodeArray;
 }
-interface NavigationTab {
+interface NavigationTab extends AnalyticsProps {
   title: string;
 }
 
@@ -192,7 +323,10 @@ export interface TabContentProps {
   iconModifiers?: Array<string>;
 }
 
-export interface TabNavigationProps<T> extends DivHTMLAttributes<HTMLDivElement>, TabContentProps {
+export interface TabNavigationProps<T>
+  extends DivHTMLAttributes<HTMLDivElement>,
+    TabContentProps,
+    AnalyticsProps {
   tabs: Array<NavigationTab>;
   onTabClick: (index: number) => any;
   selectedTabIndex: number;
@@ -206,7 +340,7 @@ interface TabInfo {
   name: string;
 }
 
-interface TabsProps {
+interface TabsProps extends AnalyticsProps {
   tabs: Array<TabInfo>;
   selectedTabIndex: number;
   onTabClick: (index: number) => void;
@@ -220,7 +354,7 @@ export interface ActionButtonRenderProps {
   closeAccordion: (e?: SyntheticEvent<*>) => void;
 }
 
-export interface AccordionPanel {
+export interface AccordionPanel extends AnalyticsProps {
   label: string;
   icon?: ReactNode;
   iconTooltip?: TooltipProps;
@@ -234,7 +368,7 @@ export interface AccordionProps {
   isExtendable?: boolean;
   width?: string;
   extendWidth?: string;
-  onActivePanelChange?: (index: number) => void;
+  onActivePanelChange?: (index: number, label: string) => void;
   shouldClose?: boolean;
   onRequestClose?: () => void;
 }
@@ -269,7 +403,8 @@ export type ButtonModifier =
 
 export interface ButtonProps<T>
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    ButtonContentProps {
+    ButtonContentProps,
+    AnalyticsProps {
   buttonModifiers?: Array<ButtonModifier>;
   size?: ButtonSize;
   style?: CSSProperties;
@@ -281,7 +416,7 @@ export interface ButtonProps<T>
 
 export declare class Button<T = {}> extends Component<T & ButtonProps<T>> {}
 
-export interface CardProps {
+export interface CardProps extends AnalyticsProps {
   title?: string;
   titleVariant?: string;
   className?: string;
@@ -299,7 +434,7 @@ export type DayPicker$OnDateChange = (values: DayPicker$OnDateChange$Arguments)
 
 export type DayPicker$OnFocusChange = (focusedInput: boolean) => any;
 
-export interface DayPickerProps {
+export interface DayPickerProps extends AnalyticsProps {
   isOutsideRange?: (day: number) => any;
   onDateChange: (date: Moment) => any;
   onFocusChange: (focused: any) => any;
@@ -312,6 +447,7 @@ export interface DayPickerProps {
   placeholder?: string;
   onClose?: () => any;
   disablePastDays?: boolean;
+  displayFormat?: string;
 }
 
 export declare const DayPicker: FunctionComponent<DayPickerProps>;
@@ -325,7 +461,7 @@ export type DatePicker$OnDateChange = (values: DatePicker$OnDateChange$Arguments
 
 export type DatePicker$OnFocusChange = (focusedInput: FocusedInputShape | null) => any;
 
-export interface DatePickerProps {
+export interface DatePickerProps extends AnalyticsProps {
   startDate: Moment;
   endDate?: Moment;
   startDateId?: string;
@@ -342,6 +478,7 @@ export interface DatePickerProps {
   activePeriodPreset?: string;
   disabled?: boolean;
   showPresets?: boolean;
+  showPresetsWithDropdown?: boolean;
   showInnerPresets?: boolean;
 }
 
@@ -374,12 +511,13 @@ export declare class DatePicker extends Component<DatePickerProps, DatePickerSta
   renderDatePresets: () => ReactNode;
 }
 
-export interface Option {
+export interface Option extends AnalyticsProps {
   value: string;
   displayName: string;
+  disabled?: boolean;
 }
 
-export interface DefaultOption {
+export interface DefaultOption extends AnalyticsProps {
   displayName: string;
   disabled?: boolean;
 }
@@ -390,7 +528,7 @@ export type DropdownModifier =
   | 'fontSizeMedium'
   | 'fontSizeLarge';
 
-export interface DropdownProps extends AllHTMLAttributes<HTMLSelectElement> {
+export interface DropdownProps extends AllHTMLAttributes<HTMLSelectElement>, AnalyticsProps {
   value: string;
   onChange?: (value: string) => any;
   color?: string;
@@ -404,20 +542,28 @@ export interface DropdownProps extends AllHTMLAttributes<HTMLSelectElement> {
 
 export declare const Dropdown: FunctionComponent<DropdownProps>;
 
+export interface DrawerProps extends AnalyticsProps {
+  handleClose: () => void;
+  isOpen: boolean;
+  width?: string;
+}
+
+export declare const Drawer: FunctionComponent<DrawerProps>;
+
 export type LabelModifier =
   | 'fontSizeExtraSmall'
   | 'fontSizeSmall'
   | 'fontSizeMedium'
   | 'fontSizeLarge';
 
-export interface LabelProps {
+export interface LabelProps extends AnalyticsProps {
   disabled?: boolean;
   modifiers?: Array<LabelModifier>;
 }
 
 export declare const Label: StyledComponent<'label', Theme, LabelProps>;
 
-export interface LoaderProps {
+export interface LoaderProps extends AnalyticsProps {
   height?: number;
   width?: number;
   color?: string;
@@ -429,7 +575,7 @@ export declare const Loader: StyledComponent<'div', Theme, LoaderProps>;
 
 export type NotificationVariant = 'success' | 'danger' | 'warning';
 
-interface NotificationProps {
+interface NotificationProps extends AnalyticsProps {
   title: string;
   content: string;
   variant?: NotificationVariant;
@@ -447,7 +593,7 @@ interface INotification extends FunctionComponent<NotificationProps> {
 
 export declare const Notification: INotification;
 
-export interface PaginationProps {
+export interface PaginationProps extends AnalyticsProps {
   onPageChange: (pageNumber: number) => any;
   totalItems: number;
   startPage?: number;
@@ -461,7 +607,7 @@ export type PillLabelModifier = 'primary' | 'info' | 'success' | 'danger' | 'war
 
 export type PillLabelSize = 'xs' | 'sm' | 'md' | 'lg';
 
-interface PillLabelProps {
+interface PillLabelProps extends AnalyticsProps {
   modifiers?: Array<PillLabelModifier>;
   size?: PillLabelSize;
 }
@@ -470,7 +616,7 @@ export declare const PillLabel: StyledComponent<'span', Theme, PillLabelProps>;
 
 export type ProgressType = 'circle' | 'line';
 
-export interface ProgressProps {
+export interface ProgressProps extends AnalyticsProps {
   type?: ProgressType;
   strokeWidth?: number;
   strokeColor?: string;
@@ -487,7 +633,7 @@ export interface ProgressProps {
 
 export declare const Progress: FunctionComponent<ProgressProps>;
 
-export interface SwitchProps {
+export interface SwitchProps extends AnalyticsProps {
   checked: boolean;
   disabled?: boolean;
   id: string;
@@ -501,7 +647,7 @@ export declare const TextArea: StyledComponent<'input', Theme>;
 
 export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
 
-export interface InputProps extends AllHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends AllHTMLAttributes<HTMLInputElement>, AnalyticsProps {
   ref?: Ref<HTMLInputElement>;
   size?: InputSize;
   style?: CSSProperties;
@@ -527,7 +673,7 @@ export interface TypographyProps {
 
 export declare const Typography: FunctionComponent<TypographyProps>;
 
-export interface Theme {
+export interface Theme extends AnalyticsProps {
   palette: {
     primary: {
       main: string;
@@ -629,7 +775,7 @@ interface IColors {
   emerald: '#2ecc71';
   peterRiver: '#3498db';
   amethyst: '#9b59b6';
-  asphalt: '#282c35',
+  asphalt: '#282c35';
   wetAsphalt: '#34495e';
   greenSea: '#16a085';
   nephritis: '#27ae60';
@@ -656,7 +802,7 @@ export type FadeEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-o
 
 export type TooltipBehavior = 'hover' | 'click' | 'ref';
 
-export interface TooltipProps {
+export interface TooltipProps extends AnalyticsProps {
   behavior?: TooltipBehavior;
   durationOnClick?: number;
   arrowWidth?: number;
@@ -691,13 +837,13 @@ export declare class Tooltip extends Component<TooltipProps, TooltipState> {
 
 type TransitionVariant = 'fadeInLeft' | 'fadeInRight' | 'fadeOutLeft' | 'fadeOutRight';
 
-interface Step {
+export interface Step extends AnalyticsProps {
   isDisabled: boolean;
   isCompleted: boolean;
   component: ReactNode;
 }
 
-interface StepWizardProps {
+interface StepWizardProps extends AnalyticsProps {
   steps: Array<Step>;
   activeStep: number;
   className?: string;
diff --git a/package.json b/package.json
index 27b088cc3..f58632c83 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.0",
+  "version": "2.5.28",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",
@@ -38,17 +38,17 @@
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-private-methods": "^7.12.1",
     "@babel/plugin-transform-classes": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.12.1",
-    "@rollup/plugin-babel": "^5.2.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-image": "^2.0.5",
+    "@rollup/plugin-image": "^2.0.6",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@storybook/addon-docs": "^6.0.21",
     "@storybook/addon-info": "^5.3.21",
@@ -56,34 +56,34 @@
     "@storybook/react": "^6.0.21",
     "@types/dompurify": "^2.0.4",
     "@types/lodash": "^4.14.165",
-    "@types/react": "^16.9.56",
+    "@types/react": "^17.0.0",
     "@types/react-dates": "^21.8.0",
-    "@types/react-dom": "^16.9.9",
+    "@types/react-dom": "^17.0.0",
     "@types/react-toggle": "^4.0.2",
     "@types/styled-components": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "4.3.0",
-    "@typescript-eslint/parser": "4.8.2",
+    "@typescript-eslint/parser": "4.13.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "1.10.5",
-    "dompurify": "^2.0.17",
-    "eslint": "^7.9.0",
-    "eslint-config-airbnb": "^18.2.0",
+    "dompurify": "^2.2.6",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react-app": "^5.2.1",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-watch": "^7.0.0",
-    "html-react-parser": "^0.14.1",
+    "html-react-parser": "^0.14.3",
     "lodash-es": "^4.17.15",
     "moment": "^2.29.1",
-    "polished": "^4.0.3",
-    "prettier": "^2.1.2",
-    "rc-progress": "^3.1.0",
+    "polished": "^4.0.5",
+    "prettier": "^2.2.1",
+    "rc-progress": "^3.1.3",
     "react": "^17.0.1",
     "react-addons-shallow-compare": "^15.6.2",
     "react-dates": "^21.8.0",
@@ -92,15 +92,19 @@
     "react-paginate": "^6.5.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-filesize": "^9.0.2",
+    "rollup-plugin-filesize": "^9.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.2.1",
     "styled-components-modifiers": "^1.2.5",
     "styled-tools": "^1.7.2",
-    "stylelint": "^13.7.2",
+    "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "typescript": "^4.0.5"
+    "typescript": "^4.1.3"
+  },
+  "dependencies": {
+    "formik": "^2.1.5",
+    "yup": "^0.32.11"
   }
-}
+}
\ No newline at end of file
diff --git a/src/analytics/AnalyticsComponent.tsx b/src/analytics/AnalyticsComponent.tsx
new file mode 100644
index 000000000..c436aa832
--- /dev/null
+++ b/src/analytics/AnalyticsComponent.tsx
@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { AnalyticsContext, AnalyticsContextValue } from './AnalyticsPage';
+
+export type AnalyticsComponentProps = {
+  children: (context: AnalyticsContextValue) => ReactNode;
+};
+
+/** A component to wrap other components with to gain access to the AnalyticsContextValue. */
+const AnalyticsComponent = ({ children }: AnalyticsComponentProps) => (
+  <AnalyticsContext.Consumer>{children}</AnalyticsContext.Consumer>
+);
+
+export default AnalyticsComponent;
diff --git a/src/analytics/AnalyticsPage.tsx b/src/analytics/AnalyticsPage.tsx
new file mode 100644
index 000000000..25ebfdf0a
--- /dev/null
+++ b/src/analytics/AnalyticsPage.tsx
@@ -0,0 +1,74 @@
+import React, { createContext } from 'react';
+import AnalyticsTracker from './AnalyticsTracker';
+
+export type AnalyticsTag = string;
+
+export enum AnalyticsPageType {
+  PAGE = 'page',
+  MODAL = 'modal',
+  TAB = 'tab',
+}
+
+export interface AnalyticsPageObject {
+  tag: AnalyticsTag;
+  type: AnalyticsPageType;
+}
+
+export interface AnalyticsContextValue {
+  pages: AnalyticsPageObject[];
+  tracker: AnalyticsTracker;
+  merchantId: number;
+  ip: string;
+}
+
+export const ROOT_ANALYTICS_CONTEXT: AnalyticsContextValue = {
+  pages: [],
+  tracker: new AnalyticsTracker(),
+  merchantId: 0,
+  ip: '',
+};
+
+export const AnalyticsContext = createContext(ROOT_ANALYTICS_CONTEXT);
+
+export interface AnalyticsPageProps {
+  /** Tag of this page. */
+  tag: AnalyticsTag;
+
+  /** Type of this page. */
+  type: AnalyticsPageType;
+
+  /** Children in the page. */
+  children?: React.ReactNode;
+
+  /** merchant id */
+  merchantId?: number;
+
+  /** user ip address */
+  ip?: string;
+}
+
+/** Registers a subpage in the analytics component hierarchy. */
+const AnalyticsPageComponent = ({
+  tag,
+  type,
+  children,
+  merchantId: mid,
+  ip: ipAddress,
+}: AnalyticsPageProps) => (
+  <AnalyticsContext.Consumer>
+    {({ pages, tracker, merchantId, ip }) => (
+      <AnalyticsContext.Provider
+        value={{
+          pages: [...pages, { tag, type }],
+          tracker,
+          merchantId: mid || merchantId,
+          ip: ipAddress || ip,
+        }}
+      >
+        {children}
+      </AnalyticsContext.Provider>
+    )}
+  </AnalyticsContext.Consumer>
+);
+
+export default AnalyticsPageComponent;
diff --git a/src/analytics/AnalyticsTracker.ts b/src/analytics/AnalyticsTracker.ts
new file mode 100644
index 000000000..edf9fb6b2
--- /dev/null
+++ b/src/analytics/AnalyticsTracker.ts
@@ -0,0 +1,67 @@
+import { AnalyticsPageObject, AnalyticsTag } from './AnalyticsPage';
+
+export enum AnalyticsEvents {
+  CLICK = 'click',
+  DROPDOWN_CHANGE = 'dropdown_change',
+  SWITCH_ON = 'switch_on',
+  SWITCH_OFF = 'switch_off',
+  DROPDOWN_SELECT = 'dropdown_select',
+  CHECKBOX_ON = 'checkbox_on',
+  CHECKBOX_OFF = 'checkbox_off',
+  RADIOBUTTON_SELECT = 'radiobutton_select',
+  DATEPICKER_CHANGE = 'datepicker_date_change',
+  DAYPICKER_CHANGE = 'daypicker_date_change',
+  KEYBOARD_EVENT = 'keyboard_event',
+  FOCUS_OUT = 'focus_out',
+}
+
+export enum AnalyticsComponentType {
+  BUTTON = 'button',
+  DROPDOWN = 'dropdown',
+  SWITCH = 'switch',
+  PAGINATION = 'pagination',
+  ICON = 'icon',
+  LINK = 'link',
+  CHECKBOX = 'checkbox',
+  DATEPICKER = 'datepicker',
+  DAYPICKER = 'daypicker',
+  DATEPICKER_PRESET = 'datepicker_preset',
+  TAB = 'tab',
+  ACCORDION = 'accordion',
+  MODAL = 'modal',
+  INPUT = 'input',
+  TEXTAREA = 'textarea',
+  TAB_NAVIGATION = 'tab_navigation',
+  RADIO = 'radio',
+}
+
+export interface TrackEvent {
+  event: AnalyticsEvents;
+  type: AnalyticsComponentType;
+  tag: AnalyticsTag;
+  pages: AnalyticsPageObject[];
+  merchantId: number;
+  ip: string;
+}
+
+export type AnalyticsHandlerFn = (event: TrackEvent) => void;
+
+export default class AnalyticsTracker {
+  handlers: AnalyticsHandlerFn[] = [];
+
+  registerHandler = (fn: AnalyticsHandlerFn) => {
+    this.handlers.push(fn);
+
+    return () => {
+      this.unregisterHandler(fn);
+    };
+  };
+
+  unregisterHandler = (fn: AnalyticsHandlerFn) => {
+    this.handlers = this.handlers.filter((handler) => handler !== fn);
+  };
+
+  track = (event: TrackEvent) => {
+    this.handlers.forEach((handler) => handler(event));
+  };
+}
diff --git a/src/analytics/externalTypes.ts b/src/analytics/externalTypes.ts
new file mode 100644
index 000000000..862c98a0d
--- /dev/null
+++ b/src/analytics/externalTypes.ts
@@ -0,0 +1,18 @@
+import { AnalyticsTag } from './AnalyticsPage';
+
+export interface AnalyticsProps {
+  /** Unique identifier of the component within the logical page hierarchy. */
+  tag?: AnalyticsTag;
+
+  /** Posiition of the component within a table-like component. */
+  position?: {
+    /** Unique ID of the row (usually what you would use as a key in react). */
+    id: string;
+
+    /** Row index. */
+    row?: number;
+
+    /** Column index or name. */
+    column?: number | string;
+  };
+}
diff --git a/src/analytics/index.ts b/src/analytics/index.ts
new file mode 100644
index 000000000..29171144c
--- /dev/null
+++ b/src/analytics/index.ts
@@ -0,0 +1,26 @@
+export {
+  default as AnalyticsPage,
+  ROOT_ANALYTICS_CONTEXT,
+  AnalyticsContext,
+} from './AnalyticsPage';
+
+export {
+  default as AnalyticsTracker,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from './AnalyticsTracker';
+
+export { default as AnalyticsComponent, AnalyticsComponentProps } from './AnalyticsComponent';
+
+export { default as useAnalytics } from './useAnalytics';
+
+export type {
+  AnalyticsTag,
+  AnalyticsContextValue,
+  AnalyticsPageProps,
+  AnalyticsPageType,
+} from './AnalyticsPage';
+
+export type { TrackEvent as Event, AnalyticsHandlerFn } from './AnalyticsTracker';
+
+export type { AnalyticsProps } from './externalTypes';
diff --git a/src/analytics/useAnalytics.ts b/src/analytics/useAnalytics.ts
new file mode 100644
index 000000000..a65f6a3c8
--- /dev/null
+++ b/src/analytics/useAnalytics.ts
@@ -0,0 +1,32 @@
+import { useContext, useCallback, useMemo } from 'react';
+import { TrackEvent } from './AnalyticsTracker';
+import { AnalyticsContext } from './AnalyticsPage';
+
+type TrackParams = Pick<TrackEvent, 'event' | 'type' | 'tag'> &
+  Partial<Pick<TrackEvent, 'pages' | 'merchantId' | 'ip'>>;
+
+const useAnalytics = () => {
+  const { pages, tracker, merchantId, ip } = useContext(AnalyticsContext);
+
+  const track = useCallback(
+    ({ event, type, tag, ...optional }: TrackParams) => {
+      if (!tag) {
+        return;
+      }
+
+      tracker.track({ event, type, tag, pages, merchantId, ip, ...optional });
+    },
+    [pages, tracker, merchantId, ip]
+  );
+
+  const trackCallback = useCallback(
+    (trackParams: TrackParams) => () => {
+      track(trackParams);
+    },
+    []
+  );
+
+  return useMemo(() => ({ track, trackCallback }), [track, trackCallback]);
+};
+
+export default useAnalytics;
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index ac16b8015..69d9c6fbd 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -5,6 +5,7 @@ import Arrow from './Arrow';
 import { TooltipProps } from '../Tooltip/Tooltip';
 import { AccordionWrapper } from './styled';
 import AccordionPanel from './AccordionPanel';
+import { AnalyticsProps } from '../../analytics';
 
 // Types
 type Panel = {
@@ -13,7 +14,7 @@ type Panel = {
   iconTooltip?: TooltipProps;
   renderContent: () => any;
   disabled?: boolean;
-};
+} & AnalyticsProps;
 
 type Props = {
   panels: Array<Panel>;
@@ -21,7 +22,7 @@ type Props = {
   width?: string;
   extendWidth?: string;
   isExtendable?: boolean;
-  onActivePanelChange?: (index: number) => void;
+  onActivePanelChange?: (index: number, label: string) => void;
   shouldClose?: boolean;
   onRequestClose?: () => void;
 };
@@ -39,20 +40,20 @@ export const Accordion = ({
   const [activePanel, setActivePanel] = useState(-1);
   const [open, setOpen] = useState(false);
 
-  const openPanel = (panelIndex: number) => {
+  const openPanel = (panelIndex: number, label: string) => {
     if (panelIndex !== activePanel) {
       setActivePanel(panelIndex);
-      if (onActivePanelChange) onActivePanelChange(panelIndex);
+      if (onActivePanelChange) onActivePanelChange(panelIndex, label);
     }
   };
 
   const closePanel = (e?: SyntheticEvent) => {
     if (e) e.stopPropagation();
     setActivePanel(-1);
-    if (onActivePanelChange) onActivePanelChange(-1);
+    if (onActivePanelChange) onActivePanelChange(-1, '');
   };
 
-  const togglePanel = (panelIndex: number) => (e: any) => {
+  const togglePanel = (panelIndex: number, label: string) => (e: any) => {
     e.stopPropagation();
     if (activePanel !== -1) {
       if (shouldClose) {
@@ -61,7 +62,7 @@ export const Accordion = ({
         onRequestClose();
       }
     } else {
-      openPanel(panelIndex);
+      openPanel(panelIndex, label);
     }
   };
 
@@ -78,10 +79,9 @@ export const Accordion = ({
     >
       <div>
         {panels.map((panel, index) => {
-          const { icon, iconTooltip, label, renderContent, disabled = false } = panel;
+          const { icon, iconTooltip, label, renderContent, disabled = false, tag = '' } = panel;
           const isActive = activePanel === index;
           const isOtherPanelActive = !isActive && activePanel !== -1;
-
           return (
             <div key={index}>
               <AccordionPanel
@@ -95,7 +95,8 @@ export const Accordion = ({
                 isOtherPanelActive={isOtherPanelActive}
                 contentHeight={contentHeight}
                 disabled={disabled}
-                togglePanel={togglePanel(index)}
+                togglePanel={togglePanel(index, label)}
+                tag={tag}
               />
             </div>
           );
diff --git a/src/components/Accordion/AccordionPanel.tsx b/src/components/Accordion/AccordionPanel.tsx
index e663d8538..69fcafcd8 100644
--- a/src/components/Accordion/AccordionPanel.tsx
+++ b/src/components/Accordion/AccordionPanel.tsx
@@ -1,9 +1,15 @@
 import React, { SyntheticEvent, ReactElement } from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp, ifNotProp, prop } from 'styled-tools';
+import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 // Components
-import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
 import colors from '../../theme/colors';
 import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 import Typography from '../Typography';
@@ -18,7 +24,7 @@ type AccordionPanelHeaderProps = {
   isActive: boolean;
   disabled: boolean;
   onClick: any;
-};
+} & AnalyticsProps;
 
 type AccordionTitleProps = {
   isActive: boolean;
@@ -124,7 +130,7 @@ type Props = {
   renderContent: (actions: { closePanel: (e?: SyntheticEvent) => void }) => any;
   closePanel: (e?: SyntheticEvent) => void;
   disabled: boolean;
-};
+} & AnalyticsProps;
 
 const AccordionPanel = ({
   label,
@@ -137,21 +143,42 @@ const AccordionPanel = ({
   disabled,
   togglePanel,
   closePanel,
+  tag = '',
 }: Props) => (
   <>
-    <AccordionPanelHeader
-      disabled={disabled}
-      onClick={!disabled ? togglePanel : null}
-      isActive={isActive}
-    >
-      <AccordionTitle variant="h6" isActive={isActive} disabled={disabled}>
-        {label}
-      </AccordionTitle>
-      <AccordionIconHolder isAccordionDisabled={disabled}>
-        {!isOtherPanelActive && (iconTooltip ? <Tooltip {...iconTooltip}>{icon}</Tooltip> : icon)}
-        {!disabled && (isActive ? <StyledAngleUp /> : <StyledAngleDown />)}
-      </AccordionIconHolder>
-    </AccordionPanelHeader>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <AccordionPanelHeader
+          disabled={disabled}
+          onClick={(e: SyntheticEvent<Element, Event>) => {
+            if (!disabled) {
+              togglePanel(e);
+              if (tag && !isActive) {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.ACCORDION,
+                  tag,
+                  pages,
+                  merchantId,
+                  ip,
+                });
+              }
+            }
+          }}
+          isActive={isActive}
+          tag={tag}
+        >
+          <AccordionTitle variant="h6" isActive={isActive} disabled={disabled}>
+            {label}
+          </AccordionTitle>
+          <AccordionIconHolder isAccordionDisabled={disabled}>
+            {!isOtherPanelActive &&
+              (iconTooltip ? <Tooltip {...iconTooltip}>{icon}</Tooltip> : icon)}
+            {!disabled && (isActive ? <StyledAngleUp /> : <StyledAngleDown />)}
+          </AccordionIconHolder>
+        </AccordionPanelHeader>
+      )}
+    </AnalyticsComponent>
     <AccordionPanelContainer isActive={isActive} contentHeight={contentHeight}>
       <AccordionPanelDetails>{isActive && renderContent({ closePanel })}</AccordionPanelDetails>
     </AccordionPanelContainer>
diff --git a/src/components/Accordion/panels.tsx b/src/components/Accordion/panels.tsx
index 79449425c..40e32ff86 100644
--- a/src/components/Accordion/panels.tsx
+++ b/src/components/Accordion/panels.tsx
@@ -16,6 +16,7 @@ export const panels = [
         <h1>Long Content for the accordion1</h1>
       </div>
     ),
+    tag: 'tag1',
   },
   {
     label: 'Disabled Accordion',
@@ -31,6 +32,7 @@ export const panels = [
       </div>
     ),
     disabled: true,
+    tag: 'tag2',
   },
   {
     label: 'Accordion3',
@@ -45,5 +47,6 @@ export const panels = [
         <h1>Long Content for the accordion3</h1>
       </div>
     ),
+    tag: 'tag3',
   },
 ];
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b258c5d0c..1a8388edf 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,6 +1,12 @@
 import React, { ButtonHTMLAttributes, ReactElement } from 'react';
 import styled, { css } from 'styled-components';
 import ButtonWrapper from './ButtonWrapper';
+import {
+  AnalyticsProps,
+  AnalyticsComponent,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -17,7 +23,7 @@ export type Props = ButtonHTMLAttributes<HTMLButtonElement> &
     className?: string;
     fullWidth?: boolean;
     fullHeight?: boolean;
-  };
+  } & AnalyticsProps;
 
 const ContentHolder = styled.span`
   margin-top: 2px;
@@ -54,6 +60,7 @@ const Content = ({ icon = null, iconPosition = 'left', children }: ContentProps)
 
 const Button = ({
   size = 'md',
+  tag,
   buttonModifiers,
   className = '',
   icon,
@@ -61,20 +68,39 @@ const Button = ({
   children,
   fullWidth,
   fullHeight,
+  onClick,
   ...rest
 }: Props) => (
-  <ButtonWrapper
-    className={className}
-    size={size}
-    modifiers={buttonModifiers}
-    fullWidth={fullWidth}
-    fullHeight={fullHeight}
-    {...rest}
-  >
-    <Content icon={icon} iconPosition={iconPosition}>
-      {children}
-    </Content>
-  </ButtonWrapper>
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <ButtonWrapper
+        className={className}
+        size={size}
+        modifiers={buttonModifiers}
+        fullWidth={fullWidth}
+        fullHeight={fullHeight}
+        onClick={(e) => {
+          onClick?.(e);
+
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.BUTTON,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
+        {...rest}
+      >
+        <Content icon={icon} iconPosition={iconPosition}>
+          {children}
+        </Content>
+      </ButtonWrapper>
+    )}
+  </AnalyticsComponent>
 );
 
 export default Button;
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index b4cbfda1d..780784f51 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -4,6 +4,7 @@ import { transparentize } from 'polished';
 import colors from '../../theme/colors';
 import Typography, { TypographyVariant } from '../Typography/Typography';
 import CardContent from './CardContent';
+import { AnalyticsProps } from '../../analytics';
 
 const CardWrapper = styled.div`
   display: flex;
@@ -32,12 +33,12 @@ const CardTitle = styled(Typography)`
   display: inline-block;
 `;
 
-interface Props {
+type Props = {
   title?: string;
   titleVariant?: TypographyVariant;
   className?: string;
   children: ReactChild;
-}
+} & AnalyticsProps;
 
 const Card = ({ title, titleVariant = 'h1', className = '', children }: Props) => (
   <CardWrapper className={className}>
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index f5171b587..7d9199014 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,6 +1,12 @@
 import React, { ChangeEvent, RefObject } from 'react';
 import Label from '../Label';
 import CheckboxWrapper from './CheckboxWrapper';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsProps,
+  AnalyticsEvents,
+} from '../../analytics';
 
 type Props = {
   label: string;
@@ -10,7 +16,7 @@ type Props = {
   onChange: (checked: boolean) => any;
   containerRef?: RefObject<HTMLDivElement> | null;
   disabled?: boolean;
-};
+} & AnalyticsProps;
 
 const Checkbox: React.FC<Props> = ({
   label,
@@ -18,15 +24,50 @@ const Checkbox: React.FC<Props> = ({
   onChange,
   containerRef = null,
   disabled = false,
+  tag = '',
   ...rest
 }) => {
   const onCheckboxChange = (e: ChangeEvent<HTMLInputElement>): any => onChange(e.target.checked);
 
   return (
-    <CheckboxWrapper ref={containerRef}>
-      <input disabled={disabled} type="checkbox" id={id} onChange={onCheckboxChange} {...rest} />
-      <Label htmlFor={id}>{label}</Label>
-    </CheckboxWrapper>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <CheckboxWrapper ref={containerRef}>
+          <input
+            disabled={disabled}
+            type="checkbox"
+            id={id}
+            onChange={(e) => {
+              onCheckboxChange(e);
+
+              if (tag) {
+                if (e.target.checked) {
+                  tracker.track({
+                    event: AnalyticsEvents.CHECKBOX_ON,
+                    type: AnalyticsComponentType.CHECKBOX,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                } else {
+                  tracker.track({
+                    event: AnalyticsEvents.CHECKBOX_OFF,
+                    type: AnalyticsComponentType.CHECKBOX,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+              }
+            }}
+            {...rest}
+          />
+          <Label htmlFor={id}>{label}</Label>
+        </CheckboxWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };
 
diff --git a/src/components/Checkbox/CheckboxWrapper.ts b/src/components/Checkbox/CheckboxWrapper.ts
index fd8cbf6d6..be2ac830a 100644
--- a/src/components/Checkbox/CheckboxWrapper.ts
+++ b/src/components/Checkbox/CheckboxWrapper.ts
@@ -10,7 +10,7 @@ const CheckboxWrapper = styled.div<{ theme: DefaultTheme }>`
 
   > input + label {
     position: relative;
-    padding-left: 1.5rem;
+    padding-left: 1.5em;
     cursor: pointer;
 
     &::before {
@@ -18,8 +18,8 @@ const CheckboxWrapper = styled.div<{ theme: DefaultTheme }>`
       position: absolute;
       left: 0;
       top: 0;
-      width: 1rem;
-      height: 1rem;
+      width: 1em;
+      height: 1em;
       border: 1px solid ${colors.gray};
       background: ${colors.white};
       border-radius: 2px;
@@ -44,8 +44,8 @@ const CheckboxWrapper = styled.div<{ theme: DefaultTheme }>`
       border: 2px solid ${colors.skyBlue};
       border-top: none;
       border-right: none;
-      width: 0.5rem;
-      height: 0.25rem;
+      width: 0.5em;
+      height: 0.25em;
       opacity: 1;
       transform: scale(1) rotate(-45deg);
     }
@@ -56,8 +56,8 @@ const CheckboxWrapper = styled.div<{ theme: DefaultTheme }>`
       border: 2px solid ${colors.white};
       border-top: none;
       border-right: none;
-      width: 0.5rem;
-      height: 0.25rem;
+      width: 0.5em;
+      height: 0.25em;
       opacity: 1;
       transform: scale(0);
     }
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index fa1da1da4..52b5aedfc 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -1,21 +1,44 @@
 import React, { useState, useEffect } from 'react';
 import moment, { Moment } from 'moment';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { FocusedInputShape, DateRangePicker } from 'react-dates';
+import { FaCalendarAlt } from 'react-icons/fa';
+import { snakeCase } from 'lodash';
 import colors from '../../theme/colors';
 import { getMonthOptions, getYearOptions } from '../../utils/helpers';
 import Dropdown from '../Dropdown';
+import { Option } from '../Dropdown/Dropdown';
 import DatePickerWrapper from './DatePickerWrapper';
 import { PERIODS, INNERPERIODS } from './periods';
 import { Styled } from './styles';
+import {
+  AnalyticsComponent,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+  AnalyticsProps,
+} from '../../analytics';
 import 'react-dates/initialize';
 
-const ContentHolder = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  width: 86%;
+const ContentHolder = styled.div<{ isDropdown?: boolean }>`
   margin: 0 auto;
   padding: 15px 0 15px;
+  ${({ isDropdown }) =>
+    !isDropdown &&
+    css`
+      display: flex;
+      justify-content: flex-end;
+      width: 86%;
+    `}
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin-right: 1rem;
+  color: ${colors.blue};
+  background-color: transparent;
+  border: 1px solid ${colors.blue};
+  font-size: ${({ theme }) => theme.font.sizes.extraSmall};
+  font-weight: ${({ theme }) => theme.font.weights.bold};
+  border-radius: 5px;
 `;
 
 const AnalyticsPeriods = styled.div`
@@ -44,7 +67,7 @@ const StyledSpan = styled.span<SpanProps>`
   }
 `;
 
-interface DateChangeArgs {
+export interface DateChangeArgs {
   startDate: Moment | null;
   endDate: Moment | null;
 }
@@ -82,7 +105,8 @@ type Props = {
   showPresets?: boolean;
   showInnerPresets?: boolean;
   className?: string;
-};
+  showPresetsWithDropdown?: boolean;
+} & AnalyticsProps;
 
 const DatePicker = ({
   activePeriodPreset = '',
@@ -99,6 +123,8 @@ const DatePicker = ({
   focusedInput,
   className = '',
   minimumNights = 0,
+  showPresetsWithDropdown = false,
+  tag = '',
 }: Props) => {
   const [activePeriod, setActivePeriod] = useState('');
 
@@ -172,7 +198,7 @@ const DatePicker = ({
   const renderDatePresets = () => {
     if (!showInnerPresets) return '';
 
-    let presets = [];
+    let presets: string[] = [];
 
     if (displayPresets[0] === 'default') {
       presets = [
@@ -186,23 +212,38 @@ const DatePicker = ({
       presets = [...displayPresets];
     }
     return (
-      <Styled.DatePresetWrapper>
-        {presets.map((text: string) => (
-          <Styled.StyledLabel
-            active={activePeriod === text}
-            key={text}
-            onClick={() => handleRangeClick(text as Period)}
-          >
-            {text}
-          </Styled.StyledLabel>
-        ))}
-      </Styled.DatePresetWrapper>
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <Styled.DatePresetWrapper>
+            {presets.map((text: string) => (
+              <Styled.StyledLabel
+                active={activePeriod === text}
+                key={text}
+                onClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER_PRESET,
+                    tag: `datepicker_${snakeCase(text)}`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                  handleRangeClick(text as Period);
+                }}
+              >
+                {text}
+              </Styled.StyledLabel>
+            ))}
+          </Styled.DatePresetWrapper>
+        )}
+      </AnalyticsComponent>
     );
   };
   const renderMonthElement = ({ month, onMonthSelect, onYearSelect }: RenderMonthElementProps) => (
     <Styled.CustomMonthContainer>
       <Styled.DropdownContainer>
         <Dropdown
+          tag="dropdown_month"
           options={getMonthOptions()}
           value={month.month().toString()}
           onChange={(val: any) => onMonthSelect(month, val)}
@@ -210,6 +251,7 @@ const DatePicker = ({
       </Styled.DropdownContainer>
       <Styled.DropdownContainer>
         <Dropdown
+          tag="dropdown_year"
           options={getYearOptions()}
           value={month.year().toString()}
           onChange={(val: any) => onYearSelect(month, val)}
@@ -220,37 +262,249 @@ const DatePicker = ({
 
   const handleDateChange = ({ startDate, endDate }: DateChangeArgs) => {
     onDateChange({ startDate, endDate });
+    setActivePeriod('');
+  };
+
+  const options: Array<Option> = [
+    { value: PERIODS.ONE_MONTH, displayName: '1 month' },
+    { value: PERIODS.ONE_WEEK, displayName: '1 week' },
+    { value: PERIODS.TWO_WEEKS, displayName: '2 weeks' },
+    { value: PERIODS.SIX_MONTHS, displayName: '6 months' },
+    { value: PERIODS.ONE_YEAR, displayName: '1 year' },
+    { value: PERIODS.TODAY, displayName: 'last 24 hours' },
+    { value: PERIODS.ALL, displayName: 'all' },
+  ];
+
+  const defaultOption = { displayName: 'Choose period', disabled: true };
+
+  const handleDropdownChange = (value: string) => {
+    handleRangeClick(value);
   };
 
   const renderPeriodElement = (periodConst: string, periodText: string, key: number) => (
-    <SpanContainer>
-      <StyledSpan
-        active={activePeriod === periodConst}
-        key={key}
-        onClick={() => handleRangeClick(periodConst)}
-      >
-        {periodText}
-      </StyledSpan>
-      {periodText.toLowerCase() !== 'all' && ' |'}
-    </SpanContainer>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <SpanContainer>
+          <StyledSpan
+            active={activePeriod === periodConst}
+            key={key}
+            onClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DATEPICKER_PRESET,
+                tag: `datepicker_${snakeCase(periodConst)}`,
+                pages,
+                merchantId,
+                ip,
+              });
+              handleRangeClick(periodConst);
+            }}
+          >
+            {periodText}
+          </StyledSpan>
+          {periodText.toLowerCase() !== 'all' && ' |'}
+        </SpanContainer>
+      )}
+    </AnalyticsComponent>
   );
 
+  if (showPresetsWithDropdown) {
+    return (
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <ContentHolder isDropdown>
+            <StyledDropdown
+              tag="dropdown_presets"
+              defaultOption={defaultOption}
+              options={options}
+              value={activePeriod}
+              onChange={handleDropdownChange}
+            />
+            <DatePickerWrapper
+              onClick={() => {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.DATEPICKER,
+                  tag,
+                  pages,
+                  merchantId,
+                  ip,
+                });
+              }}
+              showPresetsWithDropdown
+              className={className}
+            >
+              <DateRangePicker
+                isOutsideRange={isOutsideRange}
+                onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
+                  handleDateChange({ startDate, endDate });
+                  tracker.track({
+                    event: AnalyticsEvents.DATEPICKER_CHANGE,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: `startDate: ${moment(startDate).format('DD-MM-YYYY')}_endDate: ${moment(
+                      endDate
+                    ).format('DD-MM-YYYY')}`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                onFocusChange={onFocusChange}
+                renderMonthElement={renderMonthElement}
+                focusedInput={focusedInput}
+                startDate={startDateProp}
+                startDateId={startDateId}
+                endDate={endDateProp}
+                endDateId={endDateId}
+                customArrowIcon="-"
+                calendarInfoPosition="before"
+                minimumNights={minimumNights}
+                enableOutsideDays
+                readOnly
+                renderCalendarInfo={renderDatePresets}
+                customInputIcon={<FaCalendarAlt />}
+                onNextMonthClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: 'datepicker_next_month',
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                onPrevMonthClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: `datepicker_prev_month`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+              />
+            </DatePickerWrapper>
+          </ContentHolder>
+        )}
+      </AnalyticsComponent>
+    );
+  }
+
   if (showPresets) {
     return (
-      <ContentHolder>
-        <AnalyticsPeriods>
-          {renderPeriodElement(PERIODS.TODAY, 'last 24 hours', 6)}
-          {renderPeriodElement(PERIODS.ONE_WEEK, '1 week', 0)}
-          {renderPeriodElement(PERIODS.TWO_WEEKS, '2 weeks', 1)}
-          {renderPeriodElement(PERIODS.ONE_MONTH, '1 month', 2)}
-          {renderPeriodElement(PERIODS.SIX_MONTHS, '6 months', 3)}
-          {renderPeriodElement(PERIODS.ONE_YEAR, '1 year', 4)}
-          {renderPeriodElement(PERIODS.ALL, 'all', 5)}
-        </AnalyticsPeriods>
-        <DatePickerWrapper className={className}>
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <ContentHolder>
+            <AnalyticsPeriods>
+              {renderPeriodElement(PERIODS.TODAY, 'last 24 hours', 6)}
+              {renderPeriodElement(PERIODS.ONE_WEEK, '1 week', 0)}
+              {renderPeriodElement(PERIODS.TWO_WEEKS, '2 weeks', 1)}
+              {renderPeriodElement(PERIODS.ONE_MONTH, '1 month', 2)}
+              {renderPeriodElement(PERIODS.SIX_MONTHS, '6 months', 3)}
+              {renderPeriodElement(PERIODS.ONE_YEAR, '1 year', 4)}
+              {renderPeriodElement(PERIODS.ALL, 'all', 5)}
+            </AnalyticsPeriods>
+            <DatePickerWrapper
+              onClick={() => {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.DATEPICKER,
+                  tag,
+                  pages,
+                  merchantId,
+                  ip,
+                });
+              }}
+              className={className}
+            >
+              <DateRangePicker
+                isOutsideRange={isOutsideRange}
+                onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
+                  handleDateChange({ startDate, endDate });
+                  tracker.track({
+                    event: AnalyticsEvents.DATEPICKER_CHANGE,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: `startDate: ${moment(startDate).format('DD-MM-YYYY')}_endDate: ${moment(
+                      endDate
+                    ).format('DD-MM-YYYY')}`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                onFocusChange={onFocusChange}
+                renderMonthElement={renderMonthElement}
+                focusedInput={focusedInput}
+                startDate={startDateProp}
+                startDateId={startDateId}
+                endDate={endDateProp}
+                endDateId={endDateId}
+                customArrowIcon="to"
+                calendarInfoPosition="before"
+                minimumNights={minimumNights}
+                enableOutsideDays
+                readOnly
+                renderCalendarInfo={renderDatePresets}
+                onNextMonthClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: 'datepicker_next_month',
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                onPrevMonthClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.DATEPICKER,
+                    tag: `datepicker_prev_month`,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+              />
+            </DatePickerWrapper>
+          </ContentHolder>
+        )}
+      </AnalyticsComponent>
+    );
+  }
+
+  return (
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <DatePickerWrapper
+          onClick={() => {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.DATEPICKER,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }}
+          className={className}
+        >
           <DateRangePicker
             isOutsideRange={isOutsideRange}
-            onDatesChange={handleDateChange}
+            onDatesChange={({ startDate, endDate }: DateChangeArgs) => {
+              handleDateChange({ startDate, endDate });
+              tracker.track({
+                event: AnalyticsEvents.DATEPICKER_CHANGE,
+                type: AnalyticsComponentType.DATEPICKER,
+                tag: `startDate: ${moment(startDate).format('DD-MM-YYYY')}_endDate: ${moment(
+                  endDate
+                ).format('DD-MM-YYYY')}`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
             onFocusChange={onFocusChange}
             renderMonthElement={renderMonthElement}
             focusedInput={focusedInput}
@@ -264,32 +518,30 @@ const DatePicker = ({
             enableOutsideDays
             readOnly
             renderCalendarInfo={renderDatePresets}
+            onNextMonthClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DATEPICKER,
+                tag: 'datepicker_next_month',
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
+            onPrevMonthClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DATEPICKER,
+                tag: `datepicker_prev_month`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
           />
         </DatePickerWrapper>
-      </ContentHolder>
-    );
-  }
-
-  return (
-    <DatePickerWrapper className={className}>
-      <DateRangePicker
-        isOutsideRange={isOutsideRange}
-        onDatesChange={handleDateChange}
-        onFocusChange={onFocusChange}
-        renderMonthElement={renderMonthElement}
-        focusedInput={focusedInput}
-        startDate={startDateProp}
-        startDateId={startDateId}
-        endDate={endDateProp}
-        endDateId={endDateId}
-        customArrowIcon="to"
-        calendarInfoPosition="before"
-        minimumNights={minimumNights}
-        enableOutsideDays
-        readOnly
-        renderCalendarInfo={renderDatePresets}
-      />
-    </DatePickerWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };
 
diff --git a/src/components/DatePicker/DatePickerWrapper.ts b/src/components/DatePicker/DatePickerWrapper.ts
index 049dbbcd2..2e4b0baa4 100644
--- a/src/components/DatePicker/DatePickerWrapper.ts
+++ b/src/components/DatePicker/DatePickerWrapper.ts
@@ -1,8 +1,11 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
 import colors from '../../theme/colors';
 
-const DatePickerWrapper = styled.span`
+interface Props {
+  showPresetsWithDropdown?: boolean;
+}
+const DatePickerAnalyticsWrapper = styled.span<Props>`
   .PresetDateRangePicker_panel {
     padding: 0 1.375rem 0.6875rem;
   }
@@ -253,7 +256,7 @@ const DatePickerWrapper = styled.span`
     position: absolute;
     top: 18px;
     line-height: 0.78;
-    border-radius: 3px;
+    border-radius: 5px;
     padding: 0.375rem 0.5625rem;
   }
 
@@ -334,7 +337,7 @@ const DatePickerWrapper = styled.span`
 
   .DayPicker__withBorder {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
+    border-radius: 5px;
   }
 
   .DayPicker_portal__horizontal {
@@ -408,7 +411,7 @@ const DatePickerWrapper = styled.span`
   .DayPicker_transitionContainer {
     position: relative;
     overflow: hidden;
-    border-radius: 3px;
+    border-radius: 5px;
   }
 
   .DayPicker_transitionContainer__horizontal {
@@ -433,10 +436,9 @@ const DatePickerWrapper = styled.span`
   .DateInput {
     margin: 0;
     padding: 0;
-    background: ${colors.white};
     position: relative;
     display: inline-block;
-    width: 85px;
+    width: ${({ showPresetsWithDropdown }) => (showPresetsWithDropdown ? '70px' : '85px')};
     vertical-align: middle;
   }
 
@@ -465,12 +467,21 @@ const DatePickerWrapper = styled.span`
     border-radius: 0;
     display: inline-block;
     font-size: ${({ theme }) => theme.font.sizes.medium};
-    line-height: 28px;
+    line-height: 29px;
     cursor: pointer;
     color: ${({ theme }) => theme.palette.text.main};
     text-align: center;
     padding: 0;
     outline: none;
+
+    ${({ showPresetsWithDropdown, theme }) =>
+      showPresetsWithDropdown &&
+      css`
+        font-size: ${theme.font.sizes.small};
+        font-weight: ${theme.font.weights.bold};
+        color: ${colors.blue};
+        background-color: transparent;
+      `}
   }
 
   .DateInput_input__small {
@@ -517,10 +528,17 @@ const DatePickerWrapper = styled.span`
     box-sizing: border-box;
     background: ${colors.white};
     border: 1px solid ${colors.gray};
-    border-radius: 3px;
+    border-radius: 5px;
     display: inline-block;
     cursor: pointer;
     position: relative;
+
+    ${({ showPresetsWithDropdown }) =>
+      showPresetsWithDropdown &&
+      css`
+        padding: 0 0.25rem;
+        background: transparent;
+      `}
   }
 
   .DateRangePickerInput__disabled {
@@ -528,8 +546,10 @@ const DatePickerWrapper = styled.span`
   }
 
   .DateRangePickerInput__withBorder {
-    border-radius: 3px;
-    border: 1px solid ${colors.gray};
+    border-radius: 5px;
+    border: 1px solid
+      ${({ showPresetsWithDropdown }) =>
+        showPresetsWithDropdown ? `   ${colors.blue};` : `${colors.gray}`};
   }
 
   .DateRangePickerInput__rtl {
@@ -550,8 +570,14 @@ const DatePickerWrapper = styled.span`
     padding: 0.3125rem 0.625rem;
     font-size: ${({ theme }) => theme.font.sizes.small};
     line-height: 1rem;
-    color: ${({ theme }) => theme.palette.text.light};
     font-weight: ${({ theme }) => theme.font.weights.light};
+
+    ${({ showPresetsWithDropdown }) =>
+      showPresetsWithDropdown &&
+      css`
+        padding: 0.12rem;
+        color: ${colors.blue};
+      `}
   }
 
   .DateRangePicker {
@@ -603,6 +629,17 @@ const DatePickerWrapper = styled.span`
     background-color: ${colors.blue};
     color: white;
   }
+
+  .DateRangePickerInput_calendarIcon {
+    border: none;
+    background: none;
+    color: ${colors.blue};
+    padding: 1px 6px 1px 3px;
+
+    :focus {
+      outline: none;
+    }
+  }
 `;
 
-export default DatePickerWrapper;
+export default DatePickerAnalyticsWrapper;
diff --git a/src/components/DatePicker/datepicker.stories.mdx b/src/components/DatePicker/datepicker.stories.mdx
index d6fc47469..2a7cf4a96 100644
--- a/src/components/DatePicker/datepicker.stories.mdx
+++ b/src/components/DatePicker/datepicker.stories.mdx
@@ -30,6 +30,39 @@ const Page = () => (
 ### DateRangePicker
 <Preview withSource="open">
   <Story name="default">
+    { ()=> {
+    const initialStartDate = moment().subtract(1, 'month');
+    const initialEndDate = moment();
+    const [startDate, setStartDate] = useState(initialStartDate);
+    const [endDate, setEndDate] = useState(initialEndDate);
+    const [focusedInput, setFocusedInput] = useState(null);
+    const onDateChange = ({startDate, endDate}) => {
+        setStartDate(startDate);
+        setEndDate(endDate);
+    }
+    const onFocusChange = (fInput) => {
+        setFocusedInput(fInput);
+    }
+        return (
+            <div style={{ height: '330px'}}>
+                <DatePicker
+                    showInnerPresets
+                    startDate={startDate}
+                    startDateId="startDate"
+                    endDate={endDate}
+                    endDateId="endDate"
+                    onDateChange={onDateChange}
+                    focusedInput={focusedInput}
+                    onFocusChange={onFocusChange}
+                />
+            </div>
+        )
+  }}
+  </Story>
+</Preview>
+
+<Preview withSource="open">
+  <Story name="with presets">
     { ()=> {
     const initialStartDate = moment().subtract(1, 'month');
     const initialEndDate = moment();
@@ -55,6 +88,7 @@ const Page = () => (
                     onDateChange={onDateChange}
                     focusedInput={focusedInput}
                     onFocusChange={onFocusChange}
+                    showPresets      
                 />
             </div>
         )
@@ -62,3 +96,37 @@ const Page = () => (
   </Story>
 </Preview>
 
+<Preview withSource="open">
+  <Story name="with dropdown presets">
+    { ()=> {
+    const initialStartDate = moment().subtract(1, 'month');
+    const initialEndDate = moment();
+    const [startDate, setStartDate] = useState(initialStartDate);
+    const [endDate, setEndDate] = useState(initialEndDate);
+    const [focusedInput, setFocusedInput] = useState(null);
+    const onDateChange = ({startDate, endDate}) => {
+        setStartDate(startDate);
+        setEndDate(endDate);
+    }
+    const onFocusChange = (fInput) => {
+        setFocusedInput(fInput);
+    }
+        return (
+            <div style={{ height: '330px'}}>
+                <DatePicker
+                    showPresets
+                    showInnerPresets
+                    startDate={startDate}
+                    startDateId="startDate"
+                    endDate={endDate}
+                    endDateId="endDate"
+                    onDateChange={onDateChange}
+                    focusedInput={focusedInput}
+                    onFocusChange={onFocusChange}
+                    showPresetsWithDropdown      
+                />
+            </div>
+        )
+  }}
+  </Story>
+</Preview>
\ No newline at end of file
diff --git a/src/components/DayPicker/DayPicker.tsx b/src/components/DayPicker/DayPicker.tsx
index 944a0de7c..e52b17c91 100644
--- a/src/components/DayPicker/DayPicker.tsx
+++ b/src/components/DayPicker/DayPicker.tsx
@@ -7,6 +7,12 @@ import styled from 'styled-components';
 import DayPickerWrapper from './DayPickerWrapper';
 import Dropdown from '../Dropdown';
 import { getMonthOptions, getYearOptions } from '../../utils/helpers';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsEvents,
+  AnalyticsProps,
+} from '../../analytics';
 
 const CustomMonthContainer = styled.div`
   display: flex;
@@ -36,7 +42,8 @@ type Props = {
   placeholder?: string;
   onClose?: () => any;
   disablePastDays?: boolean;
-};
+  displayFormat?: string;
+} & AnalyticsProps;
 
 const DayPicker = ({
   isOutsideRange = () => false,
@@ -50,6 +57,8 @@ const DayPicker = ({
   placeholder,
   onClose,
   disablePastDays = false,
+  displayFormat = 'DD/MM/YYYY',
+  tag = '',
 }: Props) => {
   const handleDisablePastDays = (days: any) => !isInclusivelyAfterDay(days, moment());
 
@@ -57,6 +66,7 @@ const DayPicker = ({
     <CustomMonthContainer>
       <DropdownContainer>
         <Dropdown
+          tag="dropdown_month"
           options={getMonthOptions()}
           value={month.month().toString()}
           onChange={(val: any) => onMonthSelect(month, val)}
@@ -64,6 +74,7 @@ const DayPicker = ({
       </DropdownContainer>
       <DropdownContainer>
         <Dropdown
+          tag="dropdown_year"
           options={getYearOptions()}
           value={month.year().toString()}
           onChange={(val: any) => onYearSelect(month, val)}
@@ -72,21 +83,67 @@ const DayPicker = ({
     </CustomMonthContainer>
   );
   return (
-    <DayPickerWrapper>
-      <SingleDatePicker
-        id={id}
-        isOutsideRange={disablePastDays ? handleDisablePastDays : isOutsideRange}
-        onDateChange={onDateChange}
-        onFocusChange={onFocusChange}
-        renderMonthElement={renderMonthElement}
-        focused={focused}
-        date={typeof date === 'string' ? moment(date) : date}
-        numberOfMonths={numberOfMonths}
-        disabled={disabled}
-        placeholder={placeholder}
-        onClose={onClose}
-      />
-    </DayPickerWrapper>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <DayPickerWrapper
+          onClick={() => {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.DAYPICKER,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }}
+        >
+          <SingleDatePicker
+            displayFormat={displayFormat}
+            id={id}
+            isOutsideRange={disablePastDays ? handleDisablePastDays : isOutsideRange}
+            onDateChange={(dateChanged: Moment | null) => {
+              tracker.track({
+                event: AnalyticsEvents.DATEPICKER_CHANGE,
+                type: AnalyticsComponentType.DATEPICKER,
+                tag: `date: ${moment(dateChanged).format('DD-MM-YYYY')}`,
+                pages,
+                merchantId,
+                ip,
+              });
+              onDateChange(dateChanged);
+            }}
+            onFocusChange={onFocusChange}
+            renderMonthElement={renderMonthElement}
+            focused={focused}
+            date={date ? moment(date) : null}
+            numberOfMonths={numberOfMonths}
+            disabled={disabled}
+            placeholder={placeholder}
+            onClose={onClose}
+            onNextMonthClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DAYPICKER,
+                tag: 'daypicker_next_month',
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
+            onPrevMonthClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.DAYPICKER,
+                tag: `daypicker_prev_month`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }}
+          />
+        </DayPickerWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };
 
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
new file mode 100644
index 000000000..af946e297
--- /dev/null
+++ b/src/components/Drawer/Drawer.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import DrawerContainer from './DrawerContainer';
+import { AnalyticsProps } from '../../analytics';
+
+type Props = {
+  handleClose: () => void;
+  isOpen: boolean;
+  width?: string;
+} & AnalyticsProps;
+
+const Drawer: React.FC<Props> = ({ children, handleClose, isOpen, width = '40%' }) => (
+  <DrawerContainer shouldShowDrawer={isOpen} closeDrawer={handleClose} width={width}>
+    {children}
+  </DrawerContainer>
+);
+export default Drawer;
diff --git a/src/components/Drawer/DrawerContainer.tsx b/src/components/Drawer/DrawerContainer.tsx
new file mode 100644
index 000000000..53efbf069
--- /dev/null
+++ b/src/components/Drawer/DrawerContainer.tsx
@@ -0,0 +1,44 @@
+import React, { useRef, useEffect } from 'react';
+import { CloseSection, StyledIcon, SideDrawer } from './styles';
+
+interface Props {
+  shouldShowDrawer: boolean;
+  closeDrawer: (event: any) => void;
+  width: string;
+}
+
+const DrawerContainer: React.FC<Props> = ({ shouldShowDrawer, children, closeDrawer, width }) => {
+  const reference = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const listener = (event: { target: any }) => {
+      // if inside drawer
+      if (!reference.current || reference.current.contains(event.target)) {
+        return;
+      }
+
+      closeDrawer(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [reference, closeDrawer]);
+
+  return (
+    <>
+      <SideDrawer isOpen={shouldShowDrawer} ref={reference} width={width}>
+        <CloseSection>
+          <StyledIcon onClick={closeDrawer} />
+        </CloseSection>
+        {children}
+      </SideDrawer>
+    </>
+  );
+};
+
+export default DrawerContainer;
diff --git a/src/components/Drawer/drawer.stories.mdx b/src/components/Drawer/drawer.stories.mdx
new file mode 100644
index 000000000..30e21a019
--- /dev/null
+++ b/src/components/Drawer/drawer.stories.mdx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import Drawer from './'
+
+<Meta title="Drawer" component={<Drawer/>} />
+
+# Drawer
+
+A simple Drawer controlled component
+
+```jsx
+import { Drawer } from '@inplayer-org/inplayer-ui';
+
+const Page = () => (
+  <Drawer />
+)
+```
+
+
+### Standard drawer
+<Preview withSource="open">
+  <Story name="standard">
+    { () => {
+        const [isOpen, setisOpen] = useState(false);
+        const handleToggleDrawer = () => {
+          setisOpen(!isOpen);
+        };
+        const handleClose = () => {
+          setisOpen(false);
+        };
+        return (
+            <div>
+              <button type="button" onClick={handleToggleDrawer}>
+                Open drawer
+              </button> 
+              <Drawer isOpen={isOpen} handleClose={handleClose}> Hi there! </Drawer>
+            </div>
+        )
+  }}
+  </Story>
+</Preview>
+
+
diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts
new file mode 100644
index 000000000..d7bddb736
--- /dev/null
+++ b/src/components/Drawer/index.ts
@@ -0,0 +1,3 @@
+import Drawer from './Drawer';
+
+export default Drawer;
diff --git a/src/components/Drawer/styles.ts b/src/components/Drawer/styles.ts
new file mode 100644
index 000000000..94b997bc0
--- /dev/null
+++ b/src/components/Drawer/styles.ts
@@ -0,0 +1,41 @@
+import { ImCross } from 'react-icons/im';
+import styled, { css } from 'styled-components';
+
+import colors from '../../theme/colors';
+
+interface SideDrawerProps {
+  isOpen: boolean;
+  width: string;
+}
+export const SideDrawer = styled.div<SideDrawerProps>`
+  height: 100%;
+  background: ${colors.white};
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: ${({ width }) => width};
+  z-index: 1000;
+
+  transform: translateX(100%);
+  transition: transform 0.4s ease-out;
+
+  ${({ isOpen }) =>
+    isOpen &&
+    css`
+      transform: translateX(0);
+      box-shadow: 0 20px 25px 10000px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    `}
+`;
+export const CloseSection = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin: 1rem;
+`;
+export const StyledIcon = styled(ImCross)`
+  color: ${colors.fontGray};
+
+  :hover {
+    color: ${colors.fontDarkGray};
+    cursor: pointer;
+  }
+`;
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index bd5f80591..0f73ce9b2 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,17 +1,27 @@
 import React, { SelectHTMLAttributes, ChangeEvent } from 'react';
+import { snakeCase } from 'lodash';
 import DropdownContainer from './DropdownContainer';
+import {
+  AnalyticsEvents,
+  AnalyticsComponentType,
+  AnalyticsComponent,
+  AnalyticsProps,
+} from '../../analytics';
 
-type Option = {
+export type Option = {
   value: string;
   displayName: string;
-};
+  disabled?: boolean;
+} & AnalyticsProps;
 
 type DefaultOption = {
   displayName: string;
   disabled?: boolean;
-};
+} & AnalyticsProps;
+
+type SelectHTMLProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'>;
 
-type Props = SelectHTMLAttributes<HTMLSelectElement> & {
+type Props = SelectHTMLProps & {
   modifiers?: Array<string>;
   value: string;
   onChange?: (value: string) => void;
@@ -20,13 +30,15 @@ type Props = SelectHTMLAttributes<HTMLSelectElement> & {
   disabled?: boolean;
   defaultOption?: DefaultOption;
   className?: string;
-};
+} & AnalyticsProps;
 
 const Dropdown: React.FC<Props> = ({
   options,
   onChange = () => null,
   defaultOption,
   className,
+  tag,
+  onClick,
   ...rest
 }) => {
   const onDropdownChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -34,19 +46,56 @@ const Dropdown: React.FC<Props> = ({
       onChange(e.target.value);
     }
   };
+
   return (
-    <DropdownContainer onChange={onDropdownChange} className={className} {...rest}>
-      {defaultOption && (
-        <option value="" disabled={defaultOption.disabled}>
-          {defaultOption.displayName}
-        </option>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <DropdownContainer
+          onChange={(e) => {
+            onDropdownChange?.(e);
+
+            if (tag) {
+              const selectedValue = e.currentTarget.selectedIndex;
+              tracker.track({
+                event: AnalyticsEvents.DROPDOWN_CHANGE,
+                type: AnalyticsComponentType.DROPDOWN,
+                tag: `${tag}_${snakeCase(e.currentTarget.options[selectedValue].text)}`,
+                pages,
+                merchantId,
+                ip,
+              });
+            }
+          }}
+          onClick={(e) => {
+            onClick?.(e);
+
+            if (tag) {
+              tracker.track({
+                event: AnalyticsEvents.DROPDOWN_SELECT,
+                type: AnalyticsComponentType.DROPDOWN,
+                tag,
+                pages,
+                merchantId,
+                ip,
+              });
+            }
+          }}
+          className={className}
+          {...rest}
+        >
+          {defaultOption && (
+            <option value="" disabled={defaultOption.disabled}>
+              {defaultOption.displayName}
+            </option>
+          )}
+          {options.map(({ value, displayName, disabled = false }) => (
+            <option disabled={disabled} value={value} key={value}>
+              {displayName}
+            </option>
+          ))}
+        </DropdownContainer>
       )}
-      {options.map(({ value, displayName }) => (
-        <option value={value} key={value}>
-          {displayName}
-        </option>
-      ))}
-    </DropdownContainer>
+    </AnalyticsComponent>
   );
 };
 
diff --git a/src/components/Grid/Cell.ts b/src/components/Grid/Cell.ts
index 9386009da..c19b97c37 100644
--- a/src/components/Grid/Cell.ts
+++ b/src/components/Grid/Cell.ts
@@ -1,4 +1,5 @@
 import styled, { CSSProperties } from 'styled-components';
+import { AnalyticsProps } from '../../analytics';
 
 type CellProps = {
   width?: CSSProperties;
@@ -8,7 +9,7 @@ type CellProps = {
   center?: CSSProperties;
   area?: CSSProperties;
   middle?: CSSProperties;
-};
+} & AnalyticsProps;
 
 const Cell = styled.div<CellProps>`
   height: 100%;
diff --git a/src/components/Grid/Container.ts b/src/components/Grid/Container.ts
index c859eed59..ceb5ae08f 100644
--- a/src/components/Grid/Container.ts
+++ b/src/components/Grid/Container.ts
@@ -1,4 +1,5 @@
 import styled, { CSSProperties, CSSObject } from 'styled-components';
+import { AnalyticsProps } from '../../analytics';
 
 const autoRows = ({ minRowHeight = '20px' }) => `minmax(${minRowHeight}, auto)`;
 
@@ -18,7 +19,7 @@ type GridContainerProps = {
   areas?: any;
   justifyContent?: CSSProperties;
   alignContent?: CSSProperties;
-};
+} & AnalyticsProps;
 
 const GridContainer = styled.div<GridContainerProps>`
   display: grid;
diff --git a/src/components/Input/ErrorField.tsx b/src/components/Input/ErrorField.tsx
new file mode 100644
index 000000000..e69e15420
--- /dev/null
+++ b/src/components/Input/ErrorField.tsx
@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import { ErrorMessage, ErrorMessageProps } from 'formik';
+import styled from 'styled-components';
+import colors from '../../theme/colors';
+
+const ErrorMessageWrapper = styled(ErrorMessage)<ErrorMessageProps>`
+  margin-top: 0.5rem;
+  display: block;
+  color: ${colors.red};
+`;
+
+const ErrorField: FunctionComponent<ErrorMessageProps> = ({ className, ...rest }) => (
+  <ErrorMessageWrapper component="span" className={className} {...rest} />
+);
+
+export default ErrorField;
diff --git a/src/components/Input/FormikInput.tsx b/src/components/Input/FormikInput.tsx
new file mode 100644
index 000000000..3037d51e1
--- /dev/null
+++ b/src/components/Input/FormikInput.tsx
@@ -0,0 +1,45 @@
+import React, { FunctionComponent, InputHTMLAttributes } from 'react';
+import { FieldProps } from 'formik';
+import styled from 'styled-components';
+import { AnalyticsProps } from 'index';
+import Input from './Input';
+
+const InputContainer = styled.div`
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-column-end: span 12;
+  grid-row-end: span 1;
+  flex: 1;
+`;
+
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'form'> & FieldProps & AnalyticsProps;
+
+const FormikInput: FunctionComponent<Props> = ({
+  id,
+  field,
+  value,
+  form: _,
+  placeholder = '',
+  tag = '',
+  ...rest
+}) => {
+  const { name: fieldName, ...fieldRest } = field;
+
+  return (
+    <InputContainer>
+      <Input
+        tag={tag}
+        type="text"
+        id={id || fieldName}
+        placeholder={placeholder}
+        name={fieldName}
+        {...fieldRest}
+        {...rest}
+        value={value ?? fieldRest.value}
+      />
+    </InputContainer>
+  );
+};
+
+export default FormikInput;
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index be89ccec7..665080860 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,8 +1,14 @@
-import React, { ChangeEvent, ReactNode, forwardRef, RefObject } from 'react';
+import React, { ChangeEvent, ReactNode, forwardRef, RefObject, KeyboardEvent } from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp, switchProp } from 'styled-tools';
 import { MdSearch } from 'react-icons/md';
 import colors from '../../theme/colors';
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 type Size = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -84,7 +90,7 @@ type Props = {
   sizeProp?: Size;
   icon?: ReactNode;
   className?: string;
-};
+} & AnalyticsProps;
 
 type RefType =
   | ((instance: HTMLInputElement | null) => void)
@@ -94,7 +100,7 @@ type RefType =
 
 const Input = forwardRef(
   (
-    { type, placeholder, onChange, sizeProp, className = '', icon, ...rest }: Props,
+    { type, placeholder, onChange, sizeProp, className = '', icon, tag = '', ...rest }: Props,
     ref: RefType
   ) => {
     const onInputChange = (e: ChangeEvent<HTMLInputElement>): any => {
@@ -106,35 +112,119 @@ const Input = forwardRef(
 
     if (type === 'search') {
       return (
-        <InputWrapper>
-          <IconContainer>
-            <MdSearch />
-          </IconContainer>
-          <StyledInput
-            sizeProp={sizeProp}
-            ref={ref}
-            type={type}
-            placeholder={placeholder}
-            {...rest}
-            onChange={onInputChange}
-          />
-        </InputWrapper>
+        <AnalyticsComponent>
+          {({ pages, tracker, merchantId, ip }) => (
+            <InputWrapper>
+              <IconContainer>
+                <MdSearch />
+              </IconContainer>
+              <StyledInput
+                sizeProp={sizeProp}
+                ref={ref}
+                type={type}
+                placeholder={placeholder}
+                onChange={onInputChange}
+                onBlur={() => {
+                  if (tag) {
+                    tracker.track({
+                      event: AnalyticsEvents.FOCUS_OUT,
+                      type: AnalyticsComponentType.INPUT,
+                      tag,
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  }
+                }}
+                onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+                  if (e.key === 'Enter') {
+                    if (tag) {
+                      tracker.track({
+                        event: AnalyticsEvents.KEYBOARD_EVENT,
+                        type: AnalyticsComponentType.INPUT,
+                        tag: `${tag}_enter`,
+                        pages,
+                        merchantId,
+                        ip,
+                      });
+                    }
+                  }
+                }}
+                onClick={() => {
+                  if (tag) {
+                    tracker.track({
+                      event: AnalyticsEvents.CLICK,
+                      type: AnalyticsComponentType.INPUT,
+                      tag,
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  }
+                }}
+                {...rest}
+              />
+            </InputWrapper>
+          )}
+        </AnalyticsComponent>
       );
     }
 
     return (
-      <InputWrapper className={className}>
-        <IconContainer>{icon}</IconContainer>
-        <StyledInput
-          sizeProp={sizeProp}
-          ref={ref}
-          type={type || 'text'}
-          placeholder={placeholder}
-          onChange={onInputChange}
-          icon={icon}
-          {...rest}
-        />
-      </InputWrapper>
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <InputWrapper className={className}>
+            <IconContainer>{icon}</IconContainer>
+            <StyledInput
+              sizeProp={sizeProp}
+              ref={ref}
+              type={type || 'text'}
+              placeholder={placeholder}
+              onChange={onInputChange}
+              icon={icon}
+              onBlur={() => {
+                if (tag) {
+                  tracker.track({
+                    event: AnalyticsEvents.FOCUS_OUT,
+                    type: AnalyticsComponentType.INPUT,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+              }}
+              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+                if (tag) {
+                  if (e.key === 'Enter') {
+                    tracker.track({
+                      event: AnalyticsEvents.KEYBOARD_EVENT,
+                      type: AnalyticsComponentType.INPUT,
+                      tag: `${tag}_enter`,
+                      pages,
+                      merchantId,
+                      ip,
+                    });
+                  }
+                }
+              }}
+              onClick={() => {
+                if (tag) {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.INPUT,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+              }}
+              {...rest}
+            />
+          </InputWrapper>
+        )}
+      </AnalyticsComponent>
     );
   }
 );
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 99ec86803..9275f8868 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import { applyStyleModifiers } from 'styled-components-modifiers';
 import { fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge } from '../../modifiers';
+import { AnalyticsProps } from '../../analytics';
 
 const typographyModifiers = {
   fontSizeExtraSmall,
@@ -10,7 +11,7 @@ const typographyModifiers = {
   fontSizeLarge,
 };
 
-const Label = styled.label<{ disabled?: boolean }>`
+const Label = styled.label<{ disabled?: boolean } & AnalyticsProps>`
   font-size: ${({ theme }) => theme.font.sizes.medium};
   font-weight: ${({ theme }) => theme.font.weights.normal};
   color: ${({ theme }) => theme.palette.text.main};
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index dac0cd1e8..7aec8cd3c 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 const directions: Record<string, any> = {
   up: '16,0 32,32 0,32',
@@ -33,12 +34,12 @@ type Props = {
   color?: string;
   lineWidth?: number;
   direction?: string;
-};
+} & AnalyticsProps;
 
 const Loader = ({
   height = 100,
   width = 100,
-  color = `${colors.skyBlue}`,
+  color = `${colors.alizarin}`,
   lineWidth = 2,
   direction = 'right',
 }: Props) => (
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index fae9f44b6..110ac5706 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -6,6 +6,7 @@ import { transparentize } from 'polished';
 import colors from '../../theme/colors';
 import ModalHeader from './ModalHeader';
 import ModalContent from './ModalContent';
+import { AnalyticsProps, AnalyticsPage } from '../../analytics';
 
 interface ModalWrapperProps {
   isOpen: boolean;
@@ -40,9 +41,10 @@ type Props = {
   isOverflowVisible?: boolean;
   className?: string;
   children: ReactChild;
-};
+} & AnalyticsProps;
 
 const Modal = ({
+  tag = '',
   isOverflowVisible = false,
   isModalOpen,
   closeModal,
@@ -50,16 +52,18 @@ const Modal = ({
   title,
   className = '',
 }: Props) => (
-  <ModalWrapper
-    className={className}
-    isOpen={isModalOpen}
-    onClick={isModalOpen ? closeModal : undefined}
-  >
-    <ModalContainer isOverflowVisible={isOverflowVisible} onClick={(e) => e.stopPropagation()}>
-      <ModalHeader closeModal={closeModal}>{title}</ModalHeader>
-      <ModalContent>{children}</ModalContent>
-    </ModalContainer>
-  </ModalWrapper>
+  <AnalyticsPage tag={tag} type="modal">
+    <ModalWrapper
+      className={className}
+      isOpen={isModalOpen}
+      onClick={isModalOpen ? closeModal : undefined}
+    >
+      <ModalContainer isOverflowVisible={isOverflowVisible} onClick={(e) => e.stopPropagation()}>
+        <ModalHeader closeModal={closeModal}>{title}</ModalHeader>
+        <ModalContent>{children}</ModalContent>
+      </ModalContainer>
+    </ModalWrapper>
+  </AnalyticsPage>
 );
 
 export default Modal;
diff --git a/src/components/Modal/ModalHeader.tsx b/src/components/Modal/ModalHeader.tsx
index ba4829480..a309dd488 100644
--- a/src/components/Modal/ModalHeader.tsx
+++ b/src/components/Modal/ModalHeader.tsx
@@ -1,5 +1,6 @@
 import React, { ReactChild } from 'react';
 import styled from 'styled-components';
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 
 import colors from '../../theme/colors';
 import Typography from '../Typography';
@@ -36,8 +37,26 @@ const IconClose = styled.span`
 
 const ModalHeader = ({ children, closeModal }: Props) => (
   <HeaderWrapper>
-    <Title variant="h4">{children}</Title>
-    <IconClose onClick={closeModal} />
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <>
+          <Title variant="h4">{children}</Title>
+          <IconClose
+            onClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.MODAL,
+                tag: 'icon_close',
+                pages,
+                merchantId,
+                ip,
+              });
+              closeModal();
+            }}
+          />
+        </>
+      )}
+    </AnalyticsComponent>
   </HeaderWrapper>
 );
 
diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
index 5a609a442..c676915a2 100644
--- a/src/components/Note/Note.tsx
+++ b/src/components/Note/Note.tsx
@@ -4,14 +4,15 @@ import { MdInfoOutline, MdWarning } from 'react-icons/md';
 import { IoIosCheckmarkCircle } from 'react-icons/io';
 
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 import NoteWrapper, { NoteType } from './NoteWrapper';
 
-interface Props {
+type Props = {
   title: string;
   text: string;
   type: NoteType;
-}
+} & AnalyticsProps;
 
 interface IconProps {
   color?: string;
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index 95888297b..94acec439 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import NotificationContainer, { CloseIcon } from './NotificationContainer';
+import { AnalyticsProps } from '../../analytics';
 
 export type NotificationVariant = 'success' | 'danger' | 'warning' | '';
 
@@ -10,7 +11,7 @@ type Props = {
   variant?: NotificationVariant;
   duration?: number;
   close?: () => void;
-};
+} & AnalyticsProps;
 
 const divs: Array<HTMLDivElement> = [];
 
diff --git a/src/components/Pagination/PageBoxContainer.tsx b/src/components/Pagination/PageBoxContainer.tsx
new file mode 100644
index 000000000..8c3dd7b43
--- /dev/null
+++ b/src/components/Pagination/PageBoxContainer.tsx
@@ -0,0 +1,34 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import {
+  AnalyticsComponent,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+  AnalyticsProps,
+} from '../../analytics';
+import { PageBox, BoxStyles } from './styled';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement>, AnalyticsProps, BoxStyles {}
+const PageBoxContainer = ({ onClick, tag = '', ...rest }: Props) => (
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <PageBox
+        onClick={(e) => {
+          onClick?.(e);
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.PAGINATION,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
+        {...rest}
+      />
+    )}
+  </AnalyticsComponent>
+);
+
+export default PageBoxContainer;
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 89de7dd4d..fd0afd43e 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { FaAngleDoubleLeft, FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from 'react-icons/fa';
-import { PageBox, PaginationContainer } from './styled';
+import { PaginationContainer } from './styled';
+import { AnalyticsProps } from '../../analytics';
+import PageBoxContainer from './PageBoxContainer';
 
 type PaginationProps = {
   onPageChange: (pageNumber: number) => void;
@@ -8,7 +10,7 @@ type PaginationProps = {
   startPage?: number;
   numberOfPagesDisplayed?: number;
   itemsPerPage?: number;
-};
+} & AnalyticsProps;
 
 // Kibana has limit of 10000 items
 const itemsLimit = 10000;
@@ -121,42 +123,59 @@ const Pagination = ({
 
   return (
     <PaginationContainer>
-      <PageBox type="button" disabled={activePage === 1} onClick={goToStart}>
+      <PageBoxContainer
+        tag="button_page_first"
+        type="button"
+        disabled={activePage === 1}
+        onClick={goToStart}
+      >
         <FaAngleDoubleLeft />
-      </PageBox>
-      <PageBox type="button" disabled={activePage === 1} onClick={onPageClick(activePage - 1)}>
+      </PageBoxContainer>
+      <PageBoxContainer
+        tag="button_page_previous"
+        type="button"
+        disabled={activePage === 1}
+        onClick={onPageClick(activePage - 1)}
+      >
         <FaAngleLeft />
-      </PageBox>
+      </PageBoxContainer>
       {!visiblePages.some((index) => index === 1) && (
-        <PageBox type="button" hideBorder onClick={onDotsClick(false)}>
+        <PageBoxContainer type="button" hideBorder onClick={onDotsClick(false)}>
           •••
-        </PageBox>
+        </PageBoxContainer>
       )}
       {visiblePages.map((index) => (
-        <PageBox
+        <PageBoxContainer
+          tag={`button_page_${index}`}
           type="button"
           selected={activePage === index}
           key={index}
           onClick={onPageClick(index)}
         >
           {index}
-        </PageBox>
+        </PageBoxContainer>
       ))}
       {!visiblePages.some((index) => index === totalPages) && (
-        <PageBox type="button" hideBorder onClick={onDotsClick(true)}>
+        <PageBoxContainer type="button" hideBorder onClick={onDotsClick(true)}>
           •••
-        </PageBox>
+        </PageBoxContainer>
       )}
-      <PageBox
+      <PageBoxContainer
+        tag="button_page_next"
         type="button"
         disabled={activePage === totalPages}
         onClick={onPageClick(activePage + 1)}
       >
         <FaAngleRight />
-      </PageBox>
-      <PageBox type="button" disabled={activePage === totalPages} onClick={goToEnd}>
+      </PageBoxContainer>
+      <PageBoxContainer
+        tag="button_page_last"
+        type="button"
+        disabled={activePage === totalPages}
+        onClick={goToEnd}
+      >
         <FaAngleDoubleRight />
-      </PageBox>
+      </PageBoxContainer>
     </PaginationContainer>
   );
 };
diff --git a/src/components/Pagination/styled.ts b/src/components/Pagination/styled.ts
index 37822dad5..2f59baa21 100644
--- a/src/components/Pagination/styled.ts
+++ b/src/components/Pagination/styled.ts
@@ -1,20 +1,20 @@
+import { AnalyticsProps } from 'analytics';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import colors from '../../theme/colors';
 
+export type BoxStyles = {
+  disabled?: boolean;
+  selected?: boolean;
+  hideBorder?: boolean;
+};
+
 export const PaginationContainer = styled.div`
   display: flex;
   justify-content: center;
 `;
 
-const getBoxStyles = ({
-  disabled = false,
-  selected = false,
-}: {
-  disabled?: boolean;
-  selected?: boolean;
-  hideBorder?: boolean;
-}) => {
+const getBoxStyles = ({ disabled = false, selected = false }: BoxStyles) => {
   if (disabled) {
     return css`
       cursor: not-allowed;
@@ -30,21 +30,21 @@ const getBoxStyles = ({
     `;
   }
   return css`
-  :hover {
-    border: 1px solid ${colors.skyBlue};
-    ${ifProp(
-      'hideBorder',
-      css`
-        border: none;
-      `
-    )}
-    color: ${colors.skyBlue};
-    font-weight: bold;
-  }
-`;
+    :hover {
+      border: 1px solid ${colors.skyBlue};
+      ${ifProp(
+        'hideBorder',
+        css`
+          border: none;
+        `
+      )}
+      color: ${colors.skyBlue};
+      font-weight: bold;
+    }
+  `;
 };
 
-export const PageBox = styled.button`
+export const PageBox = styled.button<AnalyticsProps & BoxStyles>`
   width: fit-content;
   min-width: 2rem;
   height: 2rem;
@@ -52,7 +52,7 @@ export const PageBox = styled.button`
   margin: 0 0.2rem;
   text-align: center;
   border: 1px solid ${colors.gray};
-  color: ${({ theme }) => theme.palette.text.main}
+  color: ${({ theme }) => theme.palette.text.main};
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: ${({ theme }) => theme.palette.background.main};
diff --git a/src/components/PillLabel/PillLabel.ts b/src/components/PillLabel/PillLabel.ts
index 0c181eecb..a182472a3 100644
--- a/src/components/PillLabel/PillLabel.ts
+++ b/src/components/PillLabel/PillLabel.ts
@@ -3,6 +3,7 @@ import { applyStyleModifiers } from 'styled-components-modifiers';
 import { transparentize } from 'polished';
 import { switchProp } from 'styled-tools';
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 const modifiers = {
   primary: () => `
@@ -32,7 +33,7 @@ const modifiers = {
   `,
 };
 
-const PillLabel = styled.span<{ size?: string; modifiers?: Array<string> }>`
+const PillLabel = styled.span<{ size?: string; modifiers?: Array<string> } & AnalyticsProps>`
   display: inline-block;
   background: ${colors.white};
   color: ${({ theme }) => theme.palette.text.main};
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index 137b4d8ca..70f2c7b83 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Line, Circle } from 'rc-progress';
+import { AnalyticsProps } from '../../analytics';
 
 type ProgressType = 'circle' | 'line';
 
@@ -19,7 +20,7 @@ type RCProgressProps = {
   gapPosition?: 'top' | 'right' | 'bottom' | 'left';
 };
 
-type Props = Type & RCProgressProps;
+type Props = Type & RCProgressProps & AnalyticsProps;
 
 const Progress = ({ type, ...rest }: Props) =>
   type === 'circle' ? <Circle {...rest} /> : <Line {...rest} />;
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index ce9e46330..8e6e1f722 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,5 +1,11 @@
 import React, { ChangeEvent, InputHTMLAttributes } from 'react';
 import { StyledLabel, Root, Input, Fill } from './RadioWrapper';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsEvents,
+  AnalyticsProps,
+} from '../../analytics';
 
 type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
   label: string;
@@ -9,7 +15,7 @@ type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
   onChange: (e: ChangeEvent<HTMLInputElement>) => any;
   onBlur?: (e: any) => any;
   disabled?: boolean;
-};
+} & AnalyticsProps;
 
 const Radio = ({
   label,
@@ -19,26 +25,43 @@ const Radio = ({
   onBlur = () => {},
   disabled = false,
   name = '',
+  tag = '',
   ...rest
 }: RadioProps) => (
-  <StyledLabel disabled={disabled}>
-    <Root disabled={disabled} checked={checked}>
-      <Input
-        id={id}
-        type="radio"
-        onChange={onChange}
-        name={name}
-        checked={checked}
-        value={label}
-        onBlur={onBlur}
-        disabled={disabled}
-        aria-checked={checked}
-        {...rest}
-      />
-      <Fill />
-    </Root>
-    <span>{label}</span>
-  </StyledLabel>
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <StyledLabel disabled={disabled}>
+        <Root disabled={disabled} checked={checked}>
+          <Input
+            id={id}
+            type="radio"
+            onChange={(e) => {
+              onChange(e);
+              if (tag) {
+                tracker.track({
+                  event: AnalyticsEvents.RADIOBUTTON_SELECT,
+                  type: AnalyticsComponentType.RADIO,
+                  tag,
+                  pages,
+                  merchantId,
+                  ip,
+                });
+              }
+            }}
+            name={name}
+            checked={checked}
+            value={label}
+            onBlur={onBlur}
+            disabled={disabled}
+            aria-checked={checked}
+            {...rest}
+          />
+          <Fill />
+        </Root>
+        <span>{label}</span>
+      </StyledLabel>
+    )}
+  </AnalyticsComponent>
 );
 
 export default Radio;
diff --git a/src/components/Radio/RadioWrapper.tsx b/src/components/Radio/RadioWrapper.tsx
index f7aa72b01..3c898aba2 100644
--- a/src/components/Radio/RadioWrapper.tsx
+++ b/src/components/Radio/RadioWrapper.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import Label from '../Label';
 import colors from '../../theme/colors';
 
-export const StyledLabel = styled(Label)`
+export const StyledLabel = styled(Label)<{ disabled: boolean }>`
   white-space: break-spaces;
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/StepWizard/Nav.tsx b/src/components/StepWizard/Nav.tsx
index 7ac8d6db4..ae071fa35 100644
--- a/src/components/StepWizard/Nav.tsx
+++ b/src/components/StepWizard/Nav.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 
+import { AnalyticsProps } from '../../analytics';
 import colors from '../../theme/colors';
 
 const StepNavigation = styled.div`
@@ -50,13 +51,13 @@ export type StepItem = {
   isDisabled: boolean;
   isCompleted: boolean;
   component: React.ReactChild;
-};
+} & AnalyticsProps;
 
 type Props = {
   steps: Array<StepItem>;
   activeStep: number;
   goToStep: (activeStep: number) => void;
-};
+} & AnalyticsProps;
 
 const Nav = ({ steps, goToStep, activeStep }: Props) => (
   <StepNavigation>
diff --git a/src/components/StepWizard/StepWizard.tsx b/src/components/StepWizard/StepWizard.tsx
index affbc074f..2d7aa90df 100644
--- a/src/components/StepWizard/StepWizard.tsx
+++ b/src/components/StepWizard/StepWizard.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Nav, { StepItem } from './Nav';
 import Step from './Step';
+import { AnalyticsPage, AnalyticsProps } from '../../analytics';
 
 type TransitionVariant = 'fadeInLeft' | 'fadeInRight' | 'fadeOutLeft' | 'fadeOutRight';
 
@@ -9,7 +10,7 @@ type StepWizardProps = {
   activeStep: number;
   onStepChange?: (activeStep: number) => void;
   transition?: TransitionVariant;
-};
+} & AnalyticsProps;
 
 const StepWizard = ({
   steps,
@@ -46,10 +47,10 @@ const StepWizard = ({
   });
 
   return (
-    <>
+    <AnalyticsPage tag={steps[activeStep].tag || ''} type="page">
       <Nav steps={steps} activeStep={activeStep} goToStep={goToStep} />
       <div>{renderSteps}</div>
-    </>
+    </AnalyticsPage>
   );
 };
 
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 025b8b9f8..4687a3197 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -3,6 +3,12 @@ import styled from 'styled-components';
 import colors from '../../theme/colors';
 import SwitchWrapper from './SwitchWrapper';
 import Label from '../Label';
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
 
 type SwitchProps = {
   checked: boolean;
@@ -10,7 +16,8 @@ type SwitchProps = {
   id: string;
   label: string;
   onChange: (checked: boolean) => void;
-};
+  className?: string;
+} & AnalyticsProps;
 
 const MarginLeftLabel = styled(Label)`
   margin-right: 0.5rem;
@@ -66,7 +73,15 @@ const Slider = styled.span`
   }
 `;
 
-const Switch = ({ id, checked, label, disabled = false, onChange }: SwitchProps) => {
+const Switch = ({
+  id,
+  checked,
+  label,
+  disabled = false,
+  onChange,
+  className,
+  tag = '',
+}: SwitchProps) => {
   const onToggleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target) {
       onChange(e.target.checked);
@@ -74,19 +89,37 @@ const Switch = ({ id, checked, label, disabled = false, onChange }: SwitchProps)
   };
 
   return (
-    <SwitchWrapper>
-      <MarginLeftLabel disabled={disabled} htmlFor={id}>
-        <Span>{label}</Span>
-        <Input
-          type="checkbox"
-          id={id}
-          disabled={disabled}
-          checked={checked}
-          onChange={onToggleChange}
-        />
-        <Slider />
-      </MarginLeftLabel>
-    </SwitchWrapper>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <SwitchWrapper className={className}>
+          <MarginLeftLabel disabled={disabled} htmlFor={id}>
+            <Span>{label}</Span>
+            <Input
+              type="checkbox"
+              id={id}
+              disabled={disabled}
+              checked={checked}
+              onChange={(e) => {
+                if (tag) {
+                  tracker.track({
+                    event: e.target.checked
+                      ? AnalyticsEvents.SWITCH_ON
+                      : AnalyticsEvents.SWITCH_OFF,
+                    type: AnalyticsComponentType.SWITCH,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+                onToggleChange(e);
+              }}
+            />
+            <Slider />
+          </MarginLeftLabel>
+        </SwitchWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };
 
diff --git a/src/components/TabNavigation/TabNavigation.tsx b/src/components/TabNavigation/TabNavigation.tsx
index 301893685..bb664d9af 100644
--- a/src/components/TabNavigation/TabNavigation.tsx
+++ b/src/components/TabNavigation/TabNavigation.tsx
@@ -1,8 +1,18 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsEvents,
+  AnalyticsProps,
+} from '../../analytics';
 
-const Tab = styled.a<{ active: boolean }>`
+type TabProps = {
+  active: boolean;
+} & AnalyticsProps;
+
+const Tab = styled.a<TabProps>`
   height: 100%;
   display: flex;
   align-items: center;
@@ -39,25 +49,40 @@ const TabContainer = styled.div`
 
 type NavigationTab = {
   title: string;
-};
+  subTag?: string;
+} & AnalyticsProps;
 
 export type Props = {
   tabs: Array<NavigationTab>;
   onTabClick: (index: number) => void;
   selectedTabIndex: number;
-};
+} & AnalyticsProps;
 
 const TabNavigation = ({ tabs, onTabClick, selectedTabIndex }: Props) => (
   <TabContainer>
     {tabs.map((tab, index) => (
-      <Tab
-        id={tab.title.toLowerCase()}
-        key={tab.title}
-        onClick={() => onTabClick(index)}
-        active={selectedTabIndex === index}
-      >
-        {tab.title}
-      </Tab>
+      <AnalyticsComponent key={tab.title}>
+        {({ pages, tracker, merchantId, ip }) => (
+          <Tab
+            key={tab.title}
+            id={tab.title.toLowerCase()}
+            onClick={() => {
+              tracker.track({
+                event: AnalyticsEvents.CLICK,
+                type: AnalyticsComponentType.TAB_NAVIGATION,
+                tag: tab.subTag || tab.tag || '',
+                pages,
+                merchantId,
+                ip,
+              });
+              onTabClick(index);
+            }}
+            active={selectedTabIndex === index}
+          >
+            {tab.title}
+          </Tab>
+        )}
+      </AnalyticsComponent>
     ))}
   </TabContainer>
 );
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 752b1bd84..38e7a73d4 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,8 +1,22 @@
 import 'react-dates/initialize';
 import React, { ReactNode, SyntheticEvent, Component } from 'react';
 import { CSSProperties } from 'styled-components';
+import { IoIosClose } from 'react-icons/io';
+import { Field, Formik, FormikProps } from 'formik';
+import { ObjectSchema } from 'yup';
+import ErrorField from '../Input/ErrorField';
+import FormikInput from '../Input/FormikInput';
+import colors from '../../theme/colors';
 import Grid from '../Grid';
 import Loader from '../Loader';
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
+
+// styled components
 import {
   ButtonTableRow,
   LoaderContainer,
@@ -14,6 +28,11 @@ import {
   TableHeaderCell,
   TableWithHeaderSectionContainer,
   TableWrapper,
+  StyledReactIcon,
+  StyledIcon,
+  StyledForm,
+  FormWrapper,
+  ItemEntriesTypography,
 } from './styled';
 
 interface Data {
@@ -26,14 +45,36 @@ type Render = {
   rowValues: Data;
 };
 
-type Column = {
+export interface ColumnFunctionProps {
+  value: string;
+  currentValue: string;
+  id: string;
+}
+
+export interface EditableFields {
+  fn: (props: ColumnFunctionProps) => void;
+  validationSchema: ObjectSchema<any>;
+}
+
+export type Column = {
   title: string;
   key: string;
-  render: ({ value, rowValues }: Render) => ReactNode;
+  render?: ({ value, rowValues }: Render) => ReactNode;
   style?: CSSProperties;
   alignRight?: any;
+  editable?: EditableFields;
 };
 
+interface FormValeus {
+  rowField: string;
+}
+interface EditIconsProps {
+  field: string;
+  rowId: string;
+  fn?: ({ value, currentValue, id }: ColumnFunctionProps) => any;
+  validationSchema?: ObjectSchema<any>;
+}
+
 type RowActions<T> =
   | Array<{
       icon: string | Node;
@@ -52,28 +93,34 @@ type TableOptions<T> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
+interface TableButtonProps extends AnalyticsProps {
+  label: string;
+  icon?: string | ReactNode;
+  onClick: (e: SyntheticEvent) => any;
+  type: string;
+}
+
 type Props<T = Data> = {
   columns: Array<Column> | any;
-  data: Array<any>;
+  data: Array<Data>;
   className?: string;
   style?: CSSProperties;
   options: TableOptions<T>;
   showLoader?: boolean;
   renderEmptyTable?: boolean;
-  tableButton?: {
-    label: string;
-    icon?: string | Node;
-    onClick: (e: SyntheticEvent) => any;
-    type: string;
-  };
+  tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
-};
+  editableId?: string;
+  hasItemEntries?: boolean;
+  totalItems?: number;
+} & AnalyticsProps;
 
 type State = {
   selected: {
     [key in number | string]: any;
   };
   selectedAll: boolean;
+  currentlyModifyingRowId?: string | null;
 };
 
 const rowActionsExist = (actions: RowActions<any>) =>
@@ -94,13 +141,15 @@ class Table<T> extends Component<Props<T>, State> {
     },
     showLoader: false,
     renderEmptyTable: false,
-    tableButton: null,
+    tableButton: [],
     actionsRowTitle: 'Actions',
+    hasItemEntries: false,
   };
 
   state: State = {
     selected: {},
     selectedAll: false,
+    currentlyModifyingRowId: null,
   };
 
   toggleRow = (id: number | string) => () => {
@@ -206,25 +255,145 @@ class Table<T> extends Component<Props<T>, State> {
       </TableHeaderCell>
     ));
 
+  renderEditIcons = ({ field, rowId, fn, validationSchema }: EditIconsProps) => {
+    const { currentlyModifyingRowId } = this.state;
+    if (currentlyModifyingRowId === rowId) {
+      return (
+        <Formik
+          initialValues={{ rowField: field }}
+          onSubmit={({ rowField }) => {
+            this.setState({
+              currentlyModifyingRowId: null,
+            });
+            fn?.({ value: field, currentValue: rowField, id: rowId });
+          }}
+          validationSchema={validationSchema}
+        >
+          {({ isValid, values: { rowField } }: FormikProps<FormValeus>) => (
+            <StyledForm>
+              <AnalyticsComponent>
+                {({ pages, tracker, merchantId, ip }) => (
+                  <FormWrapper>
+                    <Field
+                      tag="editable_text_input"
+                      type="text"
+                      name="rowField"
+                      component={FormikInput}
+                    />
+                    <StyledReactIcon
+                      data-testid="save"
+                      color={colors.green}
+                      onClick={() => {
+                        tracker.track({
+                          event: AnalyticsEvents.CLICK,
+                          type: AnalyticsComponentType.ICON,
+                          tag: 'icon_save',
+                          pages,
+                          merchantId,
+                          ip,
+                        });
+                        if (isValid) {
+                          fn?.({ value: field, currentValue: rowField, id: rowId });
+                          this.setState({
+                            currentlyModifyingRowId: null,
+                          });
+                        }
+                      }}
+                    />
+                    <StyledReactIcon
+                      data-testid="cancel"
+                      as={IoIosClose}
+                      color={colors.red}
+                      onClick={() => {
+                        tracker.track({
+                          event: AnalyticsEvents.CLICK,
+                          type: AnalyticsComponentType.ICON,
+                          tag: 'icon_cancel',
+                          pages,
+                          merchantId,
+                          ip,
+                        });
+                        this.setState({
+                          currentlyModifyingRowId: null,
+                        });
+                      }}
+                    />
+                  </FormWrapper>
+                )}
+              </AnalyticsComponent>
+              <ErrorField name="rowField" />
+            </StyledForm>
+          )}
+        </Formik>
+      );
+    }
+    return (
+      <AnalyticsComponent>
+        {({ pages, tracker, merchantId, ip }) => (
+          <>
+            {field}
+            <StyledIcon
+              onClick={() => {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.ICON,
+                  tag: 'icon_edit',
+                  pages,
+                  merchantId,
+                  ip,
+                });
+                this.setState({
+                  currentlyModifyingRowId: rowId,
+                });
+              }}
+            />
+          </>
+        )}
+      </AnalyticsComponent>
+    );
+  };
+
   renderData = (columns: Array<Column>, data: Array<Data>) => {
     const newColumns = this.generateColumns(columns);
     const newData = this.generateRows(data);
 
-    const { tableButton } = this.props;
+    const { tableButton, editableId = '0' } = this.props;
 
     return newData.map((row) => (
       <TableRow key={row.id} noBottomBorder={!tableButton}>
-        {newColumns.map((column: Column, index: number) => (
-          <TableCell
-            key={index}
-            isActionsCell={column.key === 'actions'}
-            style={column.style || {}}
-          >
-            {column.render
-              ? column.render({ value: row[column.key], rowValues: row })
-              : row[column.key]}
-          </TableCell>
-        ))}
+        {newColumns.map(({ render, key, editable, style }: Column, index: number) => {
+          const isEditable = editable
+            ? this.renderEditIcons({
+                field: row[key],
+                rowId: row[editableId],
+                fn: editable.fn,
+                validationSchema: editable.validationSchema,
+              })
+            : row[key];
+
+          const hasRenderFn = render ? render({ value: row[key], rowValues: row }) : isEditable;
+
+          const hasRenderAndEditable =
+            render && editable
+              ? this.renderEditIcons({
+                  field: render({ value: row[key], rowValues: row }) as string,
+                  rowId: row[editableId],
+                  fn: editable.fn,
+                  validationSchema: editable.validationSchema,
+                })
+              : hasRenderFn;
+
+          return (
+            <TableCell
+              isEditableCell={!!editable}
+              key={index}
+              isActionsCell={key === 'actions'}
+              style={style || {}}
+            >
+              {hasRenderAndEditable}
+            </TableCell>
+          );
+        })}
       </TableRow>
     ));
   };
@@ -238,6 +407,8 @@ class Table<T> extends Component<Props<T>, State> {
       showLoader,
       renderEmptyTable,
       tableButton,
+      hasItemEntries,
+      totalItems,
       options: { headerSection },
     } = this.props;
 
@@ -264,24 +435,30 @@ class Table<T> extends Component<Props<T>, State> {
         </thead>
         <tbody>{this.renderData(columns, data)}</tbody>
         <tfoot>
-          {tableButton && (
-            <ButtonTableRow>
+          {tableButton?.map((button: TableButtonProps) => (
+            <ButtonTableRow key={button.label}>
               <TableCell colSpan={columnContent.length}>
                 <TableButton
+                  tag={button.tag || ''}
                   modifiers={['buttonLink']}
                   fullWidth
                   fullHeight
-                  onClick={tableButton.onClick}
-                  icon={tableButton.icon}
+                  onClick={button.onClick}
+                  icon={button.icon}
                   iconPosition="left"
-                  type={tableButton.type}
+                  type={button.type}
                 >
-                  {tableButton.label}
+                  {button.label}
                 </TableButton>
               </TableCell>
             </ButtonTableRow>
-          )}
+          ))}
         </tfoot>
+        {hasItemEntries && (
+          <ItemEntriesTypography>
+            Showing 1 - {totalItems} of {totalItems} items
+          </ItemEntriesTypography>
+        )}
       </TableWrapper>
     );
   };
diff --git a/src/components/Table/styled.ts b/src/components/Table/styled.ts
index f702f7f18..f50ebc7cc 100644
--- a/src/components/Table/styled.ts
+++ b/src/components/Table/styled.ts
@@ -1,7 +1,10 @@
 import { ButtonHTMLAttributes } from 'react';
+import { Form } from 'formik';
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import { transparentize } from 'polished';
+import { IoIosCheckmark } from 'react-icons/io';
+import { FaRegEdit } from 'react-icons/fa';
 import colors from '../../theme/colors';
 import Checkbox from '../Checkbox';
 
@@ -40,6 +43,13 @@ const TableHeadRow = styled.tr`
   width: 100%;
 `;
 
+export const StyledIcon = styled(FaRegEdit)`
+  display: none;
+  position: absolute;
+  margin-left: 0.5rem;
+  cursor: pointer;
+`;
+
 const TableRow = styled.tr<{ noBottomBorder?: boolean }>`
   border-bottom: 1px solid ${colors.lightGray};
   width: 100%;
@@ -59,7 +69,13 @@ const ButtonTableRow = styled(TableRow)`
   border-top: 1px solid ${colors.gray};
 `;
 
-const TableCell = styled.td<{ isActionsCell?: boolean }>`
+interface TableCellProps {
+  isActionsCell?: boolean;
+  isEditableCell?: boolean;
+}
+
+const TableCell = styled.td<TableCellProps>`
+  ${({ isEditableCell }) => isEditableCell && 'width: 330px'};
   font-size: ${({ theme }) => theme.font.sizes.medium};
   padding: 0.4375rem 1%;
   vertical-align: middle;
@@ -76,6 +92,19 @@ const TableCell = styled.td<{ isActionsCell?: boolean }>`
       color: ${({ theme }) => theme.palette.text.main};
     }
   }
+
+  &:hover ${StyledIcon} {
+    display: inline-block;
+  }
+`;
+
+const StyledForm = styled(Form)`
+  width: 100% !important;
+  width: fit-content;
+`;
+
+const FormWrapper = styled.div`
+  display: flex;
 `;
 
 const TableHeaderCell = styled.th<any>`
@@ -113,6 +142,22 @@ const TableButton = styled(Button)<ButtonProps>`
   }
 `;
 
+interface StyledReactIconProps {
+  color: string;
+}
+
+export const StyledReactIcon = styled(IoIosCheckmark)<StyledReactIconProps>`
+  width: 2.2rem;
+  height: 2.2rem;
+  color: ${({ color }) => color};
+  cursor: pointer;
+`;
+
+const ItemEntriesTypography = styled.p`
+  color: #475467;
+  padding: 12px 32px;
+`;
+
 export {
   TableWithHeaderSectionContainer,
   TableWrapper,
@@ -124,4 +169,7 @@ export {
   LoaderContainer,
   TableCheckbox,
   TableButton,
+  StyledForm,
+  FormWrapper,
+  ItemEntriesTypography,
 };
diff --git a/src/components/Table/table.stories.mdx b/src/components/Table/table.stories.mdx
index 287578f90..602c87673 100644
--- a/src/components/Table/table.stories.mdx
+++ b/src/components/Table/table.stories.mdx
@@ -1,45 +1,59 @@
 import { useState } from 'react';
-import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
-import Table from './'
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import Table from './';
 import { MdDelete, MdErrorOutline } from 'react-icons/md';
-import Pagination from '../Pagination'
-import { columns, data } from './data.tsx'
-
-<Meta title="Table" component={<Table/>} />
+import Pagination from '../Pagination';
+import { columns, data } from './data.tsx';
+import { IoIosAddCircleOutline } from 'react-icons/io';
 
+<Meta title="Table" component={<Table />} />
 
 ```jsx
 import { Table } from '@inplayer-org/inplayer-ui';
-const Page = () => (
-  <Table />
-)
+const Page = () => <Table />;
 ```
 
 <Preview withSource="open">
   <Story name="default">
     <>
-    <Table
-            columns={columns}
-            data={data}
-            options={{
-                rowSelection: {
-                    active: true,
-                    action: (data) => console.log(data),
-                },
-                rowActions: [
-                    { icon: <MdDelete />, onClick: (id) => console.log(id), render: () => (<p>render</p>)},
-                      { icon: "cog", onClick: (id) => console.log(id), render: () => <p>render</p>},
-                      { icon: "trash", onClick: (id) => console.log(id) },
-                ],
-            }}
-        />
-        <Pagination
-            onPageChange={console.log}
-            totalItems={50}
-            startPage={4}
-            numberOfPagesDisplayed={10}
-            itemsPerPage={12}
-        />
-      </>
+      <Table
+        columns={columns}
+        data={data}
+        options={{
+          rowSelection: {
+            active: true,
+            action: (data) => console.log(data),
+          },
+          rowActions: [
+            { icon: <MdDelete />, onClick: (id) => console.log(id), render: () => <p>render</p> },
+            { icon: 'cog', onClick: (id) => console.log(id), render: () => <p>render</p> },
+            { icon: 'trash', onClick: (id) => console.log(id) },
+          ],
+        }}
+        tableButton={[
+          {
+            label: 'Table button 1',
+            icon: <IoIosAddCircleOutline />,
+            onClick: () => null,
+            type: 'button',
+          },
+          {
+            label: 'Table button 2',
+            icon: <IoIosAddCircleOutline />,
+            onClick: () => null,
+            type: 'button',
+          },
+        ]}
+        hasItemEntries
+        totalItems={10}
+      />
+      <Pagination
+        onPageChange={console.log}
+        totalItems={50}
+        startPage={4}
+        numberOfPagesDisplayed={10}
+        itemsPerPage={12}
+      />
+    </>
   </Story>
-</Preview>
\ No newline at end of file
+</Preview>
diff --git a/src/components/Tabs/Tab.ts b/src/components/Tabs/Tab.tsx
similarity index 92%
rename from src/components/Tabs/Tab.ts
rename to src/components/Tabs/Tab.tsx
index 45949b145..37eaaebb2 100644
--- a/src/components/Tabs/Tab.ts
+++ b/src/components/Tabs/Tab.tsx
@@ -1,9 +1,12 @@
 import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
-
 import colors from '../../theme/colors';
 
-const Tab = styled.div<{ selected: boolean }>`
+interface Props {
+  selected: boolean;
+}
+
+const Tab = styled.div<Props>`
   margin: 0;
   padding: 0.5rem 0;
   display: flex;
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 1b57ef57c..3fd75c39e 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,8 +1,14 @@
 import React, { HTMLAttributes, ReactElement } from 'react';
 import Tab from './Tab';
 import TabsWrapper from './TabsWrapper';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsEvents,
+  AnalyticsProps,
+} from '../../analytics';
 
-interface TabInfo {
+interface TabInfo extends AnalyticsProps {
   name: string;
 }
 
@@ -16,7 +22,7 @@ type TabsProps = HTMLAttributes<HTMLDivElement> &
     tabs: Array<TabInfo>;
     selectedTabIndex: number;
     onTabClick: (index: number) => void;
-  };
+  } & AnalyticsProps;
 
 const Content = ({ icon = null, iconPosition = 'left', name }: ContentProps) =>
   iconPosition === 'right' ? (
@@ -36,18 +42,30 @@ const renderTabs = (
   selectedTabIndex: number,
   onTabClick: (index: number) => void
 ) =>
-  tabs.map(({ name, ...rest }, index) => (
-    <Tab
-      selected={selectedTabIndex === index}
-      key={name}
-      onClick={() => {
-        if (onTabClick) {
-          onTabClick(index);
-        }
-      }}
-    >
-      <Content name={name} {...rest} />
-    </Tab>
+  tabs.map(({ name, tag = '', ...rest }, index) => (
+    <AnalyticsComponent key={name}>
+      {({ pages, tracker, merchantId, ip }) => (
+        <Tab
+          selected={selectedTabIndex === index}
+          key={name}
+          onClick={() => {
+            if (onTabClick) {
+              onTabClick(index);
+            }
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.TAB,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }}
+        >
+          <Content name={name} {...rest} />
+        </Tab>
+      )}
+    </AnalyticsComponent>
   ));
 
 const Tabs = ({ tabs, selectedTabIndex, onTabClick }: TabsProps) =>
diff --git a/src/components/TextArea/TextArea.ts b/src/components/TextArea/TextArea.ts
deleted file mode 100644
index cbc1e722b..000000000
--- a/src/components/TextArea/TextArea.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-import colors from '../../theme/colors';
-
-const TextArea = styled.textarea`
-  vertical-align: middle;
-  box-sizing: border-box;
-  overflow: hidden;
-  outline: none;
-  color: ${({ theme }) => theme.palette.text.main};
-  transition: all ease 300ms;
-  background: ${({ theme }) => theme.palette.background.main};
-  font-weight: ${({ theme }) => theme.font.weights.light};
-  border: 1px solid ${colors.gray};
-  border-radius: 3px;
-  font-size: ${({ theme }) => theme.font.sizes.medium};
-  line-height: 1.4em;
-  min-height: 7em;
-  width: 100%;
-  margin: 0.5rem 0;
-  padding: 0.75rem 1.125rem;
-
-  &:focus {
-    border-bottom: 1px solid ${colors.skyBlue};
-  }
-`;
-export default TextArea;
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
new file mode 100644
index 000000000..915d119b6
--- /dev/null
+++ b/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,71 @@
+import React, { KeyboardEvent, TextareaHTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+import {
+  AnalyticsComponent,
+  AnalyticsProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from '../../analytics';
+import colors from '../../theme/colors';
+
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & AnalyticsProps;
+
+const TextAreaWrapper = styled.textarea<Props>`
+  vertical-align: middle;
+  box-sizing: border-box;
+  overflow: hidden;
+  outline: none;
+  color: ${({ theme }) => theme.palette.text.main};
+  transition: all ease 300ms;
+  background: ${({ theme }) => theme.palette.background.main};
+  font-weight: ${({ theme }) => theme.font.weights.light};
+  border: 1px solid ${colors.gray};
+  border-radius: 3px;
+  font-size: ${({ theme }) => theme.font.sizes.medium};
+  line-height: 1.4em;
+  min-height: 7em;
+  width: 100%;
+  margin: 0.5rem 0;
+  padding: 0.75rem 1.125rem;
+
+  &:focus {
+    border-bottom: 1px solid ${colors.skyBlue};
+  }
+`;
+
+const TextArea = ({ tag = '', ...rest }: Props) => (
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <TextAreaWrapper
+        onClick={() => {
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.TEXTAREA,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
+        onBlur={() => {
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.FOCUS_OUT,
+              type: AnalyticsComponentType.TEXTAREA,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
+        {...rest}
+      />
+    )}
+  </AnalyticsComponent>
+);
+
+export default TextArea;
diff --git a/src/components/Tooltip/Arrow.tsx b/src/components/Tooltip/Arrow.tsx
index 093835c68..362b6b1b1 100644
--- a/src/components/Tooltip/Arrow.tsx
+++ b/src/components/Tooltip/Arrow.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { AnalyticsProps } from '../../analytics';
 
 type ArrowsProps = {
   width: number;
@@ -59,7 +60,7 @@ type Props = {
   border: string;
   placement: string;
   width: number;
-};
+} & AnalyticsProps;
 
 const Arrow = ({ background, border, placement, width }: Props) => {
   const Component = arrows[placement] || arrows.top;
diff --git a/src/components/Tooltip/Bubble.ts b/src/components/Tooltip/Bubble.ts
index 71618b688..132b851fb 100644
--- a/src/components/Tooltip/Bubble.ts
+++ b/src/components/Tooltip/Bubble.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import colors from '../../theme/colors';
+import { AnalyticsProps } from '../../analytics';
 
 type BubbleProps = {
   background?: string;
@@ -7,7 +8,7 @@ type BubbleProps = {
   border?: string;
   padding?: number;
   fontSize?: string;
-};
+} & AnalyticsProps;
 
 const Bubble = styled.div<BubbleProps>`
   color: ${colors.white};
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 3b3f07dfe..1b9c76344 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import Arrow from './Arrow';
 import TooltipWrapper, { FadeEasing } from './TooltipWrapper';
 import Bubble from './Bubble';
+import { AnalyticsProps } from '../../analytics';
 
 export interface FlashTooltipRef {
   flashTooltip: () => Promise<void>;
@@ -38,7 +39,7 @@ export type TooltipProps = {
   className?: string;
   children?: ReactChild | ReactNode | null;
   ref: Ref<FlashTooltipRef>;
-};
+} & AnalyticsProps;
 
 const Container = styled.div`
   position: relative;
diff --git a/src/components/index.ts b/src/components/index.ts
index 62e6f66f2..257dc8f42 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,3 +25,4 @@ export { default as Table } from './Table';
 export { default as Modal } from './Modal';
 export { default as Radio } from './Radio';
 export { default as Pagination } from './Pagination';
+export { default as Drawer } from './Drawer';
diff --git a/src/index.ts b/src/index.ts
index 33f01dd54..38e6fd877 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,6 +26,7 @@ export { default as Table } from './components/Table';
 export { default as Modal } from './components/Modal';
 export { default as Radio } from './components/Radio';
 export { default as Pagination } from './components/Pagination';
+export { default as Drawer } from './components/Drawer';
 
 // previews
 export { default as Preview1 } from './paywall-previews/Preview1';
@@ -41,3 +42,24 @@ export { default as ThemeWrapper } from './theme/ThemeWrapper';
 
 // colors
 export { default as Colors } from './theme/colors';
+
+// analytics
+export type {
+  AnalyticsProps,
+  AnalyticsPageProps,
+  AnalyticsPageType,
+  AnalyticsTag,
+  AnalyticsContextValue,
+  AnalyticsComponentProps,
+  AnalyticsEvents,
+  AnalyticsComponentType,
+} from './analytics';
+
+export {
+  AnalyticsPage,
+  AnalyticsContext,
+  AnalyticsTracker,
+  AnalyticsComponent,
+  ROOT_ANALYTICS_CONTEXT,
+  useAnalytics,
+} from './analytics';
diff --git a/src/paywall-previews/Preview1/Preview1.tsx b/src/paywall-previews/Preview1/Preview1.tsx
index 473dc8b34..f9d98c1a0 100644
--- a/src/paywall-previews/Preview1/Preview1.tsx
+++ b/src/paywall-previews/Preview1/Preview1.tsx
@@ -7,15 +7,21 @@ import colors from '../../theme/colors';
 import Branding from '../types/branding';
 
 // Components
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 import FooterText from '../shared/FooterText';
-import { OverlayLabel } from '../shared/PreviewComponents';
 import PreviewText from '../shared/PreviewText';
+import {
+  OverlayLabel,
+  RestrictedAssetIcon,
+  StyledRestrictedAssetContainer,
+} from '../shared/PreviewComponents';
 import {
   InPlayerPreviewBox,
   LockIcon,
   ImageHolder,
   PaywallExplain,
   InplayerWhiteLogo,
+  InplayerPremiumLabel,
   ItemDetails,
   BuyButtonWrapper,
   BuyButton,
@@ -33,10 +39,10 @@ type Props = {
   premiumContentLabel?: string;
   isRestrictedAsset?: boolean;
   isAuthenticated?: boolean;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview1 = ({
   branding: {
@@ -56,56 +62,91 @@ const Preview1 = ({
   premiumContentLabel = 'Premium content',
   isRestrictedAsset = false,
   isAuthenticated = false,
-}: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-
-  return (
-    <InPlayerPreviewBox className="inplayer-preview-box">
-      {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
-      <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
-        <PreviewImage
-          alt="coverPhoto"
-          src={image}
-          role="presentation"
-          className="inplayer-paywall"
-        />
-        <PaywallExplain
-          hasProtectedByLabel={hasProtectedByLabel}
-          className="inplayer-paywallexplain"
-        >
-          <InplayerWhiteLogo id="inplayer-whitelogo">
-            <strong>{protectedByLabel} inplayer</strong>
-            <a href="https://inplayer.com">InPlayer Paywall</a>
-          </InplayerWhiteLogo>
-          <LockIcon className="inplayer-lock" />
-          <span>{premiumContentLabel}</span>
-        </PaywallExplain>
-      </ImageHolder>
-      <ItemDetails className="inplayer-itemdetails">
-        <PreviewText value={previewTitle} className="inplayer-title" />
-        <PreviewText value={previewDescription} />
-      </ItemDetails>
-      {displayBuyButton && (
-        <BuyButtonWrapper className="inplayer-buybutton">
-          <BuyButton
-            className="inplayer-button inplayer-submit-button"
-            buttonBgColor={buttonBgColor}
-            buttonTextColor={buttonTextColor}
-            onClick={handleOpenModal}
+  restrictedMessage = 'This content is not available.',
+}: Props) => (
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <InPlayerPreviewBox className="inplayer-preview-box">
+        {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
+        <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
+          {isRestrictedAsset && (
+            // Call handleOpenModal here because this div element will be
+            // on the top of all image elements in case of restricted asset
+            <StyledRestrictedAssetContainer onClick={handleOpenModal}>
+              <RestrictedAssetIcon />
+              {restrictedMessage}
+            </StyledRestrictedAssetContainer>
+          )}
+          <PreviewImage
+            alt="coverPhoto"
+            src={imageUrl}
+            role="presentation"
+            className="inplayer-paywall"
+          />
+          <PaywallExplain
+            hasProtectedByLabel={hasProtectedByLabel}
+            className="inplayer-paywallexplain"
           >
-            {previewButtonLabel}
-          </BuyButton>
-        </BuyButtonWrapper>
-      )}
-      <InplayerFooter className="inplayer-preview-footer">
-        <div className="inplayer-guest-footer">
-          <a href="#login" onClick={handleOpenModal}>
-            <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-          </a>
-        </div>
-      </InplayerFooter>
-    </InPlayerPreviewBox>
-  );
-};
+            <InplayerWhiteLogo id="inplayer-whitelogo">
+              <strong>{protectedByLabel} inplayer</strong>
+              <a
+                onClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.ICON,
+                    tag: 'icon_inplayer',
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                href="https://inplayer.com"
+              >
+                InPlayer Paywall
+              </a>
+            </InplayerWhiteLogo>
+            <InplayerPremiumLabel>
+              <LockIcon className="inplayer-lock" />
+              <div>{premiumContentLabel}</div>
+            </InplayerPremiumLabel>
+          </PaywallExplain>
+        </ImageHolder>
+        <ItemDetails className="inplayer-itemdetails">
+          <PreviewText value={previewTitle} className="inplayer-title" />
+          <PreviewText value={previewDescription} />
+        </ItemDetails>
+        {displayBuyButton && (
+          <BuyButtonWrapper className="inplayer-buybutton">
+            <BuyButton
+              className="inplayer-button inplayer-submit-button"
+              buttonBgColor={buttonBgColor}
+              buttonTextColor={buttonTextColor}
+              onClick={(e) => {
+                tracker.track({
+                  event: AnalyticsEvents.CLICK,
+                  type: AnalyticsComponentType.BUTTON,
+                  tag: 'button_buy_preview',
+                  pages,
+                  merchantId,
+                  ip,
+                });
+                handleOpenModal?.(e);
+              }}
+            >
+              {previewButtonLabel}
+            </BuyButton>
+          </BuyButtonWrapper>
+        )}
+        <InplayerFooter className="inplayer-preview-footer">
+          <div className="inplayer-guest-footer">
+            <a href="#login" onClick={handleOpenModal}>
+              <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+            </a>
+          </div>
+        </InplayerFooter>
+      </InPlayerPreviewBox>
+    )}
+  </AnalyticsComponent>
+);
 
 export default Preview1;
diff --git a/src/paywall-previews/Preview1/styled.ts b/src/paywall-previews/Preview1/styled.ts
index fa8344b0e..03fc134ae 100644
--- a/src/paywall-previews/Preview1/styled.ts
+++ b/src/paywall-previews/Preview1/styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { ifProp } from 'styled-tools';
 import { transparentize } from 'polished';
 import { FaLock } from 'react-icons/fa';
@@ -46,32 +46,25 @@ export const PaywallExplain = styled.div<PaywallExplainProps>`
   box-sizing: border-box;
   padding: 2vh 3%;
   color: ${colors.white};
-  display: ${ifProp('hasProtectedByLabel', 'block', 'none')};
+  display: ${ifProp('hasProtectedByLabel', 'flex', 'none')};
   position: absolute;
   bottom: 0;
   width: 100%;
   font-size: 13px;
   line-height: 15px;
   text-align: left;
-
-  span {
-    vertical-align: middle;
-    max-width: calc(100% - 150px);
-    display: inline-block;
-    text-align: left;
-    margin: 0;
-    position: relative;
-    font-size: 13px;
-    padding: 0;
-    line-height: 15px;
-  }
+  ${ifProp(
+    'hasProtectedByLabel',
+    css`
+      align-items: center;
+    `
+  )}
 `;
 
 export const InplayerWhiteLogo = styled.div`
   position: absolute;
   right: 3%;
   display: block;
-  margin: -4px 0 0;
   padding: 0;
   line-height: 15px;
 
@@ -87,12 +80,12 @@ export const InplayerWhiteLogo = styled.div`
     line-height: 15px;
 
     @media screen and (max-width: 600px) {
-      max-width: 73px;
+      max-width: 80px;
     }
   }
 
   a {
-    background: url('https://assets.inplayer.com/images/paywall/ip-logicon.svg') no-repeat center
+    background: url('https://assets.inplayer.com/images/inplayer_icon-fs.svg') no-repeat center
       center;
     height: 30px;
     width: 30px;
@@ -104,10 +97,11 @@ export const InplayerWhiteLogo = styled.div`
     margin-bottom: 2px;
     line-height: 15px;
   }
+`;
 
-  @media screen and (max-width: 476px) {
-    margin: 0px 0 0 0;
-  }
+export const InplayerPremiumLabel = styled.div`
+  display: flex;
+  align-items: center;
 `;
 
 export const ItemDetails = styled.div`
@@ -200,7 +194,7 @@ export const InplayerFooter = styled.div`
 
   a {
     text-decoration: none;
-    color: #aaa;
+    color: ${({ theme }) => theme.palette.text.light};
     font-size: 14px;
     line-height: 18px;
   }
diff --git a/src/paywall-previews/Preview2/Preview2.tsx b/src/paywall-previews/Preview2/Preview2.tsx
index 16d77eaf4..b147cc388 100644
--- a/src/paywall-previews/Preview2/Preview2.tsx
+++ b/src/paywall-previews/Preview2/Preview2.tsx
@@ -7,9 +7,15 @@ import colors from '../../theme/colors';
 import Branding from '../types/branding';
 
 // Components
+import { AnalyticsComponent } from '../../analytics';
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
-import { StyledPaywallDescription, BuyButton, FooterLink } from '../shared/PreviewComponents';
+import {
+  StyledPaywallDescription,
+  BuyButton,
+  FooterLink,
+  RestrictedAssetIcon,
+} from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   StyledImageHolder,
@@ -18,6 +24,7 @@ import {
   BuyButtonWrapper,
   StyledIcon,
   Footer,
+  StyledRestrictedAssetContainer,
 } from './styled';
 
 type Props = {
@@ -31,10 +38,10 @@ type Props = {
   handleOpenModal?: (e: any) => any;
   premiumContentLabel?: string;
   isAuthenticated?: boolean;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview2 = ({
   branding: {
@@ -55,43 +62,58 @@ const Preview2 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
-}: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minHeight={minHeight}
-      minWidth={minWidth}
-      height={height}
-      width={width}
-    >
-      <StyledImageHolder backgroundImage={image} onClick={handleOpenModal} />
-      <AssetDetails>
-        <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
-          <PaywallDescriptionSpan>
-            <StyledIcon name="star" />
-            {premiumContentLabel}
-          </PaywallDescriptionSpan>
-        </StyledPaywallDescription>
-        <PreviewText value={previewTitle} padding="0 0 0.5rem 0" />
-        <PreviewText value={previewDescription} />
-        <BuyButtonWrapper>
-          <BuyButton
-            buttonBgColor={buttonBgColor}
-            buttonTextColor={buttonTextColor}
-            onClick={handleOpenModal}
-          >
-            {previewButtonLabel}
-          </BuyButton>
-        </BuyButtonWrapper>
-        <Footer color={colors.fontGray}>
-          <FooterLink href="#login" onClick={handleOpenModal}>
-            <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-          </FooterLink>
-        </Footer>
-      </AssetDetails>
-    </StyledPreviewBox>
-  );
-};
+  restrictedMessage = 'This content is not available.',
+}: Props) => (
+  <AnalyticsComponent>
+    {() => (
+      <StyledPreviewBox
+        id="preview-container"
+        minHeight={minHeight}
+        minWidth={minWidth}
+        height={height}
+        width={width}
+      >
+        <StyledImageHolder
+          isRestrictedAsset={isRestrictedAsset}
+          backgroundImage={imageUrl}
+          onClick={handleOpenModal}
+        />
+        {isRestrictedAsset && (
+          // Call handleOpenModal here because this div element will be
+          // on the top of image container in case of restricted asset
+          <StyledRestrictedAssetContainer onClick={handleOpenModal}>
+            <RestrictedAssetIcon />
+            {restrictedMessage}
+          </StyledRestrictedAssetContainer>
+        )}
+        <AssetDetails>
+          <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
+            <PaywallDescriptionSpan>
+              <StyledIcon name="star" />
+              {premiumContentLabel}
+            </PaywallDescriptionSpan>
+          </StyledPaywallDescription>
+          <PreviewText value={previewTitle} padding="0 0 0.5rem 0" />
+          <PreviewText value={previewDescription} />
+          <BuyButtonWrapper>
+            <BuyButton
+              tag="button_buy_preview"
+              buttonBgColor={buttonBgColor}
+              buttonTextColor={buttonTextColor}
+              onClick={handleOpenModal}
+            >
+              {previewButtonLabel}
+            </BuyButton>
+          </BuyButtonWrapper>
+          <Footer color={colors.fontGray}>
+            <FooterLink href="#login" onClick={handleOpenModal}>
+              <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+            </FooterLink>
+          </Footer>
+        </AssetDetails>
+      </StyledPreviewBox>
+    )}
+  </AnalyticsComponent>
+);
 
 export default Preview2;
diff --git a/src/paywall-previews/Preview2/styled.ts b/src/paywall-previews/Preview2/styled.ts
index 394a1f8a6..119dad2eb 100644
--- a/src/paywall-previews/Preview2/styled.ts
+++ b/src/paywall-previews/Preview2/styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
 import { MdStar } from 'react-icons/md';
 
@@ -11,6 +11,7 @@ import {
   ImageHolder,
   PreviewFooter,
   DescriptionSpan,
+  RestrictedAssetContainer,
 } from '../shared/PreviewComponents';
 
 export const StyledPreviewBox = styled(PreviewBox)`
@@ -29,6 +30,7 @@ export const StyledPreviewBox = styled(PreviewBox)`
 
 interface StyledImageHolder {
   backgroundImage: string;
+  isRestrictedAsset?: boolean;
 }
 
 export const StyledImageHolder = styled(ImageHolder)<StyledImageHolder>`
@@ -41,6 +43,11 @@ export const StyledImageHolder = styled(ImageHolder)<StyledImageHolder>`
   @media screen and (max-width: 768px) {
     width: 100%;
   }
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.3);
+    `}
 `;
 
 export const AssetDetails = styled.div`
@@ -58,7 +65,7 @@ export const AssetDetails = styled.div`
 `;
 
 export const PaywallDescriptionSpan = styled(DescriptionSpan)`
-  padding-bottom: 20px;
+  padding: 20px 0;
 `;
 
 export const BuyButtonWrapper = styled.div`
@@ -86,4 +93,20 @@ export const Footer = styled(PreviewFooter)`
   margin-top: 1.6em;
   text-align: left;
   padding-top: 0.5em;
+  @media screen and (max-width: 768px) {
+    text-align: center;
+  }
+`;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  width: 50%;
+  left: 25%;
+  @media screen and (max-width: 768px) {
+    width: 100%;
+    left: 50%;
+    top: 25%;
+  }
+  @media screen and (max-width: 480px) {
+    top: 20%;
+  }
 `;
diff --git a/src/paywall-previews/Preview3/Preview3.tsx b/src/paywall-previews/Preview3/Preview3.tsx
index 62084abd2..852ff2e0c 100644
--- a/src/paywall-previews/Preview3/Preview3.tsx
+++ b/src/paywall-previews/Preview3/Preview3.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
-
-// Images
 import { GiCutDiamond } from 'react-icons/gi';
 
 // Colors
 import colors from '../../theme/colors';
 
 // Components
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
-import { StyledPaywallDescription } from '../shared/PreviewComponents';
+import {
+  StyledRestrictedAssetContainer,
+  RestrictedAssetIcon,
+  StyledPaywallDescription,
+} from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   StyledImageHolder,
@@ -36,10 +39,10 @@ type Props = {
   handleOpenModal?: (e: any) => any;
   premiumContentLabel?: string;
   isAuthenticated?: boolean;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview3 = ({
   branding: {
@@ -58,39 +61,64 @@ const Preview3 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
-}: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minHeight={minHeight}
-      minWidth={minWidth}
-      width={width}
-      height={height}
-    >
-      <StyledImageHolder backgroundImage={image} onClick={handleOpenModal}>
-        <Header onClick={handleOpenModal} color={colors.fontLightGray}>
-          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-        </Header>
-        <StyledTextWrapper onClick={handleOpenModal}>
-          <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
-            <PaywallDescriptionSpan>
-              <GiCutDiamond /> {premiumContentLabel}
-            </PaywallDescriptionSpan>
-          </StyledPaywallDescription>
-          <TitleWrapper>
-            <TitleBorder color={buttonBgColor}>
-              <PreviewText value={previewTitle} textColor={colors.white} />
-            </TitleBorder>
-            <StyledIcon color={buttonBgColor} />
-          </TitleWrapper>
-          <DescriptionWrapper>
-            <PreviewText value={previewDescription} textColor={colors.white} />
-          </DescriptionWrapper>
-        </StyledTextWrapper>
-      </StyledImageHolder>
-    </StyledPreviewBox>
-  );
-};
+  restrictedMessage = 'This content is not available.',
+}: Props) => (
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => (
+      <StyledPreviewBox
+        id="preview-container"
+        minHeight={minHeight}
+        minWidth={minWidth}
+        width={width}
+        height={height}
+      >
+        <StyledImageHolder backgroundImage={imageUrl} onClick={handleOpenModal}>
+          {isRestrictedAsset && (
+            // Call handleOpenModal here because this div element will be
+            // on the top of all image elements in case of restricted asset
+            <StyledRestrictedAssetContainer height="50%" onClick={handleOpenModal}>
+              <RestrictedAssetIcon />
+              {restrictedMessage}
+            </StyledRestrictedAssetContainer>
+          )}
+          <Header onClick={handleOpenModal} color={colors.fontLightGray}>
+            <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+          </Header>
+          <StyledTextWrapper onClick={handleOpenModal}>
+            <StyledPaywallDescription
+              color={buttonBgColor}
+              hasProtectedByLabel={hasProtectedByLabel}
+            >
+              <PaywallDescriptionSpan>
+                <GiCutDiamond /> {premiumContentLabel}
+              </PaywallDescriptionSpan>
+            </StyledPaywallDescription>
+            <TitleWrapper>
+              <TitleBorder color={buttonBgColor}>
+                <PreviewText value={previewTitle} textColor={colors.white} />
+              </TitleBorder>
+              <StyledIcon
+                onClick={() => {
+                  tracker.track({
+                    event: AnalyticsEvents.CLICK,
+                    type: AnalyticsComponentType.ICON,
+                    tag: 'icon_play',
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }}
+                color={buttonBgColor}
+              />
+            </TitleWrapper>
+            <DescriptionWrapper>
+              <PreviewText value={previewDescription} textColor={colors.white} />
+            </DescriptionWrapper>
+          </StyledTextWrapper>
+        </StyledImageHolder>
+      </StyledPreviewBox>
+    )}
+  </AnalyticsComponent>
+);
 
 export default Preview3;
diff --git a/src/paywall-previews/Preview3/styled.tsx b/src/paywall-previews/Preview3/styled.tsx
index c88826a2e..9d0e59dff 100644
--- a/src/paywall-previews/Preview3/styled.tsx
+++ b/src/paywall-previews/Preview3/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { FaRegPlayCircle } from 'react-icons/fa';
 import { transparentize } from 'polished';
 
@@ -63,13 +63,16 @@ export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
   margin-bottom: 20px;
+  justify-content: center;
+  position: relative;
 `;
 
 export const TitleBorder = styled.div`
   margin-bottom: 2%;
-  width: 300px;
+  left: 0;
+  position: absolute;
   background: linear-gradient(${({ color }) => `${color},${color}`}) bottom left no-repeat;
-  background-size: 35% 4px;
+  background-size: 100% 4px;
 `;
 
 export const StyledIcon = styled(FaRegPlayCircle)`
diff --git a/src/paywall-previews/Preview4/Preview4.tsx b/src/paywall-previews/Preview4/Preview4.tsx
index ce3fa6080..4d74b98a7 100644
--- a/src/paywall-previews/Preview4/Preview4.tsx
+++ b/src/paywall-previews/Preview4/Preview4.tsx
@@ -10,7 +10,11 @@ import colors from '../../theme/colors';
 // Components
 import StyledContainer from '../shared/StyledContainer';
 import PreviewText from '../shared/PreviewText';
-import { OverlayLabel } from '../shared/PreviewComponents';
+import {
+  OverlayLabel,
+  RestrictedAssetContainer,
+  RestrictedAssetIcon,
+} from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   StyledButton,
@@ -35,11 +39,11 @@ type Props = {
   width?: string;
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
+  restrictedMessage?: string;
 };
 
 const removeTags = (str: string) => str.replace(/<.*?>/g, ' ').replace(/ +/g, ' ').trim();
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview4 = ({
   branding: {
@@ -59,11 +63,10 @@ const Preview4 = ({
   width = '',
   isRestrictedAsset = false,
   handleOpenModal,
+  restrictedMessage = 'This content is not available.',
 }: Props) => {
   const previewTitleText = removeTags(previewTitle);
   const previewDescriptionText = removeTags(previewDescription);
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-
   return (
     <StyledPreviewBox
       id="preview-container"
@@ -76,6 +79,7 @@ const Preview4 = ({
       <StyledContainer columns="1fr">
         {displayBuyButton && (
           <StyledButton
+            tag="button_buy_preview"
             buttonBgColor={buttonBgColor}
             buttonTextColor={buttonTextColor}
             onClick={handleOpenModal}
@@ -84,7 +88,13 @@ const Preview4 = ({
           </StyledButton>
         )}
       </StyledContainer>
-      <ImageWrapper onClick={handleOpenModal}>
+      {isRestrictedAsset && (
+        <RestrictedAssetContainer onClick={handleOpenModal}>
+          <RestrictedAssetIcon />
+          {restrictedMessage}
+        </RestrictedAssetContainer>
+      )}
+      <ImageWrapper onClick={handleOpenModal} isRestrictedAsset={isRestrictedAsset}>
         <StyledIconWrapper
           backgroundColor={buttonBgColor}
           hasProtectedByLabel={hasProtectedByLabel}
@@ -93,7 +103,7 @@ const Preview4 = ({
             <FaLock />
           </Icon>
         </StyledIconWrapper>
-        <StyledPreviewImage src={image} />
+        <StyledPreviewImage src={imageUrl} />
         <StyledTextWrapper>
           <TextElement width={width}>
             <PreviewText
diff --git a/src/paywall-previews/Preview4/styled.ts b/src/paywall-previews/Preview4/styled.ts
index 6378de82b..74a1020ea 100644
--- a/src/paywall-previews/Preview4/styled.ts
+++ b/src/paywall-previews/Preview4/styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
 
 // utils
@@ -30,11 +30,16 @@ export const StyledButton = styled(BuyButton)`
   height: 3rem;
 `;
 
-export const ImageWrapper = styled(ImageHolder)`
+export const ImageWrapper = styled(ImageHolder)<{ isRestrictedAsset: boolean }>`
   height: 100%;
   min-height: 310px;
   margin: 0;
   cursor: pointer;
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.3);
+    `}
 `;
 
 export const StyledIconWrapper = styled(IconWrapper)`
diff --git a/src/paywall-previews/Preview5/Preview5.tsx b/src/paywall-previews/Preview5/Preview5.tsx
index 53490efde..519bf0b91 100644
--- a/src/paywall-previews/Preview5/Preview5.tsx
+++ b/src/paywall-previews/Preview5/Preview5.tsx
@@ -9,7 +9,11 @@ import PreviewText from '../shared/PreviewText';
 import Branding from '../types/branding';
 
 // Components
-import { StyledPaywallDescription } from '../shared/PreviewComponents';
+import {
+  StyledRestrictedAssetContainer,
+  RestrictedAssetIcon,
+  StyledPaywallDescription,
+} from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   ImageWrapper,
@@ -33,10 +37,10 @@ type Props = {
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
   premiumContentLabel?: string;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview5 = ({
   branding: {
@@ -55,47 +59,54 @@ const Preview5 = ({
   handleOpenModal,
   isRestrictedAsset = false,
   premiumContentLabel = 'Premium content',
-}: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minHeight={minHeight}
-      minWidth={minWidth}
-      width={width}
-      height={height}
-    >
-      <ImageWrapper height={height} backgroundImage={image} onClick={handleOpenModal}>
-        <Overlay />
-        <BuyButtonHolder>
-          <BuyButtonBorder>
-            <StyledBuyButton
-              buttonBgColor={buttonBgColor}
-              buttonTextColor={buttonTextColor}
-              onClick={handleOpenModal}
-            >
-              {previewButtonLabel}
-            </StyledBuyButton>
-          </BuyButtonBorder>
-        </BuyButtonHolder>
-      </ImageWrapper>
-      <ItemDetails height={height}>
-        <StyledPaywallDescription
-          color={lighten(0.01, buttonBgColor)}
-          hasProtectedByLabel={hasProtectedByLabel}
-        >
-          <StyledIcon />
-          <PaywallDescriptionSpan>{premiumContentLabel}</PaywallDescriptionSpan>
-        </StyledPaywallDescription>
-        <TitleHolder>
-          <PreviewText value={previewTitle} />
-        </TitleHolder>
-        <DescriptionHolder>
-          <PreviewText value={previewDescription} />
-        </DescriptionHolder>
-      </ItemDetails>
-    </StyledPreviewBox>
-  );
-};
+  restrictedMessage = 'This content is not available.',
+}: Props) => (
+  <StyledPreviewBox
+    id="preview-container"
+    minHeight={minHeight}
+    minWidth={minWidth}
+    width={width}
+    height={height}
+  >
+    <ImageWrapper height={height} backgroundImage={imageUrl} onClick={handleOpenModal}>
+      {isRestrictedAsset && (
+        // Call handleOpenModal here because this div element will be
+        // on the top of all image elements in case of restricted asset
+        <StyledRestrictedAssetContainer onClick={handleOpenModal}>
+          <RestrictedAssetIcon />
+          {restrictedMessage}
+        </StyledRestrictedAssetContainer>
+      )}
+      <Overlay />
+      <BuyButtonHolder>
+        <BuyButtonBorder>
+          <StyledBuyButton
+            tag="button_buy_preview"
+            buttonBgColor={buttonBgColor}
+            buttonTextColor={buttonTextColor}
+            onClick={handleOpenModal}
+          >
+            {previewButtonLabel}
+          </StyledBuyButton>
+        </BuyButtonBorder>
+      </BuyButtonHolder>
+    </ImageWrapper>
+    <ItemDetails height={height}>
+      <StyledPaywallDescription
+        color={lighten(0.01, buttonBgColor)}
+        hasProtectedByLabel={hasProtectedByLabel}
+      >
+        <StyledIcon />
+        <PaywallDescriptionSpan>{premiumContentLabel}</PaywallDescriptionSpan>
+      </StyledPaywallDescription>
+      <TitleHolder>
+        <PreviewText value={previewTitle} />
+      </TitleHolder>
+      <DescriptionHolder>
+        <PreviewText value={previewDescription} />
+      </DescriptionHolder>
+    </ItemDetails>
+  </StyledPreviewBox>
+);
 
 export default Preview5;
diff --git a/src/paywall-previews/Preview5/styled.ts b/src/paywall-previews/Preview5/styled.ts
index 3f74eeacf..0b7b911ef 100644
--- a/src/paywall-previews/Preview5/styled.ts
+++ b/src/paywall-previews/Preview5/styled.ts
@@ -56,7 +56,7 @@ export const BuyButtonBorder = styled.div`
   overflow: hidden;
 `;
 
-export const StyledBuyButton = styled(BuyButton)<any>`
+export const StyledBuyButton = styled(BuyButton)`
   background-color: ${({ buttonBgColor }) => transparentize(0.2, buttonBgColor)};
   font-size: ${({ theme }) => theme.font.sizes.large};
   margin: 0;
@@ -103,3 +103,13 @@ export const TitleHolder = styled.div`
 export const DescriptionHolder = styled.div`
   margin-bottom: 0.6em;
 `;
+export const RestrictedAssetText = styled.p`
+  z-index: 100;
+  position: absolute;
+  color: white;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  bottom: 25%;
+`;
diff --git a/src/paywall-previews/Preview6/Preview6.tsx b/src/paywall-previews/Preview6/Preview6.tsx
index 6f356d7eb..d9504b4f3 100644
--- a/src/paywall-previews/Preview6/Preview6.tsx
+++ b/src/paywall-previews/Preview6/Preview6.tsx
@@ -18,8 +18,9 @@ import {
   PreviewFooter,
   IconHolder,
   StyledBuyButton,
+  StyledRestrictedAssetContainer,
 } from './styled';
-import { PreviewFooterLink } from '../shared/PreviewComponents';
+import { PreviewFooterLink, RestrictedAssetIcon } from '../shared/PreviewComponents';
 
 // Types
 import Branding from '../types/branding';
@@ -38,10 +39,11 @@ type Props = {
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
   isAuthenticated?: boolean;
+  premiumContentLabel?: string;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview6 = ({
   branding: {
@@ -61,40 +63,50 @@ const Preview6 = ({
   isRestrictedAsset = false,
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
-}: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minWidth={minWidth}
-      minHeight={minHeight}
-      width={width}
-      height={height}
-    >
-      <ImageWrapper backgroundImage={image} onClick={handleOpenModal} />
-      <ItemDetails>
-        <PreviewText value={title} />
-        <PreviewText value={description} />
-      </ItemDetails>
-      <ButtonWrapper>
-        <StyledBuyButton
-          buttonBgColor={buttonBgColor}
-          buttonTextColor={buttonTextColor}
-          onClick={handleOpenModal}
-        >
-          {buttonLabel}
-        </StyledBuyButton>
-      </ButtonWrapper>
-      <PreviewFooter>
-        <PreviewFooterLink href="#login" onClick={handleOpenModal}>
-          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-        </PreviewFooterLink>
-        <IconHolder hasProtectedByLabel={hasProtectedByLabel}>
-          <LockIcon />
-        </IconHolder>
-      </PreviewFooter>
-    </StyledPreviewBox>
-  );
-};
+  restrictedMessage = 'This content is not available in your current location.',
+}: Props) => (
+  <StyledPreviewBox
+    id="preview-container"
+    minWidth={minWidth}
+    minHeight={minHeight}
+    width={width}
+    height={height}
+  >
+    <ImageWrapper
+      isRestrictedAsset={isRestrictedAsset}
+      backgroundImage={imageUrl}
+      onClick={handleOpenModal}
+    />
+    {isRestrictedAsset && (
+      <StyledRestrictedAssetContainer fontSize="14px" onClick={handleOpenModal}>
+        <RestrictedAssetIcon size="5rem" />
+        {restrictedMessage}
+      </StyledRestrictedAssetContainer>
+    )}
+
+    <ItemDetails>
+      <PreviewText value={title} />
+      <PreviewText value={description} />
+    </ItemDetails>
+    <ButtonWrapper>
+      <StyledBuyButton
+        tag="button_buy_preview"
+        buttonBgColor={buttonBgColor}
+        buttonTextColor={buttonTextColor}
+        onClick={handleOpenModal}
+      >
+        {buttonLabel}
+      </StyledBuyButton>
+    </ButtonWrapper>
+    <PreviewFooter>
+      <PreviewFooterLink href="#login" onClick={handleOpenModal}>
+        <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+      </PreviewFooterLink>
+      <IconHolder hasProtectedByLabel={hasProtectedByLabel}>
+        <LockIcon />
+      </IconHolder>
+    </PreviewFooter>
+  </StyledPreviewBox>
+);
 
 export default Preview6;
diff --git a/src/paywall-previews/Preview6/styled.ts b/src/paywall-previews/Preview6/styled.ts
index 8c3aa2a5f..b9a9dc265 100644
--- a/src/paywall-previews/Preview6/styled.ts
+++ b/src/paywall-previews/Preview6/styled.ts
@@ -1,7 +1,12 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 // Components
-import { PreviewBox, ImageHolder, BuyButton } from '../shared/PreviewComponents';
+import {
+  PreviewBox,
+  ImageHolder,
+  BuyButton,
+  RestrictedAssetContainer,
+} from '../shared/PreviewComponents';
 
 export const StyledPreviewBox = styled(PreviewBox)`
   max-width: ${({ width }) => (width ? '' : '850px')};
@@ -13,6 +18,7 @@ export const StyledPreviewBox = styled(PreviewBox)`
   grid-template-columns: 1fr 0.5fr 1fr;
   grid-template-rows: 1fr auto;
   grid-column-gap: 1rem;
+  position: relative;
   @media screen and (max-width: 1100px) {
     grid-template-columns: 2fr 1fr 1fr;
   }
@@ -20,6 +26,7 @@ export const StyledPreviewBox = styled(PreviewBox)`
 
 interface ImageWrapperProps {
   backgroundImage: string;
+  isRestrictedAsset?: boolean;
 }
 
 export const ImageWrapper = styled(ImageHolder)<ImageWrapperProps>`
@@ -38,6 +45,12 @@ export const ImageWrapper = styled(ImageHolder)<ImageWrapperProps>`
     margin: 0;
     grid-row: 1;
   }
+
+  ${({ isRestrictedAsset }) =>
+    isRestrictedAsset &&
+    css`
+      filter: brightness(0.3);
+    `}
 `;
 
 export const ItemDetails = styled.div`
@@ -65,8 +78,6 @@ export const StyledBuyButton = styled(BuyButton)`
 `;
 
 export const PreviewFooter = styled.div`
-  float: right;
-  text-align: right;
   display: flex;
   align-items: flex-end;
   @media screen and (max-width: 1100px) {
@@ -88,3 +99,22 @@ export const IconHolder = styled.div<IconHolderProps>`
   font-size: ${({ theme }) => theme.font.sizes.small};
   margin-left: 0.4rem;
 `;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  width: 35%;
+  top: 50%;
+  left: 20%;
+  @media screen and (max-width: 768px) {
+    font-size: 10px;
+    svg {
+      width: 3rem;
+      height: 3rem;
+      margin-bottom: 0rem;
+    }
+  }
+  @media screen and (max-width: 1100px) {
+    height: 50%;
+    left: 25%;
+    top: 35%;
+  }
+`;
diff --git a/src/paywall-previews/Preview7/Preview7.tsx b/src/paywall-previews/Preview7/Preview7.tsx
index c837a9e9d..fbdc22ff7 100644
--- a/src/paywall-previews/Preview7/Preview7.tsx
+++ b/src/paywall-previews/Preview7/Preview7.tsx
@@ -9,12 +9,16 @@ import Branding from '../types/branding';
 
 // Components
 import FooterText from '../shared/FooterText';
-import { OverlayLabel, PreviewFooterLink } from '../shared/PreviewComponents';
 import PreviewText from '../shared/PreviewText';
+import {
+  OverlayLabel,
+  RestrictedAssetIcon,
+  PreviewFooterLink,
+  PreviewImage,
+} from '../shared/PreviewComponents';
 import {
   StyledPreviewBox,
   StyledImageWrapper,
-  StyledPreviewImage,
   StyledIconWrapper,
   ItemDetails,
   PreviewHeader,
@@ -22,6 +26,7 @@ import {
   ButtonWrapper,
   StyledBuyButton,
   StyledPreviewFooter,
+  StyledRestrictedAssetContainer,
 } from './styled';
 
 type Props = {
@@ -36,10 +41,11 @@ type Props = {
   isRestrictedAsset?: boolean;
   handleOpenModal?: (e: any) => any;
   isAuthenticated?: boolean;
+  premiumContentLabel?: string;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview7 = ({
   branding: {
@@ -61,53 +67,61 @@ const Preview7 = ({
   isRestrictedAsset = false,
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   isAuthenticated = false,
-}: Props) => {
-  const image = isRestrictedAsset ? restrictedAssetImg : imageUrl;
-
-  return (
-    <StyledPreviewBox
-      id="preview-container"
-      minWidth={minWidth}
-      minHeight={minHeight}
-      width={width}
-      height={height}
-    >
-      {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
-      <StyledImageWrapper onClick={handleOpenModal}>
-        <StyledPreviewImage src={image} imageWidth="250px" imageBorderRadius />
-        <StyledIconWrapper
-          backgroundColor={buttonBgColor}
-          hasProtectedByLabel={hasProtectedByLabel}
+  restrictedMessage = 'This content is not available.',
+}: Props) => (
+  <StyledPreviewBox
+    id="preview-container"
+    minWidth={minWidth}
+    minHeight={minHeight}
+    width={width}
+    height={height}
+  >
+    {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
+    <StyledImageWrapper onClick={handleOpenModal}>
+      {isRestrictedAsset && (
+        // Call handleOpenModal here because this div element will be
+        // on the top of image container in case of restricted asset
+        <StyledRestrictedAssetContainer
+          fontSize="14px"
+          imageWidth="250px"
+          imageBorderRadius
+          onClick={handleOpenModal}
         >
-          <FaLock />
-        </StyledIconWrapper>
-      </StyledImageWrapper>
-      <ItemDetails>
-        <PreviewHeader variant="h4">
-          <PreviewText value={previewTitle} isTextCenter padding="0 0 0.5rem 0" />
-        </PreviewHeader>
-        <ItemContent variant="p">
-          <PreviewText value={previewDescription} isTextCenter />
-        </ItemContent>
-      </ItemDetails>
-      {displayBuyButton && (
-        <ButtonWrapper>
-          <StyledBuyButton
-            buttonBgColor={buttonBgColor}
-            buttonTextColor={buttonTextColor}
-            onClick={handleOpenModal}
-          >
-            {previewButtonLabel}
-          </StyledBuyButton>
-        </ButtonWrapper>
+          <RestrictedAssetIcon size="4rem" />
+          {restrictedMessage}
+        </StyledRestrictedAssetContainer>
       )}
-      <StyledPreviewFooter>
-        <PreviewFooterLink href="#login" onClick={handleOpenModal}>
-          <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
-        </PreviewFooterLink>
-      </StyledPreviewFooter>
-    </StyledPreviewBox>
-  );
-};
+      <PreviewImage src={imageUrl} imageWidth="250px" imageBorderRadius />
+      <StyledIconWrapper backgroundColor={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
+        <FaLock />
+      </StyledIconWrapper>
+    </StyledImageWrapper>
+    <ItemDetails>
+      <PreviewHeader variant="h4">
+        <PreviewText value={previewTitle} isTextCenter padding="0 0 0.5rem 0" />
+      </PreviewHeader>
+      <ItemContent variant="p">
+        <PreviewText value={previewDescription} isTextCenter />
+      </ItemContent>
+    </ItemDetails>
+    {displayBuyButton && (
+      <ButtonWrapper>
+        <StyledBuyButton
+          tag="button_buy_preview"
+          buttonBgColor={buttonBgColor}
+          buttonTextColor={buttonTextColor}
+          onClick={handleOpenModal}
+        >
+          {previewButtonLabel}
+        </StyledBuyButton>
+      </ButtonWrapper>
+    )}
+    <StyledPreviewFooter>
+      <PreviewFooterLink href="#login" onClick={handleOpenModal}>
+        <FooterText isAuthenticated={isAuthenticated} loginFooterLabel={loginFooterLabel} />
+      </PreviewFooterLink>
+    </StyledPreviewFooter>
+  </StyledPreviewBox>
+);
 
 export default Preview7;
diff --git a/src/paywall-previews/Preview7/styled.ts b/src/paywall-previews/Preview7/styled.ts
index ef98ee015..28f8b2a53 100644
--- a/src/paywall-previews/Preview7/styled.ts
+++ b/src/paywall-previews/Preview7/styled.ts
@@ -11,7 +11,8 @@ import {
   ImageHolder,
   BuyButton,
   IconWrapper,
-  PreviewImage,
+  PreviewImageProps,
+  RestrictedAssetContainer,
 } from '../shared/PreviewComponents';
 
 export const StyledPreviewBox = styled(PreviewBox)`
@@ -30,10 +31,6 @@ export const StyledImageWrapper = styled(ImageHolder)`
   background: ${({ theme }) => theme.palette.background.main};
 `;
 
-export const StyledPreviewImage = styled(PreviewImage)<any>`
-  height: 250px;
-`;
-
 export const StyledIconWrapper = styled(IconWrapper)`
   padding: 12px;
   color: ${colors.white};
@@ -80,3 +77,23 @@ export const StyledPreviewFooter = styled(PreviewFooter)`
   padding-top: 5px;
   height: 5%;
 `;
+
+export const RestrictedAssetText = styled.p`
+  z-index: 100;
+  position: absolute;
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)<PreviewImageProps>`
+  height: 100%;
+  border-radius: 50%;
+  backdrop-filter: brightness(0.3);
+  justify-content: center;
+`;
diff --git a/src/paywall-previews/shared/FooterText.tsx b/src/paywall-previews/shared/FooterText.tsx
index 857c6e685..4d5a973af 100644
--- a/src/paywall-previews/shared/FooterText.tsx
+++ b/src/paywall-previews/shared/FooterText.tsx
@@ -1,16 +1,47 @@
 import React from 'react';
 
+// components
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
+
 type Props = {
   isAuthenticated: boolean;
   loginFooterLabel: string;
 };
-const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) =>
-  isAuthenticated ? (
-    <span>
-      Welcome back <strong>{loginFooterLabel}</strong> Access this content!
-    </span>
-  ) : (
-    <span>{loginFooterLabel}</span>
-  );
+const FooterText = ({ isAuthenticated, loginFooterLabel }: Props) => (
+  <AnalyticsComponent>
+    {({ pages, tracker, merchantId, ip }) => {
+      const onClick = () => {
+        tracker.track({
+          event: AnalyticsEvents.CLICK,
+          type: AnalyticsComponentType.LINK,
+          tag: isAuthenticated
+            ? 'link_user_email'
+            : 'link_already_have_access_login_with_your_account',
+          pages,
+          merchantId,
+          ip,
+        });
+      };
+
+      const elementProps = {
+        'aria-hidden': true,
+        onClick,
+      };
+
+      const authText = (
+        <>
+          Welcome back <strong {...elementProps}>{loginFooterLabel}</strong> Access this content!
+        </>
+      );
+      const noAuthText = loginFooterLabel;
+
+      return (
+        <span {...(!isAuthenticated && { ...elementProps })}>
+          {isAuthenticated ? authText : noAuthText}
+        </span>
+      );
+    }}
+  </AnalyticsComponent>
+);
 
 export default FooterText;
diff --git a/src/paywall-previews/shared/PreviewComponents.tsx b/src/paywall-previews/shared/PreviewComponents.tsx
index 23772d642..6c99da6c2 100644
--- a/src/paywall-previews/shared/PreviewComponents.tsx
+++ b/src/paywall-previews/shared/PreviewComponents.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { prop } from 'styled-tools';
 
 // utils
+import { MdDoNotDisturbAlt } from 'react-icons/md';
 import colors from '../../theme/colors';
 
 // components
@@ -31,9 +32,10 @@ export const PreviewBox = styled.div<PreviewBoxProps>`
   margin: 24px auto;
 `;
 
-type PreviewImageProps = {
-  imageBorderRadius?: string;
-};
+export interface PreviewImageProps {
+  imageBorderRadius?: boolean;
+  imageWidth?: string;
+}
 
 export const PreviewImage = styled.img<PreviewImageProps>`
   width: ${prop('imageWidth', '100%')};
@@ -169,3 +171,35 @@ export const PreviewFooterLink = styled(FooterLink)`
   background: transparent;
   color: ${({ theme }) => theme.palette.text.main};
 `;
+
+export const RestrictedAssetIcon = styled(MdDoNotDisturbAlt)<{ size?: string }>`
+  top: 25%;
+  width: ${({ size }) => size || '8rem'};
+  height: ${({ size }) => size || '8rem'};
+  margin-bottom: 1rem;
+`;
+interface RestrictedAssetContainerProps {
+  fontSize?: string;
+  height?: string;
+}
+export const RestrictedAssetContainer = styled.div<RestrictedAssetContainerProps>`
+  z-index: 100;
+  position: absolute;
+  color: white;
+  font-size: ${({ fontSize }) => fontSize || '18px'};
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  top: ${({ height }) => height || '50%'};
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  height: 100%;
+  backdrop-filter: brightness(0.3);
+  justify-content: center;
+`;
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index f0eab88cc..b484bda99 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -38,17 +38,17 @@ export const Theme: DefaultTheme = {
       bold: 700,
     },
     sizes: {
-      extraSmall: rem(12),
-      small: rem(14),
-      medium: rem(16),
-      large: rem(18),
-      extraLarge: rem(50),
-      h1: rem(40),
-      h2: rem(36),
-      h3: rem(32),
-      h4: rem(28),
-      h5: rem(24),
-      h6: rem(20),
+      extraSmall: '12px',
+      small: '14px',
+      medium: '16px',
+      large: '18px',
+      extraLarge: '50px',
+      h1: '40px',
+      h2: '36px',
+      h3: '32px',
+      h4: '28px',
+      h5: '24px',
+      h6: '20px',
     },
   },
 };
diff --git a/yarn.lock b/yarn.lock
index 8a659867f..56cba63a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@babel/cli@^7.12.1":
-  version "7.12.8"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.12.8.tgz#3b24ed2fd5da353ee6f19e8935ff8c93b5fe8430"
-  integrity sha512-/6nQj11oaGhLmZiuRUfxsujiPDc9BBReemiXgIbxc+M5W+MIiFKYwvNDJvBfnGKNsJTKbUfEheKc9cwoPHAVQA==
+"@babel/cli@^7.12.10":
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.12.10.tgz#67a1015b1cd505bde1696196febf910c4c339a48"
+  integrity sha512-+y4ZnePpvWs1fc/LhZRTHkTesbXkyBYuOB+5CyodZqrEuETXi3zOVfpAQIdgC3lXbHLTDG9dQosxR9BhvLKDLQ==
   dependencies:
     commander "^4.0.1"
     convert-source-map "^1.1.0"
@@ -60,7 +60,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.7.5", "@babel/core@^7.9.0":
+"@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.12.10", "@babel/core@^7.7.5", "@babel/core@^7.9.0":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.10.tgz#b79a2e1b9f70ed3d84bbfb6d8c4ef825f606bccd"
   integrity sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==
@@ -956,7 +956,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/preset-env@^7.12.1", "@babel/preset-env@^7.9.5", "@babel/preset-env@^7.9.6":
+"@babel/preset-env@^7.12.11", "@babel/preset-env@^7.9.5", "@babel/preset-env@^7.9.6":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.11.tgz#55d5f7981487365c93dbbc84507b1c7215e857f9"
   integrity sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==
@@ -1047,7 +1047,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.12.5", "@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.4":
+"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.12.10", "@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.4":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.10.tgz#4fed65f296cbb0f5fb09de6be8cddc85cc909be9"
   integrity sha512-vtQNjaHRl4DUpp+t+g4wvTHsLQuye+n0H/wsXIZRn69oz/fvNC7gQ4IK73zGJBaxvHoxElDvnYCthMcT7uzFoQ==
@@ -1058,7 +1058,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.12.7"
     "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
 
-"@babel/preset-typescript@^7.12.1", "@babel/preset-typescript@^7.9.0":
+"@babel/preset-typescript@^7.12.7", "@babel/preset-typescript@^7.9.0":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.7.tgz#fc7df8199d6aae747896f1e6c61fc872056632a3"
   integrity sha512-nOoIqIqBmHBSEgBXWR4Dv/XBehtIFcw9PqZw6rFYuKrzsZmOQm3PR5siLBnKZFEsDb03IegG8nSjU/iXXXYRmw==
@@ -1093,6 +1093,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.15.4":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/standalone@^7.4.5":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.9.6.tgz#7a5f82c6fa29959b12f708213be6de8ec0b79338"
@@ -1484,10 +1491,10 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
-"@rollup/plugin-babel@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz#20fc8f8864dc0eaa1c5578408459606808f72924"
-  integrity sha512-Jd7oqFR2dzZJ3NWANDyBjwTtX/lYbZpVcmkHrfQcpvawHs9E4c0nYk5U2mfZ6I/DZcIvy506KZJi54XK/jxH7A==
+"@rollup/plugin-babel@^5.2.2":
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.2.tgz#e5623a01dd8e37e004ba87f2de218c611727d9b2"
+  integrity sha512-MjmH7GvFT4TW8xFdIeFS3wqIX646y5tACdxkTO+khbHvS3ZcVJL6vkAHLw2wqPmkhwCfWHoNsp15VYNwW6JEJA==
   dependencies:
     "@babel/helper-module-imports" "^7.10.4"
     "@rollup/pluginutils" "^3.1.0"
@@ -1505,13 +1512,13 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
-"@rollup/plugin-image@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.0.5.tgz#07859a69f5fe592643c2ad3ef59ae8a5c268a7ef"
-  integrity sha512-R+yGLJjLN1won2JlZPZmdlyZGLZwwsW8V/RYu3mTcRq8Aqd9GC2fo4Zi892bFteM5LolfbpxK8Y9QQcAhbBwSQ==
+"@rollup/plugin-image@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.0.6.tgz#2e6d7a72b25df81aa80c8c0866d45a45c1e6a265"
+  integrity sha512-bB+spXogbPiFjhBS7i8ajUOgOnVwWK3bnJ6VroxKey/q8/EPRkoSh+4O1qPCw97qMIDspF4TlzXVBhZ7nojIPw==
   dependencies:
-    "@rollup/pluginutils" "^3.0.4"
-    mini-svg-data-uri "^1.1.3"
+    "@rollup/pluginutils" "^3.1.0"
+    mini-svg-data-uri "^1.2.3"
 
 "@rollup/plugin-node-resolve@^10.0.0":
   version "10.0.0"
@@ -1525,7 +1532,7 @@
     is-module "^1.0.0"
     resolve "^1.17.0"
 
-"@rollup/pluginutils@^3.0.4", "@rollup/pluginutils@^3.1.0":
+"@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
@@ -2654,14 +2661,14 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
   integrity sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==
 
-"@types/htmlparser2@3.10.1":
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/@types/htmlparser2/-/htmlparser2-3.10.1.tgz#1e65ba81401d53f425c1e2ba5a3d05c90ab742c7"
-  integrity sha512-fCxmHS4ryCUCfV9+CJZY1UjkbR+6Al/EQdX5Jh03qBj9gdlPG5q+7uNoDgE/ZNXb3XNWSAQgqKIWnbRCbOyyWA==
+"@types/htmlparser2@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@types/htmlparser2/-/htmlparser2-3.10.2.tgz#bd43702eaf2f15c2d26784c8427352a0a4aa75eb"
+  integrity sha512-81vjuO800UMoHjYbCbqtBmfC3iCsrROKpqndo0acKiN6k/cpW+YOw9FzRP0ghujHeUNCOox2AQPrrMy6+j5UpQ==
   dependencies:
-    "@types/domhandler" "*"
     "@types/domutils" "*"
     "@types/node" "*"
+    domhandler "^2.4.0"
 
 "@types/is-function@^1.0.0":
   version "1.0.0"
@@ -2702,6 +2709,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.165.tgz#74d55d947452e2de0742bad65270433b63a8c30f"
   integrity sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg==
 
+"@types/lodash@^4.14.175":
+  version "4.14.178"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
+  integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
+
 "@types/markdown-to-jsx@^6.11.0":
   version "6.11.1"
   resolved "https://registry.yarnpkg.com/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.1.tgz#4d9464aa76337d798b874dd3f2d6b4c86ddd98ad"
@@ -2805,10 +2817,10 @@
     "@types/react-outside-click-handler" "*"
     moment "^2.26.0"
 
-"@types/react-dom@^16.9.9":
-  version "16.9.9"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.9.tgz#d2d0a6f720a0206369ccbefff752ba37b9583136"
-  integrity sha512-jE16FNWO3Logq/Lf+yvEAjKzhpST/Eac8EMd1i4dgZdMczfgqC8EjpxwNgEe3SExHYLliabXDh9DEhhqnlXJhg==
+"@types/react-dom@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
+  integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==
   dependencies:
     "@types/react" "*"
 
@@ -2847,7 +2859,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.56":
+"@types/react@*":
   version "16.9.56"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.56.tgz#ea25847b53c5bec064933095fc366b1462e2adf0"
   integrity sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==
@@ -2855,6 +2867,14 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
+  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2972,16 +2992,24 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.8.2.tgz#78dccbe5124de2b8dea2d4c363dee9f769151ca8"
-  integrity sha512-u0leyJqmclYr3KcXOqd2fmx6SDGBO0MUNHHAjr0JS4Crbb3C3d8dwAdlazy133PLCcPn+aOUFiHn72wcuc5wYw==
+"@typescript-eslint/parser@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.13.0.tgz#c413d640ea66120cfcc37f891e8cb3fd1c9d247d"
+  integrity sha512-KO0J5SRF08pMXzq9+abyHnaGQgUJZ3Z3ax+pmqz9vl81JxmTTOUfQmq7/4awVfq09b6C4owNlOgOwp61pYRBSg==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.8.2"
-    "@typescript-eslint/types" "4.8.2"
-    "@typescript-eslint/typescript-estree" "4.8.2"
+    "@typescript-eslint/scope-manager" "4.13.0"
+    "@typescript-eslint/types" "4.13.0"
+    "@typescript-eslint/typescript-estree" "4.13.0"
     debug "^4.1.1"
 
+"@typescript-eslint/scope-manager@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.13.0.tgz#5b45912a9aa26b29603d8fa28f5e09088b947141"
+  integrity sha512-UpK7YLG2JlTp/9G4CHe7GxOwd93RBf3aHO5L+pfjIrhtBvZjHKbMhBXTIQNkbz7HZ9XOe++yKrXutYm5KmjWgQ==
+  dependencies:
+    "@typescript-eslint/types" "4.13.0"
+    "@typescript-eslint/visitor-keys" "4.13.0"
+
 "@typescript-eslint/scope-manager@4.3.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.3.0.tgz#c743227e087545968080d2362cfb1273842cb6a7"
@@ -2990,23 +3018,29 @@
     "@typescript-eslint/types" "4.3.0"
     "@typescript-eslint/visitor-keys" "4.3.0"
 
-"@typescript-eslint/scope-manager@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.8.2.tgz#a18388c63ae9c17adde519384f539392f2c4f0d9"
-  integrity sha512-qHQ8ODi7mMin4Sq2eh/6eu03uVzsf5TX+J43xRmiq8ujng7ViQSHNPLOHGw/Wr5dFEoxq/ubKhzClIIdQy5q3g==
-  dependencies:
-    "@typescript-eslint/types" "4.8.2"
-    "@typescript-eslint/visitor-keys" "4.8.2"
+"@typescript-eslint/types@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.13.0.tgz#6a7c6015a59a08fbd70daa8c83dfff86250502f8"
+  integrity sha512-/+aPaq163oX+ObOG00M0t9tKkOgdv9lq0IQv/y4SqGkAXmhFmCfgsELV7kOCTb2vVU5VOmVwXBXJTDr353C1rQ==
 
 "@typescript-eslint/types@4.3.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.3.0.tgz#1f0b2d5e140543e2614f06d48fb3ae95193c6ddf"
   integrity sha512-Cx9TpRvlRjOppGsU6Y6KcJnUDOelja2NNCX6AZwtVHRzaJkdytJWMuYiqi8mS35MRNA3cJSwDzXePfmhU6TANw==
 
-"@typescript-eslint/types@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.8.2.tgz#c862dd0e569d9478eb82d6aee662ea53f5661a36"
-  integrity sha512-z1/AVcVF8ju5ObaHe2fOpZYEQrwHyZ7PTOlmjd3EoFeX9sv7UekQhfrCmgUO7PruLNfSHrJGQvrW3Q7xQ8EoAw==
+"@typescript-eslint/typescript-estree@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.13.0.tgz#cf6e2207c7d760f5dfd8d18051428fadfc37b45e"
+  integrity sha512-9A0/DFZZLlGXn5XA349dWQFwPZxcyYyCFX5X88nWs2uachRDwGeyPz46oTsm9ZJE66EALvEns1lvBwa4d9QxMg==
+  dependencies:
+    "@typescript-eslint/types" "4.13.0"
+    "@typescript-eslint/visitor-keys" "4.13.0"
+    debug "^4.1.1"
+    globby "^11.0.1"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
 
 "@typescript-eslint/typescript-estree@4.3.0":
   version "4.3.0"
@@ -3022,19 +3056,13 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/typescript-estree@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.8.2.tgz#eeec34707d8577600fb21661b5287226cc8b3bed"
-  integrity sha512-HToGNwI6fekH0dOw3XEVESUm71Onfam0AKin6f26S2FtUmO7o3cLlWgrIaT1q3vjB3wCTdww3Dx2iGq5wtUOCg==
+"@typescript-eslint/visitor-keys@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.13.0.tgz#9acb1772d3b3183182b6540d3734143dce9476fe"
+  integrity sha512-6RoxWK05PAibukE7jElqAtNMq+RWZyqJ6Q/GdIxaiUj2Ept8jh8+FUVlbq9WxMYxkmEOPvCE5cRSyupMpwW31g==
   dependencies:
-    "@typescript-eslint/types" "4.8.2"
-    "@typescript-eslint/visitor-keys" "4.8.2"
-    debug "^4.1.1"
-    globby "^11.0.1"
-    is-glob "^4.0.1"
-    lodash "^4.17.15"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
+    "@typescript-eslint/types" "4.13.0"
+    eslint-visitor-keys "^2.0.0"
 
 "@typescript-eslint/visitor-keys@4.3.0":
   version "4.3.0"
@@ -3044,14 +3072,6 @@
     "@typescript-eslint/types" "4.3.0"
     eslint-visitor-keys "^2.0.0"
 
-"@typescript-eslint/visitor-keys@4.8.2":
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.8.2.tgz#62cd3fbbbf65f8eccfbe6f159eb1b84a243a3f77"
-  integrity sha512-Vg+/SJTMZJEKKGHW7YC21QxgKJrSbxoYYd3MEUGtW7zuytHuEcksewq0DUmo4eh/CTNrVJGSdIY9AtRb6riWFw==
-  dependencies:
-    "@typescript-eslint/types" "4.8.2"
-    eslint-visitor-keys "^2.0.0"
-
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -3739,7 +3759,7 @@ babel-helper-to-multiple-sequence-expressions@^0.5.0:
   resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
   integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
 
-babel-loader@^8.0.6, babel-loader@^8.1.0:
+babel-loader@^8.0.6, babel-loader@^8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
   integrity sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==
@@ -5319,6 +5339,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -5523,17 +5548,17 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
   integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
-domhandler@2.4.2, domhandler@^2.3.0:
+domhandler@2.4.2, domhandler@^2.3.0, domhandler@^2.4.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
   integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
-dompurify@^2.0.17:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.4.tgz#a98cd182b729bdd8715c3eb7a8bf8eafb2ff7410"
-  integrity sha512-jE21SelIgWrGKoXGfGPA524Zt1IJFBnktwfFMHDlEYRx5FZOdc+4eEH9mkA6PuhExrq3HVpJnY8hMYUzAMl0OA==
+dompurify@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.6.tgz#54945dc5c0b45ce5ae228705777e8e59d7b2edc4"
+  integrity sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ==
 
 domutils@1.5.1:
   version "1.5.1"
@@ -5899,7 +5924,7 @@ eslint-config-airbnb-base@^14.2.1:
     object.assign "^4.1.2"
     object.entries "^1.1.2"
 
-eslint-config-airbnb@^18.2.0:
+eslint-config-airbnb@^18.2.1:
   version "18.2.1"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9"
   integrity sha512-glZNDEZ36VdlZWoxn/bUR1r/sdFKPd1mHPbqUtkctgNG4yT2DLLtJ3D+yCV+jzZCc2V1nBVkmdknOJBZ5Hc0fg==
@@ -5949,7 +5974,7 @@ eslint-module-utils@^2.6.0:
     debug "^2.6.9"
     pkg-dir "^2.0.0"
 
-eslint-plugin-import@^2.22.0:
+eslint-plugin-import@^2.22.1:
   version "2.22.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz#0896c7e6a0cf44109a2d97b95903c2bb689d7702"
   integrity sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==
@@ -5968,7 +5993,7 @@ eslint-plugin-import@^2.22.0:
     resolve "^1.17.0"
     tsconfig-paths "^3.9.0"
 
-eslint-plugin-jsx-a11y@^6.3.1:
+eslint-plugin-jsx-a11y@^6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
   integrity sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==
@@ -5985,10 +6010,10 @@ eslint-plugin-jsx-a11y@^6.3.1:
     jsx-ast-utils "^3.1.0"
     language-tags "^1.0.5"
 
-eslint-plugin-prettier@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz#168ab43154e2ea57db992a2cd097c828171f75c2"
-  integrity sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==
+eslint-plugin-prettier@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz#7079cfa2497078905011e6f82e8dd8453d1371b7"
+  integrity sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
@@ -5997,10 +6022,10 @@ eslint-plugin-react-hooks@^4.1.2:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
   integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
 
-eslint-plugin-react@^7.20.6:
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz#50b21a412b9574bfe05b21db176e8b7b3b15bff3"
-  integrity sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==
+eslint-plugin-react@^7.22.0:
+  version "7.22.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.22.0.tgz#3d1c542d1d3169c45421c1215d9470e341707269"
+  integrity sha512-p30tuX3VS+NWv9nQot9xIGAHBXR0+xJVaZriEsHoJrASGCJZDJ8JLNM0YqKqI0AKm6Uxaa1VUHoNEibxRCMQHA==
   dependencies:
     array-includes "^3.1.1"
     array.prototype.flatmap "^1.2.3"
@@ -6065,7 +6090,7 @@ eslint-watch@^7.0.0:
     optionator "^0.9.1"
     source-map-support "^0.5.13"
 
-eslint@^7.9.0:
+eslint@^7.17.0:
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.17.0.tgz#4ccda5bf12572ad3bf760e6f195886f50569adb0"
   integrity sha512-zJk08MiBgwuGoxes5sSQhOtibZ75pz0J35XTRlZOk9xMffhpA9BTbQZxoXZzOl5zMbleShbGwtw+1kGferfFwQ==
@@ -6664,6 +6689,19 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
+formik@^2.1.5:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0"
+  integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -7292,12 +7330,12 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
-html-react-parser@^0.14.1:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.14.2.tgz#d8cd84e8dc041680f28274e0e41d637bc784d111"
-  integrity sha512-ZyjUlNZ0cAUhknoXSTfE2yZteY+pnbGXE3Flp5l3Qk40UvKDRp+F/nBvRbIHrWa7tGLZInigJoBuFylxyhGU9w==
+html-react-parser@^0.14.3:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.14.3.tgz#bd126bba11dce88b97168b5c879e031b6c2209e5"
+  integrity sha512-scZ1DHGbyRv0AjsavBndhTzAOQ5iWxzmD5z74cXU07mMcegt8MtlQoHx3SVGhVAkScqNgk1hgKoE80S3OFUt4A==
   dependencies:
-    "@types/htmlparser2" "3.10.1"
+    "@types/htmlparser2" "3.10.2"
     html-dom-parser "0.3.0"
     react-property "1.0.1"
     style-to-js "1.1.0"
@@ -8418,6 +8456,11 @@ lodash-es@^4.17.15:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -8463,6 +8506,11 @@ lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15,
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -8899,7 +8947,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
   integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
 
-mini-svg-data-uri@^1.1.3:
+mini-svg-data-uri@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
   integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
@@ -9106,6 +9154,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -9139,9 +9192,9 @@ neo-async@^2.5.0, neo-async@^2.6.1:
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
 nested-object-assign@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/nested-object-assign/-/nested-object-assign-1.0.3.tgz#5aca69390d9affe5a612152b5f0843ae399ac597"
-  integrity sha512-kgq1CuvLyUcbcIuTiCA93cQ2IJFSlRwXcN+hLcb2qLJwC2qrePHGZZa7IipyWqaWF6tQjdax2pQnVxdq19Zzwg==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/nested-object-assign/-/nested-object-assign-1.0.4.tgz#c9db56078eb6043960fdb6ba918a5122a06ccac4"
+  integrity sha512-FlZ7oN9ICt+fbcJ4ag2IsALIcalfE/E16ttdSA8peBiHJI+oEKdOcafqDnUbeUe5NwWGn/m9zZGO9qrAGzfesg==
 
 next-tick@~1.0.0:
   version "1.0.0"
@@ -9939,7 +9992,7 @@ polished@^3.3.1, polished@^3.4.4:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-polished@^4.0.3:
+polished@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/polished/-/polished-4.0.5.tgz#3f91873c8f72dec1723b3f892f57fbb22645b23d"
   integrity sha512-BY2+LVtOHQWBQpGN4GPAKpCdsBePOdSdHTpZegRDRCrvGPkRPTx1DEC+vGjIDPhXS7W2qiBxschnwRWTFdMZag==
@@ -10106,10 +10159,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
-  integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==
+prettier@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
 prettier@~2.0.5:
   version "2.0.5"
@@ -10221,6 +10274,11 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-expr@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
 property-information@^5.0.0, property-information@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.5.0.tgz#4dc075d493061a82e2b7d096f406e076ed859943"
@@ -10383,10 +10441,10 @@ raw-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.5"
 
-rc-progress@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-3.1.1.tgz#f7ba5eb33cc438862513ab5a71739feaf6b3ef4f"
-  integrity sha512-1ns3pW7ll9bHfdXtlVLF+vngdvlxiCDtiqwXnZFEdurst11JTiPxVdeqnCNbhWx5hP4kCKkAPqG1N0FVfTSUGA==
+rc-progress@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-3.1.3.tgz#d77d8fd26d9d948d72c2a28b64b71a6e86df2426"
+  integrity sha512-Jl4fzbBExHYMoC6HBPzel0a9VmhcSXx24LVt/mdhDM90MuzoMCJjXZAlhA0V0CJi+SKjMhfBoIQ6Lla1nD4QNw==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.6"
@@ -10558,6 +10616,11 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fast-compare@^3.0.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.1.1.tgz#0becf31e3812fa70dc231e259f40d892d4767900"
@@ -11267,7 +11330,7 @@ rollup-plugin-copy@^3.3.0:
     globby "10.0.1"
     is-plain-object "^3.0.0"
 
-rollup-plugin-filesize@^9.0.2:
+rollup-plugin-filesize@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-filesize/-/rollup-plugin-filesize-9.1.0.tgz#e6032a2975d1c0c8f2c30ecaa73a12bf39406461"
   integrity sha512-3umx+e2AzYH4lJaBtyeWk2kC7JafzZhy5AJwj2amudWWgqIFpI/QH7s2+9LWBwIvjK5ty6K6eM3i6dw7qF4GrQ==
@@ -12121,7 +12184,7 @@ stylelint-processor-styled-components@^1.10.0:
     micromatch "^4.0.2"
     postcss "^7.0.26"
 
-stylelint@^13.7.2:
+stylelint@^13.8.0:
   version "13.8.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.8.0.tgz#446765dbe25e3617f819a0165956faf2563ddc23"
   integrity sha512-iHH3dv3UI23SLDrH4zMQDjLT9/dDIz/IpoFeuNxZmEx86KtfpjDOscxLTFioQyv+2vQjPlRZnK0UoJtfxLICXQ==
@@ -12410,6 +12473,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
@@ -12479,6 +12547,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -12640,10 +12713,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
-  integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
+typescript@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
 
 ua-parser-js@^0.7.18:
   version "0.7.21"
@@ -13247,6 +13320,19 @@ yargs-parser@^20.2.3:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
   integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
 
+yup@^0.32.11:
+  version "0.32.11"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
+  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"