diff --git a/docs/components/Layout/index.jsx b/docs/components/Layout/index.jsx
index bd9f6fcc9..614263461 100644
--- a/docs/components/Layout/index.jsx
+++ b/docs/components/Layout/index.jsx
@@ -1,11 +1,14 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { PageTitle } from '../../../src';
+
 import Header from '../Header';
 import Navigation from '../Navigation';
 import Contributors from '../Contributors';
 import SearchBar from '../SearchBar';
 import SearchResultCard from '../SearchResultCard';
+import MigrationNote from '../MigrationNote';
 
 import ButtonExample from '../../examples/ButtonExample';
 import AlertInputExample from '../../examples/AlertInputExample';
@@ -56,8 +59,6 @@ import SplitPaneExample from '../../examples/SplitPaneExample';
 import HoverDropdownMenuExample from '../../examples/HoverDropdownMenuExample';
 import NavigationExample from '../../examples/NavigationExample';
 
-import { PageTitle } from '../../../src';
-
 import './styles.scss';
 import '../../examples/styles.scss';
 
@@ -113,47 +114,44 @@ const componentsBySection = {
 const componentIndexForSearch = _.flatMap(componentsBySection);
 
 class PageLayout extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 'buttons',
-      searchTerm: '',
-      searchResults: [],
-    };
-
-    this.navigateTo = newPage => {
-      if (newPage !== this.state.page) {
-        this.setState({ page: newPage });
-      }
-      window.location.href = `${window.location.origin}${window.location.pathname}#${newPage}-example`;
-    };
-
-    this.filterComponents = searchTerm => {
-      const searchTermRegExp = new RegExp(searchTerm, 'i');
-      return _(componentIndexForSearch)
-        .filter(val => searchTermRegExp.test(val))
-        .sort()
-        .value();
-    };
-
-    this.handleSearch = searchTerm => {
-      if (searchTerm.length === 0) {
-        this.clearSearch();
-      } else {
-        this.setState({
-          searchTerm,
-          searchResults: this.filterComponents(searchTerm),
-        });
-      }
-    };
-
-    this.clearSearch = () => {
+  state = {
+    page: 'buttons',
+    searchTerm: '',
+    searchResults: [],
+  };
+
+  navigateTo = newPage => {
+    if (newPage !== this.state.page) {
+      this.setState({ page: newPage });
+    }
+    window.location.href = `${window.location.origin}${window.location.pathname}#${newPage}-example`;
+  };
+
+  filterComponents = searchTerm => {
+    const searchTermRegExp = new RegExp(searchTerm, 'i');
+    return _(componentIndexForSearch)
+      .filter(val => searchTermRegExp.test(val))
+      .sort()
+      .value();
+  };
+
+  handleSearch = searchTerm => {
+    if (searchTerm.length === 0) {
+      this.clearSearch();
+    } else {
       this.setState({
-        searchTerm: '',
-        searchResults: [],
+        searchTerm,
+        searchResults: this.filterComponents(searchTerm),
       });
-    };
-  }
+    }
+  };
+
+  clearSearch = () => {
+    this.setState({
+      searchTerm: '',
+      searchResults: [],
+    });
+  };
 
   render() {
     return (
@@ -173,6 +171,7 @@ class PageLayout extends React.Component {
             )}
           </SidebarArea>
           <ContentArea>
+            <MigrationNote />
             <PageTitle title="Form Elements" />
             <ButtonExample />
             <AlertInputExample />
diff --git a/docs/components/Layout/styles.scss b/docs/components/Layout/styles.scss
index 568af27e4..40a6c67b5 100644
--- a/docs/components/Layout/styles.scss
+++ b/docs/components/Layout/styles.scss
@@ -29,12 +29,12 @@ body {
   flex: 1;
 
   > .pagetitle-component {
-    margin-bottom: $spacing-etalon;
+    margin: $spacing-etalon auto;
     padding-left: 0;
+  }
 
-    &:not(:first-child) {
-      margin-top: ($spacing-etalon * 4);
-    }
+  > .migration-docs {
+    font-size: $font-size-header;
   }
 }
 
diff --git a/docs/components/MigrationNote/index.jsx b/docs/components/MigrationNote/index.jsx
new file mode 100644
index 000000000..2b8944abe
--- /dev/null
+++ b/docs/components/MigrationNote/index.jsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import Collapse from 'react-bootstrap/lib/Collapse';
+import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
+import jsx from 'react-syntax-highlighter/languages/prism/jsx';
+import coy from 'react-syntax-highlighter/styles/prism/coy';
+
+import { Button } from '../../../src';
+
+registerLanguage('jsx', jsx);
+
+class MigrationNote extends React.Component {
+  state = {
+    showModal: false,
+  };
+
+  openCollapse = () => {
+    this.setState(prev => ({ showModal: !prev.showModal }));
+  };
+
+  render() {
+    return (
+      <>
+        <Button bsStyle="link" onClick={this.openCollapse} className="migration-docs">
+          <b>Version 27 Migration guide </b>
+          <span role="img" aria-label="emoji">
+            📚
+          </span>
+        </Button>
+        <Collapse in={this.state.showModal} mountOnEnter>
+          <div>
+            <h2>Migration Guide</h2>
+            <hr />
+            <h3>Popover Component</h3>
+            <p>
+              The {`<Popover />`} component can be themed by providing one of the following values to the <b>theme</b>{' '}
+              prop:{` `}
+              <b>[&apos;light&apos;, &apos;dark&apos;, &apos;warn&apos;, &apos;error&apos;]</b>.
+            </p>
+            <p>
+              For more information check the example: <a href="#popover-example">Popover Example</a>
+            </p>
+            <br />
+            <h3>Accordion Component</h3>
+            <p>The accordion component has been rewritten due to performance concerns.</p>
+            <p>
+              The new component no longer accepts the <b>&apos;panels&apos;</b> prop.
+            </p>
+            <b>Old way:</b>
+            <SyntaxHighlighter language="jsx" style={coy}>
+              {`
+              <Accordion
+                panels={[
+                  {
+                    id: '1',
+                    icon: { href: './docs/assets/svg-symbols.svg#list' },
+                    title: 'Filter by region',
+                    isCollapsed: true,
+                    content: (
+                      <ul className="list-unstyled">
+                        <li>
+                          <Checkbox label="Australia" />
+                        </li>
+                        <li>
+                          <Checkbox label="New Zealand" />
+                        </li>
+                      </ul>
+                    ),
+                  },
+                ]}
+                onPanelClick={this.toggleAccordionPanel}
+              />
+            `}
+            </SyntaxHighlighter>
+            <b>New way: Each panel should be provided as a child of the Accordion component.</b>
+            <SyntaxHighlighter language="jsx" style={coy}>
+              {`
+              <Accordion onPanelClick={this.toggleAccordionPanel}>
+                <Panel
+                  id='1'
+                  icon={{ href: './docs/assets/svg-symbols.svg#list' }}
+                  title='Filter by region'
+                >
+                <ul className="list-unstyled">
+                  <li>
+                    <Checkbox label="Australia" />
+                  </li>
+                  <li>
+                    <Checkbox label="New Zealand" />
+                  </li>
+                </ul>
+                </Panel>
+              </Accordion>
+            `}
+            </SyntaxHighlighter>
+            <h3>Tabs Component</h3>
+            <p>This component has been rewritten due to some React issues.</p>
+            <p>Also Adslot-ui lib has deprecated Tabs and Tab from react-bootstrap</p>
+            <p>
+              For more information check the example: <a href="#tab-example">Tab Example</a>
+            </p>
+            <br />
+            <h3>Checkbox Component</h3>
+            <p>
+              This component will support 3 states <i>CHECKED, PARTIAL CHECKED AND NON-CHECKED</i> from version 27{' '}
+            </p>
+            <p>Also the onChange function has changed</p>
+            <SyntaxHighlighter language="jsx" style={coy}>
+              {`
+              From: onChange = (event, name) => {...}
+              To: onChange = (nextCheckState, name, value) => {...}
+              `}
+            </SyntaxHighlighter>
+            <p>The nextCheckState will be:</p>
+            <SyntaxHighlighter language="jsx" style={coy}>
+              {`
+              true => false  false => true  'partial' => false
+              `}
+            </SyntaxHighlighter>
+            <p>
+              For more information check the example: <a href="#checkbox-example">Checkbox Example</a>
+            </p>
+          </div>
+        </Collapse>
+      </>
+    );
+  }
+}
+
+export default MigrationNote;
diff --git a/docs/examples/TabExample.jsx b/docs/examples/TabExample.jsx
index f4ab0b731..86a91af58 100644
--- a/docs/examples/TabExample.jsx
+++ b/docs/examples/TabExample.jsx
@@ -120,6 +120,7 @@ const exampleProps = {
         {
           propType: 'onSelect',
           type: 'func',
+          note: `(selectedTabKey) => {...}`,
         },
         {
           propType: 'id',