diff --git a/.eslintrc.json b/.eslintrc.json
index dcbf48291..f184dc64c 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,7 +1,8 @@
 {
   "plugins": [
     "react",
-    "react-hooks"
+    "react-hooks",
+    "import"
   ],
   "parserOptions": {
     "ecmaVersion": 2018,
@@ -20,7 +21,19 @@
   "settings": {
     "react": {
       "version": "detect"
-    }
+    },
+    "import/core-modules": [
+        "ttag",
+        "react-components",
+        "react-router-dom",
+        "react-router",
+        "react-redux",
+        "react-test-renderer",
+        "enzyme",
+        "enzyme-adapter-react-16",
+        "proton-shared",
+        "proton-shared/*"
+    ]
   },
   "extends": [
     "eslint:recommended",
@@ -29,6 +42,11 @@
   "rules": {
     "react/display-name": "off",
     "react/prop-types": "warn",
-    "react-hooks/rules-of-hooks": "error"
+    "react-hooks/rules-of-hooks": "error",
+    "import/no-unresolved": [2, {"commonjs": true, "amd": true, "ignore": ["proton-shared"]}],
+    "import/named": 2,
+    "import/namespace": 2,
+    "import/default": 2,
+    "import/export": 2
   }
 }
diff --git a/components/alert/Alert.js b/Components/alert/index.js
similarity index 100%
rename from components/alert/Alert.js
rename to Components/alert/index.js
diff --git a/components/badge/Badge.js b/Components/badge/index.js
similarity index 95%
rename from components/badge/Badge.js
rename to Components/badge/index.js
index 8ac78f890..d1869356a 100644
--- a/components/badge/Badge.js
+++ b/Components/badge/index.js
@@ -20,4 +20,4 @@ Badge.defaultProps = {
     type: 'default'
 };
 
-export default Badge;
\ No newline at end of file
+export default Badge;
diff --git a/components/breadcrumb/Breadcrumb.js b/Components/breadcrumb/index.js
similarity index 100%
rename from components/breadcrumb/Breadcrumb.js
rename to Components/breadcrumb/index.js
diff --git a/components/button/Copy.js b/Components/button/copy.js
similarity index 93%
rename from components/button/Copy.js
rename to Components/button/copy.js
index edb39de52..a90646296 100644
--- a/components/button/Copy.js
+++ b/Components/button/copy.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { c } from 'ttag';
 
 import { textToClipboard } from 'proton-shared/lib/helpers/browser';
-import Button from './Button';
-import Icon from '../icon/Icon';
+import Button from './index';
+import Icon from '../icon';
 import { getClasses } from '../../helpers/component';
 
 const Copy = ({ className }) => {
diff --git a/Components/button/group.js b/Components/button/group.js
new file mode 100644
index 000000000..9405a075f
--- /dev/null
+++ b/Components/button/group.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Button from './index';
+import { getClasses } from '../../helpers/component';
+
+const ButtonGroup = ({ children, className, ...rest }) => (
+    <Button className={getClasses('pm-button pm-group-button', className)} {...rest}>
+        {children}
+    </Button>
+);
+
+ButtonGroup.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string
+};
+
+export default ButtonGroup;
diff --git a/components/button/Button.js b/Components/button/index.js
similarity index 100%
rename from components/button/Button.js
rename to Components/button/index.js
diff --git a/components/button/LargeButton.js b/Components/button/large.js
similarity index 61%
rename from components/button/LargeButton.js
rename to Components/button/large.js
index d91e5a310..cb8502443 100644
--- a/components/button/LargeButton.js
+++ b/Components/button/large.js
@@ -2,10 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
-import Button from './Button';
+import Button from './index';
 
 const LargeButton = ({ children, className, ...rest }) => {
-    return <Button className={getClasses('pm-button pm-button--large mr1', className)} {...rest}>{children}</Button>
+    return (
+        <Button className={getClasses('pm-button pm-button--large mr1', className)} {...rest}>
+            {children}
+        </Button>
+    );
 };
 
 LargeButton.propTypes = {
@@ -17,4 +21,4 @@ LargeButton.defaultProps = {
     className: ''
 };
 
-export default LargeButton;
\ No newline at end of file
+export default LargeButton;
diff --git a/components/button/LinkButton.js b/Components/button/link.js
similarity index 92%
rename from components/button/LinkButton.js
rename to Components/button/link.js
index 7164fa827..1fb7b19ba 100644
--- a/components/button/LinkButton.js
+++ b/Components/button/link.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from './Button';
+import Button from './index';
 
 const LinkButton = ({ children, className, ...rest }) => {
     return (
diff --git a/components/button/PrimaryButton.js b/Components/button/primary.js
similarity index 57%
rename from components/button/PrimaryButton.js
rename to Components/button/primary.js
index 536c4e1a1..e04f68740 100644
--- a/components/button/PrimaryButton.js
+++ b/Components/button/primary.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from './Button';
+import Button from './index';
 import { getClasses } from '../../helpers/component';
 
 const PrimaryButton = ({ children, className, ...rest }) => {
-    return (<Button className={getClasses('pm-button-primary mr1', className)} {...rest}>{children}</Button>);
+    return (
+        <Button className={getClasses('pm-button-primary mr1', className)} {...rest}>
+            {children}
+        </Button>
+    );
 };
 
 PrimaryButton.propTypes = {
@@ -13,4 +17,4 @@ PrimaryButton.propTypes = {
     className: PropTypes.string
 };
 
-export default PrimaryButton;
\ No newline at end of file
+export default PrimaryButton;
diff --git a/Components/button/reset.js b/Components/button/reset.js
new file mode 100644
index 000000000..379b3e817
--- /dev/null
+++ b/Components/button/reset.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from './index';
+
+const ResetButton = ({ children, ...rest }) => (
+    <Button type="reset" {...rest}>
+        {children}
+    </Button>
+);
+
+ResetButton.propTypes = {
+    children: PropTypes.node.isRequired
+};
+
+export default ResetButton;
diff --git a/components/button/SmallButton.js b/Components/button/small.js
similarity index 61%
rename from components/button/SmallButton.js
rename to Components/button/small.js
index 1b6659123..ef58ce35b 100644
--- a/components/button/SmallButton.js
+++ b/Components/button/small.js
@@ -2,10 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
-import Button from './Button';
+import Button from './index';
 
 const SmallButton = ({ children, className, ...rest }) => {
-    return <Button className={getClasses('pm-button pm-button--small mr1', className)} {...rest}>{children}</Button>
+    return (
+        <Button className={getClasses('pm-button pm-button--small mr1', className)} {...rest}>
+            {children}
+        </Button>
+    );
 };
 
 SmallButton.propTypes = {
@@ -17,4 +21,4 @@ SmallButton.defaultProps = {
     className: ''
 };
 
-export default SmallButton;
\ No newline at end of file
+export default SmallButton;
diff --git a/components/container/Block.js b/Components/container/Block.js
similarity index 93%
rename from components/container/Block.js
rename to Components/container/Block.js
index 56b651c78..c11b89170 100644
--- a/components/container/Block.js
+++ b/Components/container/Block.js
@@ -11,4 +11,4 @@ Block.propTypes = {
     className: PropTypes.string
 };
 
-export default Block;
\ No newline at end of file
+export default Block;
diff --git a/components/container/Bordered.js b/Components/container/Bordered.js
similarity index 93%
rename from components/container/Bordered.js
rename to Components/container/Bordered.js
index fccb06f9c..f4d049521 100644
--- a/components/container/Bordered.js
+++ b/Components/container/Bordered.js
@@ -11,4 +11,4 @@ Bordered.propTypes = {
     className: PropTypes.string
 };
 
-export default Bordered;
\ No newline at end of file
+export default Bordered;
diff --git a/components/button/Group.js b/Components/container/Group.js
similarity index 91%
rename from components/button/Group.js
rename to Components/container/Group.js
index 7487512b4..a69d84b3c 100644
--- a/components/button/Group.js
+++ b/Components/container/Group.js
@@ -7,4 +7,4 @@ Group.propTypes = {
     children: PropTypes.node.isRequired
 };
 
-export default Group;
\ No newline at end of file
+export default Group;
diff --git a/components/icon/Icons.js b/Components/container/Icons.js
similarity index 100%
rename from components/icon/Icons.js
rename to Components/container/Icons.js
diff --git a/components/container/Information.js b/Components/container/Information.js
similarity index 100%
rename from components/container/Information.js
rename to Components/container/Information.js
diff --git a/components/container/Row.js b/Components/container/Row.js
similarity index 59%
rename from components/container/Row.js
rename to Components/container/Row.js
index c9fda6bf9..a39f27464 100644
--- a/components/container/Row.js
+++ b/Components/container/Row.js
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
 const Row = ({ children, className, ...rest }) => {
-    return <div className={getClasses('flex flex-nowrap onmobile-flex-column mb1', className)} {...rest}>{children}</div>;
+    return (
+        <div className={getClasses('flex flex-nowrap onmobile-flex-column mb1', className)} {...rest}>
+            {children}
+        </div>
+    );
 };
 
 Row.propTypes = {
@@ -11,4 +15,4 @@ Row.propTypes = {
     className: PropTypes.string
 };
 
-export default Row;
\ No newline at end of file
+export default Row;
diff --git a/components/dropdown/Dropdown.test.js b/Components/dropdown/Dropdown.test.js
similarity index 83%
rename from components/dropdown/Dropdown.test.js
rename to Components/dropdown/Dropdown.test.js
index df34b61ba..a03947770 100644
--- a/components/dropdown/Dropdown.test.js
+++ b/Components/dropdown/Dropdown.test.js
@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import Enzyme, { shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-import Dropdown from './Dropdown';
-import Button from '../button/Button';
+import Dropdown from './index';
+import Button from '../button/index';
 
 const myDropdown = () => {
     return (
@@ -20,7 +20,12 @@ describe('Dropdown', () => {
     const wrapper = shallow(myDropdown());
 
     it('renders without crashing', () => {
-        expect(wrapper.find(Button).shallow().text()).toBe('Profile');
+        expect(
+            wrapper
+                .find(Button)
+                .shallow()
+                .text()
+        ).toBe('Profile');
         expect(wrapper.find('input').exists()).toBe(false);
     });
 
@@ -40,4 +45,4 @@ describe('Dropdown', () => {
 
         expect(tree).toMatchSnapshot();
     });
-});
\ No newline at end of file
+});
diff --git a/components/dropdown/Dropdown.js b/Components/dropdown/index.js
similarity index 98%
rename from components/dropdown/Dropdown.js
rename to Components/dropdown/index.js
index 53d33d2ad..a4cd93ea7 100644
--- a/components/dropdown/Dropdown.js
+++ b/Components/dropdown/index.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import keycode from 'keycode';
 
-import Button from '../button/Button';
+import Button from '../button';
 
 const Dropdown = ({ isOpen, children, className, content, autoClose, autoCloseOutside }) => {
     const [open, setOpen] = useState(isOpen);
diff --git a/components/dropdown/DropdownItem.js b/Components/dropdown/item.js
similarity index 95%
rename from components/dropdown/DropdownItem.js
rename to Components/dropdown/item.js
index baed2cedf..e1f16414a 100644
--- a/components/dropdown/DropdownItem.js
+++ b/Components/dropdown/item.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
-import Button from '../button/Button';
-import Icon from '../icon/Icon';
+import Button from '../button';
+import Icon from '../icon';
 import { getClasses } from '../../helpers/component';
 
 const DropdownItem = ({ type, link, text, iconName, className, onClick, disabled }) => {
diff --git a/components/dropdown/DropdownMenu.js b/Components/dropdown/menu.js
similarity index 65%
rename from components/dropdown/DropdownMenu.js
rename to Components/dropdown/menu.js
index 8aec0b8d2..86dc3510f 100644
--- a/components/dropdown/DropdownMenu.js
+++ b/Components/dropdown/menu.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DropdownItem from './DropdownItem';
+import DropdownItem from './item';
 
 const DropdownMenu = ({ list }) => {
     return (
         <ul>
-            {list.map((item, index) => <DropdownItem {...item} key={item.text + index}></DropdownItem>)}
+            {list.map((item, index) => (
+                <DropdownItem {...item} key={item.text + index} />
+            ))}
         </ul>
     );
 };
diff --git a/components/icon/Icon.js b/Components/icon/index.js
similarity index 100%
rename from components/icon/Icon.js
rename to Components/icon/index.js
diff --git a/components/input/Checkbox.js b/Components/input/Checkbox.js
similarity index 93%
rename from components/input/Checkbox.js
rename to Components/input/Checkbox.js
index a8679ca41..d847e545b 100644
--- a/components/input/Checkbox.js
+++ b/Components/input/Checkbox.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Input from './Input';
+import Input from './index';
 
 const Checkbox = ({ checked, ...rest }) => {
     return (
diff --git a/components/input/Password.js b/Components/input/Password.js
similarity index 66%
rename from components/input/Password.js
rename to Components/input/Password.js
index 89c15d2b8..407d120ca 100644
--- a/components/input/Password.js
+++ b/Components/input/Password.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Input from './Input';
+import Input from './index';
 
 const Password = ({ ...rest }) => {
     const [type, setType] = useState('password');
@@ -9,9 +9,11 @@ const Password = ({ ...rest }) => {
     return (
         <>
             <Input type={type} {...rest} />
-            <button type="button" onClick={toggle}>TOGGLE</button>
+            <button type="button" onClick={toggle}>
+                TOGGLE
+            </button>
         </>
     );
 };
 
-export default Password;
\ No newline at end of file
+export default Password;
diff --git a/components/input/Radio.js b/Components/input/Radio.js
similarity index 89%
rename from components/input/Radio.js
rename to Components/input/Radio.js
index 3be54fade..eab05b3d1 100644
--- a/components/input/Radio.js
+++ b/Components/input/Radio.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Input from './Input';
+import Input from './index';
 
 const Radio = ({ ...rest }) => {
     return (
diff --git a/components/input/RadioCard.js b/Components/input/RadioCard.js
similarity index 100%
rename from components/input/RadioCard.js
rename to Components/input/RadioCard.js
diff --git a/components/input/RichTextEditor.js b/Components/input/RichTextEditor.js
similarity index 100%
rename from components/input/RichTextEditor.js
rename to Components/input/RichTextEditor.js
diff --git a/components/input/Search.js b/Components/input/Search.js
similarity index 97%
rename from components/input/Search.js
rename to Components/input/Search.js
index 801df24de..6fd26ad07 100644
--- a/components/input/Search.js
+++ b/Components/input/Search.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Input from './Input';
+import Input from './index';
 import useDebounceInput from './useDebounceInput';
 
 /**
diff --git a/components/input/TextArea.js b/Components/input/TextArea.js
similarity index 97%
rename from components/input/TextArea.js
rename to Components/input/TextArea.js
index 90ca41bac..119d958ce 100644
--- a/components/input/TextArea.js
+++ b/Components/input/TextArea.js
@@ -55,7 +55,7 @@ const TextArea = ({ className, disabled, onPressEnter, onKeyDown, onChange, onFo
             onFocus={handleFocus}
             onKeyDown={handleKeyDown}
             {...rest}
-            />
+        />
     );
 };
 
@@ -78,4 +78,4 @@ TextArea.defaultProps = {
     rows: 5
 };
 
-export default TextArea;
\ No newline at end of file
+export default TextArea;
diff --git a/components/input/Input.js b/Components/input/index.js
similarity index 100%
rename from components/input/Input.js
rename to Components/input/index.js
diff --git a/components/input/useDebounceInput.js b/Components/input/useDebounceInput.js
similarity index 100%
rename from components/input/useDebounceInput.js
rename to Components/input/useDebounceInput.js
diff --git a/components/input/useInput.js b/Components/input/useInput.js
similarity index 100%
rename from components/input/useInput.js
rename to Components/input/useInput.js
diff --git a/components/label/Label.js b/Components/label/index.js
similarity index 64%
rename from components/label/Label.js
rename to Components/label/index.js
index e49bc44a4..a90c53953 100644
--- a/components/label/Label.js
+++ b/Components/label/index.js
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
 const Label = ({ htmlFor, className, children, ...rest }) => {
-    return <label htmlFor={htmlFor} className={getClasses('pm-label', className)} {...rest}>{children}</label>;
+    return (
+        <label htmlFor={htmlFor} className={getClasses('pm-label', className)} {...rest}>
+            {children}
+        </label>
+    );
 };
 
 Label.propTypes = {
@@ -12,4 +16,4 @@ Label.propTypes = {
     htmlFor: PropTypes.string
 };
 
-export default Label;
\ No newline at end of file
+export default Label;
diff --git a/components/link/Info.js b/Components/link/Info.js
similarity index 84%
rename from components/link/Info.js
rename to Components/link/Info.js
index 42ca8a1aa..0b1b6e9ee 100644
--- a/components/link/Info.js
+++ b/Components/link/Info.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Href from './Href';
-import Icon from '../icon/Icon';
-import Tooltip from '../tooltip/Tooltip';
+import Href from './href';
+import Icon from '../icon';
+import Tooltip from '../tooltip';
 
 const wrapTooltip = (children, title) => <Tooltip title={title}>{children}</Tooltip>;
 const wrapLink = (children, url) => <Href url={url}>{children}</Href>;
diff --git a/components/link/LearnMore.js b/Components/link/LearnMore.js
similarity index 68%
rename from components/link/LearnMore.js
rename to Components/link/LearnMore.js
index 5c59665d1..b84700a36 100644
--- a/components/link/LearnMore.js
+++ b/Components/link/LearnMore.js
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { c } from 'ttag';
 
-import Href from './Href';
+import HrefLink from './href';
 
 const LearnMore = ({ url }) => {
-    return <Href url={url}>{c('Link').t`Learn more`}</Href>;
+    return <HrefLink url={url}>{c('Link').t`Learn more`}</HrefLink>;
 };
 
 LearnMore.propTypes = {
diff --git a/components/link/Href.js b/Components/link/href.js
similarity index 62%
rename from components/link/Href.js
rename to Components/link/href.js
index 21a678ffc..f8a55277c 100644
--- a/components/link/Href.js
+++ b/Components/link/href.js
@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const Href = ({ url, children }) => {
-    return <a href={url} target="_blank" rel="noopener noreferrer">{children}</a>;
+    return (
+        <a href={url} target="_blank" rel="noopener noreferrer">
+            {children}
+        </a>
+    );
 };
 
 Href.propTypes = {
@@ -14,4 +18,4 @@ Href.defaultProps = {
     url: '#'
 };
 
-export default Href;
\ No newline at end of file
+export default Href;
diff --git a/components/loader/Loader.js b/Components/loader/index.js
similarity index 89%
rename from components/loader/Loader.js
rename to Components/loader/index.js
index 33c04cf66..6ddbe97b4 100644
--- a/components/loader/Loader.js
+++ b/Components/loader/index.js
@@ -7,4 +7,4 @@ Loader.propTypes = {
     className: PropTypes.string
 };
 
-export default Loader;
\ No newline at end of file
+export default Loader;
diff --git a/components/loader/useLoader.js b/Components/loader/useLoader.js
similarity index 100%
rename from components/loader/useLoader.js
rename to Components/loader/useLoader.js
diff --git a/components/loader/useLoading.js b/Components/loader/useLoading.js
similarity index 91%
rename from components/loader/useLoading.js
rename to Components/loader/useLoading.js
index f2fbe323e..4a7278d09 100644
--- a/components/loader/useLoading.js
+++ b/Components/loader/useLoading.js
@@ -12,4 +12,4 @@ const useLoading = (initialState = true) => {
     };
 };
 
-export default useLoading;
\ No newline at end of file
+export default useLoading;
diff --git a/components/modal/Confirm.js b/Components/modal/Confirm.js
similarity index 92%
rename from components/modal/Confirm.js
rename to Components/modal/Confirm.js
index 818f64268..7252407ee 100644
--- a/components/modal/Confirm.js
+++ b/Components/modal/Confirm.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { c } from 'ttag';
 
-import { ResetButton, PrimaryButton } from '../button';
-import Modal from './Modal';
+import ResetButton from '../button/reset';
+import PrimaryButton from '../button/primary';
+import Modal from './index';
 import Footer from './Footer';
 import Content from './Content';
 
diff --git a/components/modal/Content.js b/Components/modal/Content.js
similarity index 96%
rename from components/modal/Content.js
rename to Components/modal/Content.js
index eabe1979e..1acd90fc8 100644
--- a/components/modal/Content.js
+++ b/Components/modal/Content.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { getClasses } from '../../helpers/component';
-import Loader from '../loader/Loader';
+import Loader from '../loader';
 
 const Content = ({ children, loading, className, onSubmit, onReset, autoComplete, ...rest }) => {
     if (loading) {
diff --git a/components/modal/Footer.js b/Components/modal/Footer.js
similarity index 100%
rename from components/modal/Footer.js
rename to Components/modal/Footer.js
diff --git a/components/modal/Header.js b/Components/modal/Header.js
similarity index 65%
rename from components/modal/Header.js
rename to Components/modal/Header.js
index 4bdcf0e1d..1b7a9e0da 100644
--- a/components/modal/Header.js
+++ b/Components/modal/Header.js
@@ -2,14 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from 'ttag';
 
-import Button from '../button/Button';
+import Button from '../button';
 import { getClasses } from '../../helpers/component';
 
 const Header = ({ children, modalTitleID, className, hasClose, onClose, ...rest }) => {
     return (
         <header className={getClasses('pm-modalHeader', className)} {...rest}>
-            {hasClose ? <Button className="pm-modalClose" title={t`Close`} onClick={onClose}>x</Button> : null}
-            <h1 id={modalTitleID} className="pm-modalTitle">{children}</h1>
+            {hasClose ? (
+                <Button className="pm-modalClose" title={t`Close`} onClick={onClose}>
+                    x
+                </Button>
+            ) : null}
+            <h1 id={modalTitleID} className="pm-modalTitle">
+                {children}
+            </h1>
         </header>
     );
 };
@@ -27,4 +33,4 @@ Header.defaultProps = {
     modalTitleID: 'modalTitle'
 };
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/components/modal/Input.js b/Components/modal/Input.js
similarity index 98%
rename from components/modal/Input.js
rename to Components/modal/Input.js
index 0aa1526db..7ee069ae2 100644
--- a/components/modal/Input.js
+++ b/Components/modal/Input.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { c } from 'ttag';
 import { ResetButton, PrimaryButton, Input, Label, Row } from 'react-components';
 
-import Modal from './Modal';
+import Modal from './index';
 import Footer from './Footer';
 import Content from './Content';
 import { generateUID } from '../../helpers/component';
diff --git a/components/modal/ModalWithPortal.js b/Components/modal/ModalWithPortal.js
similarity index 94%
rename from components/modal/ModalWithPortal.js
rename to Components/modal/ModalWithPortal.js
index 5f6a52395..e32bb0b32 100644
--- a/components/modal/ModalWithPortal.js
+++ b/Components/modal/ModalWithPortal.js
@@ -10,10 +10,10 @@ const ModalWithPortal = ({ children }) => {
         modalRoot.appendChild(el);
         return () => {
             modalRoot.removeChild(el);
-        }
-    }, [])
+        };
+    }, []);
 
     return ReactDOM.createPortal(children, el);
-}
+};
 
 export default ModalWithPortal;
diff --git a/components/modal/Modal.js b/Components/modal/index.js
similarity index 100%
rename from components/modal/Modal.js
rename to Components/modal/index.js
diff --git a/components/modal/useModal.js b/Components/modal/useModal.js
similarity index 93%
rename from components/modal/useModal.js
rename to Components/modal/useModal.js
index 7db2fc11b..b8237823c 100644
--- a/components/modal/useModal.js
+++ b/Components/modal/useModal.js
@@ -14,4 +14,4 @@ const useModal = (initialState = false) => {
     };
 };
 
-export default useModal;
\ No newline at end of file
+export default useModal;
diff --git a/components/pagination/Pagination.js b/Components/pagination/index.js
similarity index 88%
rename from components/pagination/Pagination.js
rename to Components/pagination/index.js
index 808f7e1c9..dcc8f7aca 100644
--- a/components/pagination/Pagination.js
+++ b/Components/pagination/index.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { ButtonGroup, Group } from '../button';
-import { Dropdown, DropdownMenu } from '../dropdown';
-import Icon from '../icon/Icon';
+import ButtonGroup from '../button/group';
+import Group from '../container/Group';
+import DropdownMenu from '../dropdown/menu';
+import Dropdown from '../dropdown';
+import Icon from '../icon';
 
 const Pagination = ({ onNext, onPrevious, onSelect, page, total, limit }) => {
     if (!total) {
diff --git a/components/pagination/usePagination.js b/Components/pagination/usePagination.js
similarity index 94%
rename from components/pagination/usePagination.js
rename to Components/pagination/usePagination.js
index 43941f070..7fceaffb4 100644
--- a/components/pagination/usePagination.js
+++ b/Components/pagination/usePagination.js
@@ -16,4 +16,4 @@ const usePagination = (initialList = [], initialPage = 1, limit = 10) => {
     };
 };
 
-export default usePagination;
\ No newline at end of file
+export default usePagination;
diff --git a/components/pagination/usePaginationAsync.js b/Components/pagination/usePaginationAsync.js
similarity index 91%
rename from components/pagination/usePaginationAsync.js
rename to Components/pagination/usePaginationAsync.js
index b4a61660d..d1832f8bb 100644
--- a/components/pagination/usePaginationAsync.js
+++ b/Components/pagination/usePaginationAsync.js
@@ -14,4 +14,4 @@ const usePaginationAsync = (initialPage = 1) => {
     };
 };
 
-export default usePaginationAsync;
\ No newline at end of file
+export default usePaginationAsync;
diff --git a/components/paragraph/Paragraph.js b/Components/paragraph/index.js
similarity index 100%
rename from components/paragraph/Paragraph.js
rename to Components/paragraph/index.js
diff --git a/components/price/Price.js b/Components/price/index.js
similarity index 100%
rename from components/price/Price.js
rename to Components/price/index.js
diff --git a/components/progress/Progress.js b/Components/progress/index.js
similarity index 57%
rename from components/progress/Progress.js
rename to Components/progress/index.js
index a7dd31a96..cdd6eba39 100644
--- a/components/progress/Progress.js
+++ b/Components/progress/index.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Progress = ({ value, max, ...rest }) => <progress className="progressBar" max={max} {...rest}>{value}</progress>;
+const Progress = ({ value, max, ...rest }) => (
+    <progress className="progressBar" max={max} {...rest}>
+        {value}
+    </progress>
+);
 
 Progress.propTypes = {
     value: PropTypes.number.isRequired,
@@ -13,4 +17,4 @@ Progress.defaultProps = {
     max: 100
 };
 
-export default Progress;
\ No newline at end of file
+export default Progress;
diff --git a/components/select/Select.js b/Components/select/index.js
similarity index 100%
rename from components/select/Select.js
rename to Components/select/index.js
diff --git a/components/sidebar/NavItem.js b/Components/sidebar/NavItem.js
similarity index 95%
rename from components/sidebar/NavItem.js
rename to Components/sidebar/NavItem.js
index c74a48d84..f64032cf3 100644
--- a/components/sidebar/NavItem.js
+++ b/Components/sidebar/NavItem.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
-import Button from '../button/Button';
-import Icon from '../icon/Icon';
+import Button from '../button/index';
+import Icon from '../icon/index';
 import NavMenu from './NavMenu';
 
 const NavItem = ({ type, link, text, onClick, iconName, list }) => {
diff --git a/components/sidebar/NavMenu.js b/Components/sidebar/NavMenu.js
similarity index 69%
rename from components/sidebar/NavMenu.js
rename to Components/sidebar/NavMenu.js
index bc64df751..8e747f4b8 100644
--- a/components/sidebar/NavMenu.js
+++ b/Components/sidebar/NavMenu.js
@@ -6,7 +6,9 @@ import NavItem from './NavItem';
 const NavMenu = ({ list }) => {
     return (
         <ul className="navigation__list unstyled">
-            {list.map((item, index) => <NavItem {...item} key={item.text + index}></NavItem>)}
+            {list.map((item, index) => (
+                <NavItem {...item} key={item.text + index} />
+            ))}
         </ul>
     );
 };
@@ -19,4 +21,4 @@ NavMenu.defaultProps = {
     list: []
 };
 
-export default NavMenu;
\ No newline at end of file
+export default NavMenu;
diff --git a/components/sidebar/Sidebar.js b/Components/sidebar/index.js
similarity index 94%
rename from components/sidebar/Sidebar.js
rename to Components/sidebar/index.js
index 56908f186..f4ced4d75 100644
--- a/components/sidebar/Sidebar.js
+++ b/Components/sidebar/index.js
@@ -21,4 +21,4 @@ Sidebar.defaultProps = {
     list: []
 };
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;
diff --git a/components/table/TableBody.js b/Components/table/body.js
similarity index 90%
rename from components/table/TableBody.js
rename to Components/table/body.js
index ef2090ffe..407619184 100644
--- a/components/table/TableBody.js
+++ b/Components/table/body.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import TableRowBusy from './TableRowBusy';
+import TableRowBusy from './rowBusy';
 
 const TableBody = ({ children, loading, colSpan, ...rest }) => {
     return <tbody {...rest}>{loading ? <TableRowBusy colSpan={colSpan} /> : children}</tbody>;
diff --git a/components/table/TableCell.js b/Components/table/cell.js
similarity index 60%
rename from components/table/TableCell.js
rename to Components/table/cell.js
index dd8c36995..667b0cc48 100644
--- a/components/table/TableCell.js
+++ b/Components/table/cell.js
@@ -3,17 +3,18 @@ import PropTypes from 'prop-types';
 
 const TableCell = ({ children, type, ...rest }) => {
     if (type === 'header' || type === 'footer') {
-        return <th scope="col" {...rest}>{children}</th>;
+        return (
+            <th scope="col" {...rest}>
+                {children}
+            </th>
+        );
     }
 
     return <td {...rest}>{children}</td>;
 };
 
 TableCell.propTypes = {
-    children: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.node
-    ]),
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     type: PropTypes.string
 };
 
@@ -21,4 +22,4 @@ TableCell.defaultProps = {
     type: 'body'
 };
 
-export default TableCell;
\ No newline at end of file
+export default TableCell;
diff --git a/components/table/TableCellBusy.js b/Components/table/cellBusy.js
similarity index 73%
rename from components/table/TableCellBusy.js
rename to Components/table/cellBusy.js
index bc64eb4af..67b32c2db 100644
--- a/components/table/TableCellBusy.js
+++ b/Components/table/cellBusy.js
@@ -2,4 +2,4 @@ import React from 'react';
 
 const TableCellBusy = () => <td aria-busy="true" />;
 
-export default TableCellBusy;
\ No newline at end of file
+export default TableCellBusy;
diff --git a/components/table/TableFooter.js b/Components/table/footer.js
similarity index 62%
rename from components/table/TableFooter.js
rename to Components/table/footer.js
index 832f2616d..4abb8a282 100644
--- a/components/table/TableFooter.js
+++ b/Components/table/footer.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import TableCell from './TableCell';
+import TableCell from './cell';
 
 const TableFooter = ({ cells, ...rest }) => {
     return (
         <tfoot {...rest}>
             <tr>
-                {cells.map((cell, index) => <TableCell key={index.toString()}>{cell}</TableCell>)}
+                {cells.map((cell, index) => (
+                    <TableCell key={index.toString()}>{cell}</TableCell>
+                ))}
             </tr>
         </tfoot>
     );
@@ -21,4 +23,4 @@ TableFooter.defaultProps = {
     cells: []
 };
 
-export default TableFooter;
\ No newline at end of file
+export default TableFooter;
diff --git a/components/table/TableHeader.js b/Components/table/header.js
similarity index 56%
rename from components/table/TableHeader.js
rename to Components/table/header.js
index 70f16dc43..61409af69 100644
--- a/components/table/TableHeader.js
+++ b/Components/table/header.js
@@ -1,13 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import TableCell from './TableCell';
+import TableCell from './cell';
 
 const TableHeader = ({ cells, ...rest }) => {
     return (
         <thead {...rest}>
             <tr>
-                {cells.map((cell, index) => <TableCell key={index.toString()} type="header">{cell}</TableCell>)}
+                {cells.map((cell, index) => (
+                    <TableCell key={index.toString()} type="header">
+                        {cell}
+                    </TableCell>
+                ))}
             </tr>
         </thead>
     );
@@ -21,4 +25,4 @@ TableHeader.defaultProps = {
     cells: []
 };
 
-export default TableHeader;
\ No newline at end of file
+export default TableHeader;
diff --git a/components/table/Table.js b/Components/table/index.js
similarity index 70%
rename from components/table/Table.js
rename to Components/table/index.js
index b0a424c33..a86166f45 100644
--- a/components/table/Table.js
+++ b/Components/table/index.js
@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
 const Table = ({ children, className }) => {
-    return (
-        <table className={getClasses('pm-simple-table', className)}>{children}</table>
-    );
+    return <table className={getClasses('pm-simple-table', className)}>{children}</table>;
 };
 
 Table.propTypes = {
@@ -18,4 +16,4 @@ Table.defaultProps = {
     children: []
 };
 
-export default Table;
\ No newline at end of file
+export default Table;
diff --git a/components/table/TableRow.js b/Components/table/row.js
similarity index 60%
rename from components/table/TableRow.js
rename to Components/table/row.js
index 49a339073..9cda72586 100644
--- a/components/table/TableRow.js
+++ b/Components/table/row.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import TableCell from './TableCell';
+import TableCell from './cell';
 
 const TableRow = ({ cells, ...rest }) => {
     return (
         <tr {...rest}>
-            {cells.map((cell, index) => <TableCell key={index.toString()}>{cell}</TableCell>)}
+            {cells.map((cell, index) => (
+                <TableCell key={index.toString()}>{cell}</TableCell>
+            ))}
         </tr>
     );
 };
@@ -19,4 +21,4 @@ TableRow.defaultProps = {
     cells: []
 };
 
-export default TableRow;
\ No newline at end of file
+export default TableRow;
diff --git a/components/table/TableRowBusy.js b/Components/table/rowBusy.js
similarity index 100%
rename from components/table/TableRowBusy.js
rename to Components/table/rowBusy.js
diff --git a/components/text/Text.js b/Components/text/index.js
similarity index 92%
rename from components/text/Text.js
rename to Components/text/index.js
index 730a2b32a..a00298e00 100644
--- a/components/text/Text.js
+++ b/Components/text/index.js
@@ -8,4 +8,4 @@ Text.propTypes = {
     className: PropTypes.string
 };
 
-export default Text;
\ No newline at end of file
+export default Text;
diff --git a/components/time/Time.js b/Components/time/index.js
similarity index 94%
rename from components/time/Time.js
rename to Components/time/index.js
index 8c921f4a4..3c8909b5e 100644
--- a/components/time/Time.js
+++ b/Components/time/index.js
@@ -14,4 +14,4 @@ Time.defaultProps = {
     format: 'LL'
 };
 
-export default Time;
\ No newline at end of file
+export default Time;
diff --git a/components/title/SubTitle.js b/Components/title/SubTitle.js
similarity index 89%
rename from components/title/SubTitle.js
rename to Components/title/SubTitle.js
index de0cb6239..6ba5c575e 100644
--- a/components/title/SubTitle.js
+++ b/Components/title/SubTitle.js
@@ -7,4 +7,4 @@ SubTitle.propTypes = {
     children: PropTypes.node.isRequired
 };
 
-export default SubTitle;
\ No newline at end of file
+export default SubTitle;
diff --git a/components/title/Title.js b/Components/title/index.js
similarity index 90%
rename from components/title/Title.js
rename to Components/title/index.js
index 712ce5e94..2defe1f32 100644
--- a/components/title/Title.js
+++ b/Components/title/index.js
@@ -7,4 +7,4 @@ Title.propTypes = {
     children: PropTypes.node.isRequired
 };
 
-export default Title;
\ No newline at end of file
+export default Title;
diff --git a/components/toggle/Toggle.js b/Components/toggle/index.js
similarity index 96%
rename from components/toggle/Toggle.js
rename to Components/toggle/index.js
index b24d13ca4..eb15054e5 100644
--- a/components/toggle/Toggle.js
+++ b/Components/toggle/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { c } from 'ttag';
 
 import Checkbox from '../input/Checkbox';
-import Icon from '../icon/Icon';
+import Icon from '../icon/index';
 
 const label = (key) => {
     const I18N = {
diff --git a/components/toggle/useToggle.js b/Components/toggle/useToggle.js
similarity index 100%
rename from components/toggle/useToggle.js
rename to Components/toggle/useToggle.js
diff --git a/components/tooltip/Tooltip.js b/Components/tooltip/index.js
similarity index 100%
rename from components/tooltip/Tooltip.js
rename to Components/tooltip/index.js
diff --git a/containers/addresses/AddressActions.js b/Containers/addresses/actions.js
similarity index 98%
rename from containers/addresses/AddressActions.js
rename to Containers/addresses/actions.js
index 73e95ff4a..f267a5d01 100644
--- a/containers/addresses/AddressActions.js
+++ b/Containers/addresses/actions.js
@@ -13,7 +13,7 @@ import {
 import { ADDRESS_TYPE, ADDRESS_STATUS, MEMBER_PRIVATE } from 'proton-shared/lib/constants';
 import { deleteAddress, enableAddress, disableAddress } from 'proton-shared/lib/api/addresses';
 
-import EditAddressModal from './EditAddressModal';
+import EditAddressModal from './modal/edit';
 
 const { TYPE_ORIGINAL, TYPE_CUSTOM_DOMAIN, TYPE_PREMIUM } = ADDRESS_TYPE;
 const { STATUS_DISABLED, STATUS_ENABLED } = ADDRESS_STATUS;
diff --git a/containers/addresses/DomainsSelect.js b/Containers/addresses/domainsSelect.js
similarity index 100%
rename from containers/addresses/DomainsSelect.js
rename to Containers/addresses/domainsSelect.js
diff --git a/containers/addresses/EditAddressModal.js b/Containers/addresses/modal/edit.js
similarity index 100%
rename from containers/addresses/EditAddressModal.js
rename to Containers/addresses/modal/edit.js
diff --git a/containers/addresses/AddressModal.js b/Containers/addresses/modal/index.js
similarity index 97%
rename from containers/addresses/AddressModal.js
rename to Containers/addresses/modal/index.js
index e95f1b56e..ac363b7a7 100644
--- a/containers/addresses/AddressModal.js
+++ b/Containers/addresses/modal/index.js
@@ -19,8 +19,8 @@ import {
     useEventManager
 } from 'react-components';
 
-import useAddressModal from './useAddressModal';
-import DomainsSelect from './DomainsSelect';
+import useAddressModal from './use';
+import DomainsSelect from '../domainsSelect';
 
 const AddressModal = ({ show, onClose, member }) => {
     const { call } = useEventManager();
diff --git a/containers/addresses/useAddressModal.js b/Containers/addresses/modal/use.js
similarity index 100%
rename from containers/addresses/useAddressModal.js
rename to Containers/addresses/modal/use.js
diff --git a/containers/addresses/AddressesSection.js b/Containers/addresses/section.js
similarity index 95%
rename from containers/addresses/AddressesSection.js
rename to Containers/addresses/section.js
index eb4aab7bf..240744b4e 100644
--- a/containers/addresses/AddressesSection.js
+++ b/Containers/addresses/section.js
@@ -6,9 +6,9 @@ import { SubTitle, Table, TableHeader, TableRow, TableBody, useApiWithoutResult
 import { queryAddresses } from 'proton-shared/lib/api/members';
 import { fetchMembers } from 'proton-shared/lib/state/members/actions';
 
-import AddressActions from './AddressActions';
-import AddressStatus from './AddressStatus';
-import AddressesToolbar from './AddressesToolbar';
+import AddressActions from './actions';
+import AddressStatus from './status';
+import AddressesToolbar from './toolbar';
 
 const AddressesSection = ({ addresses, fetchMembers, members }) => {
     const { request, loading } = useApiWithoutResult(queryAddresses);
diff --git a/containers/addresses/AddressStatus.js b/Containers/addresses/status.js
similarity index 100%
rename from containers/addresses/AddressStatus.js
rename to Containers/addresses/status.js
diff --git a/containers/addresses/AddressesToolbar.js b/Containers/addresses/toolbar.js
similarity index 97%
rename from containers/addresses/AddressesToolbar.js
rename to Containers/addresses/toolbar.js
index a80df9a01..43a38480c 100644
--- a/containers/addresses/AddressesToolbar.js
+++ b/Containers/addresses/toolbar.js
@@ -3,7 +3,7 @@ import { c } from 'ttag';
 import PropTypes from 'prop-types';
 import { Row, Label, Select, PrimaryButton, useModal } from 'react-components';
 
-import AddressModal from './AddressModal';
+import AddressModal from './modal/index';
 
 const AddressesToolbar = ({ onChangeMember, member, members, loading }) => {
     const { isOpen, open, close } = useModal();
diff --git a/containers/appearance/ThemesSection.js b/Containers/appearance/ThemesSection.js
similarity index 100%
rename from containers/appearance/ThemesSection.js
rename to Containers/appearance/ThemesSection.js
diff --git a/containers/domains/AddressCatchAll.js b/Containers/domain/AddressCatchAll.js
similarity index 100%
rename from containers/domains/AddressCatchAll.js
rename to Containers/domain/AddressCatchAll.js
diff --git a/containers/domains/AddressStatus.js b/Containers/domain/AddressStatus.js
similarity index 100%
rename from containers/domains/AddressStatus.js
rename to Containers/domain/AddressStatus.js
diff --git a/containers/domains/AddressesSection.js b/Containers/domain/AddressesSection.js
similarity index 100%
rename from containers/domains/AddressesSection.js
rename to Containers/domain/AddressesSection.js
diff --git a/containers/domains/AddressesTable.js b/Containers/domain/AddressesTable.js
similarity index 94%
rename from containers/domains/AddressesTable.js
rename to Containers/domain/AddressesTable.js
index 7d82a7b10..6b9774df7 100644
--- a/containers/domains/AddressesTable.js
+++ b/Containers/domain/AddressesTable.js
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Table, TableHeader, TableBody, TableRow, Info } from 'react-components';
 
-import AddressStatus from './AddressStatus';
-import AddressCatchAll from './AddressCatchAll';
+import AddressStatus from '../domain/AddressStatus';
+import AddressCatchAll from '../domain/AddressCatchAll';
 
 const AddressesTable = ({ domain, members }) => {
     const getMemberName = (memberID) => {
diff --git a/containers/domains/DKIMSection.js b/Containers/domain/DKIMSection.js
similarity index 100%
rename from containers/domains/DKIMSection.js
rename to Containers/domain/DKIMSection.js
diff --git a/containers/domains/DMARCSection.js b/Containers/domain/DMARCSection.js
similarity index 100%
rename from containers/domains/DMARCSection.js
rename to Containers/domain/DMARCSection.js
diff --git a/containers/domains/MXSection.js b/Containers/domain/MXSection.js
similarity index 100%
rename from containers/domains/MXSection.js
rename to Containers/domain/MXSection.js
diff --git a/containers/domains/SPFSection.js b/Containers/domain/SPFSection.js
similarity index 100%
rename from containers/domains/SPFSection.js
rename to Containers/domain/SPFSection.js
diff --git a/containers/domains/DomainActions.js b/Containers/domain/actions.js
similarity index 95%
rename from containers/domains/DomainActions.js
rename to Containers/domain/actions.js
index 064d24173..f8d06167e 100644
--- a/containers/domains/DomainActions.js
+++ b/Containers/domain/actions.js
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { Alert, SmallButton, ConfirmModal, useModal, useApiWithoutResult, useNotifications } from 'react-components';
 import { deleteDomain } from 'proton-shared/lib/api/domains';
 
-import DomainModal from './DomainModal';
-import CatchAllModal from './CatchAllModal';
+import DomainModal from './modal';
+import CatchAllModal from './modal/catchAll';
 
 const DomainActions = ({ domain }) => {
     const { request, loading } = useApiWithoutResult(deleteDomain);
diff --git a/containers/domains/CatchAllModal.js b/Containers/domain/modal/catchAll.js
similarity index 94%
rename from containers/domains/CatchAllModal.js
rename to Containers/domain/modal/catchAll.js
index cc6bad44e..f7f26d95f 100644
--- a/containers/domains/CatchAllModal.js
+++ b/Containers/domain/modal/catchAll.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { c } from 'ttag';
 import { Modal, ContentModal, FooterModal, ResetButton } from 'react-components';
 
-import AddressesTable from './AddressesTable';
+import AddressesTable from '../AddressesTable';
 
 const CatchAllModal = ({ domain, show, onClose }) => {
     return (
diff --git a/containers/domains/DomainModal.js b/Containers/domain/modal/index.js
similarity index 93%
rename from containers/domains/DomainModal.js
rename to Containers/domain/modal/index.js
index b87c646c2..36665e3f1 100644
--- a/containers/domains/DomainModal.js
+++ b/Containers/domain/modal/index.js
@@ -15,13 +15,13 @@ import {
 import { addDomain, getDomain } from 'proton-shared/lib/api/domains';
 import { VERIFY_STATE } from 'proton-shared/lib/constants';
 
-import DomainSection from './DomainSection';
-import VerifySection from './VerifySection';
-import AddressesSection from './AddressesSection';
-import SPFSection from './SPFSection';
-import DKIMSection from './DKIMSection';
-import MXSection from './MXSection';
-import DMARCSection from './DMARCSection';
+import DomainSection from '../section';
+import VerifySection from '../verifySection';
+import AddressesSection from '../AddressesSection';
+import SPFSection from '../SPFSection';
+import DKIMSection from '../DKIMSection';
+import MXSection from '../MXSection';
+import DMARCSection from '../DMARCSection';
 
 const { VERIFY_STATE_DEFAULT, VERIFY_STATE_EXIST, VERIFY_STATE_GOOD } = VERIFY_STATE;
 const DOMAIN_STEP = 0;
diff --git a/containers/domains/DomainName.js b/Containers/domain/name.js
similarity index 100%
rename from containers/domains/DomainName.js
rename to Containers/domain/name.js
diff --git a/containers/domains/DomainSection.js b/Containers/domain/section.js
similarity index 100%
rename from containers/domains/DomainSection.js
rename to Containers/domain/section.js
diff --git a/containers/domains/DomainStatus.js b/Containers/domain/status.js
similarity index 100%
rename from containers/domains/DomainStatus.js
rename to Containers/domain/status.js
diff --git a/containers/domains/VerifySection.js b/Containers/domain/verifySection.js
similarity index 100%
rename from containers/domains/VerifySection.js
rename to Containers/domain/verifySection.js
diff --git a/containers/domains/DomainsSection.js b/Containers/domains/section.js
similarity index 95%
rename from containers/domains/DomainsSection.js
rename to Containers/domains/section.js
index faecf6a42..962d38999 100644
--- a/containers/domains/DomainsSection.js
+++ b/Containers/domains/section.js
@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import { SubTitle, Alert, PrimaryButton, Button, Block, useModal } from 'react-components';
 import { fetchDomains } from 'proton-shared/lib/state/domains/actions';
 
-import DomainModal from './DomainModal';
-import DomainsTable from './DomainsTable';
+import DomainModal from '../domain/modal';
+import DomainsTable from './table';
 
 const DomainsSection = ({ organization, domains, fetchDomains }) => {
     const { isOpen, open, close } = useModal();
diff --git a/containers/domains/DomainsTable.js b/Containers/domains/table.js
similarity index 92%
rename from containers/domains/DomainsTable.js
rename to Containers/domains/table.js
index 3bef796ee..3d360ec82 100644
--- a/containers/domains/DomainsTable.js
+++ b/Containers/domains/table.js
@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import { Table, TableHeader, TableBody, TableRow, Alert } from 'react-components';
 import { fetchMembers } from 'proton-shared/lib/state/members/actions';
 
-import DomainStatus from './DomainStatus';
-import DomainActions from './DomainActions';
-import DomainName from './DomainName';
+import DomainStatus from '../domain/status';
+import DomainActions from '../domain/actions';
+import DomainName from '../domain/name';
 
 const DomainsTable = ({ domains, loading, fetchMembers }) => {
     useEffect(() => {
diff --git a/containers/invoices/InvoiceActions.js b/Containers/invoices/actions.js
similarity index 85%
rename from containers/invoices/InvoiceActions.js
rename to Containers/invoices/actions.js
index c05712200..74283b803 100644
--- a/containers/invoices/InvoiceActions.js
+++ b/Containers/invoices/actions.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { INVOICE_STATE } from 'proton-shared/lib/constants';
 
-import DownloadInvoiceButton from './DownloadInvoiceButton';
-import PayButton from './PayButton';
+import DownloadInvoiceButton from './downloadButton';
+import PayButton from './payButton';
 
 const InvoiceActions = ({ invoice, fetchInvoices }) => {
     return (
diff --git a/containers/invoices/InvoiceAmount.js b/Containers/invoices/amount.js
similarity index 100%
rename from containers/invoices/InvoiceAmount.js
rename to Containers/invoices/amount.js
diff --git a/containers/invoices/DownloadInvoiceButton.js b/Containers/invoices/downloadButton.js
similarity index 100%
rename from containers/invoices/DownloadInvoiceButton.js
rename to Containers/invoices/downloadButton.js
diff --git a/containers/invoices/PayInvoiceModal.js b/Containers/invoices/modal/pay.js
similarity index 96%
rename from containers/invoices/PayInvoiceModal.js
rename to Containers/invoices/modal/pay.js
index 0afee1db1..a1148fe03 100644
--- a/containers/invoices/PayInvoiceModal.js
+++ b/Containers/invoices/modal/pay.js
@@ -15,8 +15,8 @@ import {
 } from 'react-components';
 import { checkInvoice, payInvoice } from 'proton-shared/lib/api/payments';
 
-import Payment from '../payments/Payment';
-import usePayment from '../payments/usePayment';
+import Payment from '../../payments';
+import usePayment from '../../payments/hooks/usePayment';
 
 const PayInvoiceModal = ({ show, invoice, onClose, fetchInvoices }) => {
     const { request, loading: loadingPay } = useApiWithoutResult(payInvoice);
diff --git a/containers/invoices/InvoiceTextModal.js b/Containers/invoices/modal/text.js
similarity index 100%
rename from containers/invoices/InvoiceTextModal.js
rename to Containers/invoices/modal/text.js
diff --git a/containers/invoices/PayButton.js b/Containers/invoices/payButton.js
similarity index 96%
rename from containers/invoices/PayButton.js
rename to Containers/invoices/payButton.js
index 906f23a80..79cda46cf 100644
--- a/containers/invoices/PayButton.js
+++ b/Containers/invoices/payButton.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { SmallButton, useApiWithoutResult, useModal, useNotifications } from 'react-components';
 import { getPaymentMethodStatus } from 'proton-shared/lib/api/payments';
 
-import PayInvoiceModal from './PayInvoiceModal';
+import PayInvoiceModal from './modal/pay';
 
 const PayButton = ({ invoice, fetchInvoices }) => {
     const { createNotification } = useNotifications();
diff --git a/containers/invoices/InvoicesSection.js b/Containers/invoices/section.js
similarity index 94%
rename from containers/invoices/InvoicesSection.js
rename to Containers/invoices/section.js
index 06bc93bf1..dc865d262 100644
--- a/containers/invoices/InvoicesSection.js
+++ b/Containers/invoices/section.js
@@ -20,11 +20,11 @@ import { queryInvoices } from 'proton-shared/lib/api/payments';
 import { ELEMENTS_PER_PAGE, INVOICE_OWNER, INVOICE_STATE } from 'proton-shared/lib/constants';
 
 import useApiResult from '../../hooks/useApiResult';
-import InvoiceAmount from './InvoiceAmount';
-import InvoiceType from './InvoiceType';
-import InvoiceState from './InvoiceState';
-import InvoiceActions from './InvoiceActions';
-import InvoiceTextModal from './InvoiceTextModal';
+import InvoiceAmount from './amount';
+import InvoiceType from './type';
+import InvoiceState from './state';
+import InvoiceActions from './actions';
+import InvoiceTextModal from './modal/text';
 
 const InvoicesSection = () => {
     const { ORGANIZATION, USER } = INVOICE_OWNER;
diff --git a/containers/invoices/InvoiceState.js b/Containers/invoices/state.js
similarity index 100%
rename from containers/invoices/InvoiceState.js
rename to Containers/invoices/state.js
diff --git a/containers/invoices/InvoiceType.js b/Containers/invoices/type.js
similarity index 96%
rename from containers/invoices/InvoiceType.js
rename to Containers/invoices/type.js
index 081b32114..c215f51de 100644
--- a/containers/invoices/InvoiceType.js
+++ b/Containers/invoices/type.js
@@ -20,4 +20,4 @@ InvoiceType.propTypes = {
     invoice: PropTypes.object.isRequired
 };
 
-export default InvoiceType;
\ No newline at end of file
+export default InvoiceType;
diff --git a/containers/keys/AddressKeysSectionModel.js b/Containers/keys/AddressKeysSectionModel.js
similarity index 98%
rename from containers/keys/AddressKeysSectionModel.js
rename to Containers/keys/AddressKeysSectionModel.js
index fe1ab0c02..a7d88aa9a 100644
--- a/containers/keys/AddressKeysSectionModel.js
+++ b/Containers/keys/AddressKeysSectionModel.js
@@ -1,7 +1,7 @@
 import { MAIN_USER_KEY } from 'proton-shared/lib/constants';
 import { describe } from 'proton-shared/lib/state/keys/keysAlgorithm';
 
-import { STATUSES } from './KeysStatus';
+import { STATUSES } from './status';
 
 const convertKey = (address) => ({ decryptedPrivateKey, Key, info }, i) => {
     const getStatus = () => {
diff --git a/containers/keys/KeysActions.js b/Containers/keys/actions.js
similarity index 100%
rename from containers/keys/KeysActions.js
rename to Containers/keys/actions.js
diff --git a/containers/keys/AddressKeysHeader.js b/Containers/keys/addressHeader.js
similarity index 100%
rename from containers/keys/AddressKeysHeader.js
rename to Containers/keys/addressHeader.js
diff --git a/containers/keys/AddressKeysRow.js b/Containers/keys/addressRow.js
similarity index 100%
rename from containers/keys/AddressKeysRow.js
rename to Containers/keys/addressRow.js
diff --git a/containers/keys/AddressKeysSection.js b/Containers/keys/addressSection.js
similarity index 94%
rename from containers/keys/AddressKeysSection.js
rename to Containers/keys/addressSection.js
index c1a0a122d..dc88c3469 100644
--- a/containers/keys/AddressKeysSection.js
+++ b/Containers/keys/addressSection.js
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import AddressKeysHeader from './AddressKeysHeader';
-import ContactKeysHeader from './ContactKeysHeader';
-import AddressKeysTable from './AddressKeysTable';
+import AddressKeysHeader from './addressHeader';
+import ContactKeysHeader from './contactHeader';
+import AddressKeysTable from './addressTable';
 import { getAddressesKeys, getUserAddressKeys } from './AddressKeysSectionModel';
 
 const AddressKeysSection = ({ userModel, addressesModel, keysModel }) => {
diff --git a/containers/keys/AddressKeysTable.js b/Containers/keys/addressTable.js
similarity index 95%
rename from containers/keys/AddressKeysTable.js
rename to Containers/keys/addressTable.js
index 95d0dbee5..b9b3bcc5a 100644
--- a/containers/keys/AddressKeysTable.js
+++ b/Containers/keys/addressTable.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { c } from 'ttag';
 import { Table, TableHeader, TableBody } from 'react-components';
 
-import KeysTable from './KeysTable';
-import AddressKeysRow from './AddressKeysRow';
+import KeysTable from './table';
+import AddressKeysRow from './addressRow';
 
 const AddressKeysTable = ({
     addressKeys,
diff --git a/containers/keys/ContactKeysHeader.js b/Containers/keys/contactHeader.js
similarity index 100%
rename from containers/keys/ContactKeysHeader.js
rename to Containers/keys/contactHeader.js
diff --git a/containers/keys/KeysRow.js b/Containers/keys/row.js
similarity index 100%
rename from containers/keys/KeysRow.js
rename to Containers/keys/row.js
diff --git a/containers/keys/KeysStatus.js b/Containers/keys/status.js
similarity index 100%
rename from containers/keys/KeysStatus.js
rename to Containers/keys/status.js
diff --git a/containers/keys/KeysTable.js b/Containers/keys/table.js
similarity index 94%
rename from containers/keys/KeysTable.js
rename to Containers/keys/table.js
index 7d82bdd5b..06b90a40d 100644
--- a/containers/keys/KeysTable.js
+++ b/Containers/keys/table.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { c } from 'ttag';
 import { Table, TableHeader, TableBody } from 'react-components';
 
-import KeysRow from './KeysRow';
-import KeysActions from './KeysActions';
-import KeysStatus from './KeysStatus';
+import KeysRow from './row';
+import KeysActions from './actions';
+import KeysStatus from './status';
 
 const KeysTable = ({
     email,
diff --git a/containers/layouts/ComposerModeRadios.js b/Containers/layouts/ComposerModeRadios.js
similarity index 100%
rename from containers/layouts/ComposerModeRadios.js
rename to Containers/layouts/ComposerModeRadios.js
diff --git a/containers/layouts/DraftTypeSelect.js b/Containers/layouts/DraftTypeSelect.js
similarity index 100%
rename from containers/layouts/DraftTypeSelect.js
rename to Containers/layouts/DraftTypeSelect.js
diff --git a/containers/layouts/LayoutsSection.js b/Containers/layouts/LayoutsSection.js
similarity index 100%
rename from containers/layouts/LayoutsSection.js
rename to Containers/layouts/LayoutsSection.js
diff --git a/containers/layouts/ShowMovedSelect.js b/Containers/layouts/ShowMovedSelect.js
similarity index 100%
rename from containers/layouts/ShowMovedSelect.js
rename to Containers/layouts/ShowMovedSelect.js
diff --git a/containers/layouts/TextDirectionSelect.js b/Containers/layouts/TextDirectionSelect.js
similarity index 100%
rename from containers/layouts/TextDirectionSelect.js
rename to Containers/layouts/TextDirectionSelect.js
diff --git a/containers/layouts/ViewLayoutRadios.js b/Containers/layouts/ViewLayoutRadios.js
similarity index 100%
rename from containers/layouts/ViewLayoutRadios.js
rename to Containers/layouts/ViewLayoutRadios.js
diff --git a/containers/layouts/ViewModeRadios.js b/Containers/layouts/ViewModeRadios.js
similarity index 100%
rename from containers/layouts/ViewModeRadios.js
rename to Containers/layouts/ViewModeRadios.js
diff --git a/containers/login/TOTPForm.js b/Containers/login/TOTPForm.js
similarity index 100%
rename from containers/login/TOTPForm.js
rename to Containers/login/TOTPForm.js
diff --git a/containers/login/UnlockForm.js b/Containers/login/UnlockForm.js
similarity index 100%
rename from containers/login/UnlockForm.js
rename to Containers/login/UnlockForm.js
diff --git a/containers/login/LoginContainer.js b/Containers/login/container.js
similarity index 97%
rename from containers/login/LoginContainer.js
rename to Containers/login/container.js
index bc16679a0..477ea02d1 100644
--- a/containers/login/LoginContainer.js
+++ b/Containers/login/container.js
@@ -4,7 +4,7 @@ import { c } from 'ttag';
 import { SubTitle, useNotifications } from 'react-components';
 import { FORM } from 'proton-shared/lib/authentication/loginReducer';
 
-import LoginForm from './LoginForm';
+import LoginForm from './form';
 import TOTPForm from './TOTPForm';
 import UnlockForm from './UnlockForm';
 import useLogin from './useLogin';
diff --git a/containers/login/LoginForm.js b/Containers/login/form.js
similarity index 100%
rename from containers/login/LoginForm.js
rename to Containers/login/form.js
diff --git a/containers/login/useLogin.js b/Containers/login/useLogin.js
similarity index 100%
rename from containers/login/useLogin.js
rename to Containers/login/useLogin.js
diff --git a/containers/logs/LogsSection.js b/Containers/logs/section.js
similarity index 98%
rename from containers/logs/LogsSection.js
rename to Containers/logs/section.js
index 5391afce0..88a79387e 100644
--- a/containers/logs/LogsSection.js
+++ b/Containers/logs/section.js
@@ -19,8 +19,8 @@ import downloadFile from 'proton-shared/lib/helpers/downloadFile';
 import { ELEMENTS_PER_PAGE, LOGS_STATE } from 'proton-shared/lib/constants';
 import useApi from '../../hooks/useApi';
 
-import LogsTable from './LogsTable';
-import WipeLogsButton from './WipeLogsButton';
+import LogsTable from './table';
+import WipeLogsButton from './wipeButton';
 
 const EVENTS = {
     0: c('Log event').t`Login password failure`,
diff --git a/containers/logs/LogsTable.js b/Containers/logs/table.js
similarity index 100%
rename from containers/logs/LogsTable.js
rename to Containers/logs/table.js
diff --git a/containers/logs/WipeLogsButton.js b/Containers/logs/wipeButton.js
similarity index 100%
rename from containers/logs/WipeLogsButton.js
rename to Containers/logs/wipeButton.js
diff --git a/containers/members/MemberVPNSelector.js b/Containers/members/VPNSelector.js
similarity index 100%
rename from containers/members/MemberVPNSelector.js
rename to Containers/members/VPNSelector.js
diff --git a/containers/members/MemberActions.js b/Containers/members/actions.js
similarity index 98%
rename from containers/members/MemberActions.js
rename to Containers/members/actions.js
index 8a432d3f1..3bbe4f42f 100644
--- a/containers/members/MemberActions.js
+++ b/Containers/members/actions.js
@@ -14,7 +14,7 @@ import { c } from 'ttag';
 import { removeMember, updateRole, privatizeMember } from 'proton-shared/lib/api/members';
 import { MEMBER_PRIVATE, MEMBER_ROLE } from 'proton-shared/lib/constants';
 
-import EditMemberModal from './EditMemberModal';
+import EditMemberModal from './modal/edit';
 
 const MemberActions = ({ member, organization }) => {
     const { call } = useEventManager();
diff --git a/containers/members/AddMemberButton.js b/Containers/members/addButton.js
similarity index 98%
rename from containers/members/AddMemberButton.js
rename to Containers/members/addButton.js
index 1ae393fa6..f39b56d4b 100644
--- a/containers/members/AddMemberButton.js
+++ b/Containers/members/addButton.js
@@ -6,7 +6,7 @@ import { PrimaryButton, useModal, useNotifications } from 'react-components';
 import { fetchDomains } from 'proton-shared/lib/state/domains/actions';
 import { DOMAIN_STATE } from 'proton-shared/lib/constants';
 
-import MemberModal from './MemberModal';
+import MemberModal from './modal';
 
 const { DOMAIN_STATE_ACTIVE } = DOMAIN_STATE;
 
diff --git a/containers/members/MemberAddresses.js b/Containers/members/addresses.js
similarity index 95%
rename from containers/members/MemberAddresses.js
rename to Containers/members/addresses.js
index 72b7b0717..0e5016ec9 100644
--- a/containers/members/MemberAddresses.js
+++ b/Containers/members/addresses.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { ngettext, msgid, c } from 'ttag';
 import { Dropdown, DropdownMenu, SmallButton, useModal } from 'react-components';
 
-import AddressModal from '../addresses/AddressModal';
+import AddressModal from '../addresses/modal';
 
 const MemberAddresses = ({ member }) => {
     const title = member.addresses.map(({ Email }) => Email).join(', ');
diff --git a/containers/members/EditMemberModal.js b/Containers/members/modal/edit.js
similarity index 96%
rename from containers/members/EditMemberModal.js
rename to Containers/members/modal/edit.js
index ab7552d2c..39fc1ef13 100644
--- a/containers/members/EditMemberModal.js
+++ b/Containers/members/modal/edit.js
@@ -15,11 +15,11 @@ import {
     useNotifications,
     useEventManager
 } from 'react-components';
-
-import MemberStorageSelector from './MemberStorageSelector';
-import MemberVPNSelector from './MemberVPNSelector';
 import { updateName, updateQuota, updateVPN } from 'proton-shared/lib/api/members';
 
+import MemberStorageSelector from '../storageSelector';
+import MemberVPNSelector from '../VPNSelector';
+
 const EditMemberModal = ({ show, onClose, member, organization }) => {
     const { call } = useEventManager();
     const [model, updateModel] = useState({ name: member.Name, storage: member.MaxSpace, vpn: member.MaxVPN });
diff --git a/containers/members/MemberModal.js b/Containers/members/modal/index.js
similarity index 96%
rename from containers/members/MemberModal.js
rename to Containers/members/modal/index.js
index c96b32d87..1485a85f1 100644
--- a/containers/members/MemberModal.js
+++ b/Containers/members/modal/index.js
@@ -18,9 +18,9 @@ import {
     useEventManager
 } from 'react-components';
 
-import MemberStorageSelector from './MemberStorageSelector';
-import MemberVPNSelector from './MemberVPNSelector';
-import useMemberModal from './useMemberModal';
+import MemberStorageSelector from '../storageSelector';
+import MemberVPNSelector from '../VPNSelector';
+import useMemberModal from '../useMemberModal';
 
 const MemberModal = ({ show, onClose, organization, domains }) => {
     const { createNotification } = useNotifications();
diff --git a/containers/members/MemberOptions.js b/Containers/members/options.js
similarity index 100%
rename from containers/members/MemberOptions.js
rename to Containers/members/options.js
diff --git a/containers/members/MemberPrivate.js b/Containers/members/private.js
similarity index 100%
rename from containers/members/MemberPrivate.js
rename to Containers/members/private.js
diff --git a/containers/members/MemberRole.js b/Containers/members/role.js
similarity index 100%
rename from containers/members/MemberRole.js
rename to Containers/members/role.js
diff --git a/containers/members/MembersSection.js b/Containers/members/section.js
similarity index 93%
rename from containers/members/MembersSection.js
rename to Containers/members/section.js
index 8890a6e2a..cd72280c1 100644
--- a/containers/members/MembersSection.js
+++ b/Containers/members/section.js
@@ -7,12 +7,12 @@ import { Link } from 'react-router-dom';
 import { fetchMembers } from 'proton-shared/lib/state/members/actions';
 import { normalize } from 'proton-shared/lib/helpers/string';
 
-import MemberActions from './MemberActions';
-import MemberAddresses from './MemberAddresses';
-import AddMemberButton from './AddMemberButton';
-import MemberOptions from './MemberOptions';
-import MemberRole from './MemberRole';
-import MemberPrivate from './MemberPrivate';
+import MemberActions from './actions';
+import MemberAddresses from './addresses';
+import AddMemberButton from './addButton';
+import MemberOptions from './options';
+import MemberRole from './role';
+import MemberPrivate from './private';
 
 const MembersSection = ({ organization, members, fetchMembers }) => {
     const [keywords, setKeywords] = useState('');
diff --git a/containers/members/MemberStorageSelector.js b/Containers/members/storageSelector.js
similarity index 100%
rename from containers/members/MemberStorageSelector.js
rename to Containers/members/storageSelector.js
diff --git a/containers/members/useMemberModal.js b/Containers/members/useMemberModal.js
similarity index 100%
rename from containers/members/useMemberModal.js
rename to Containers/members/useMemberModal.js
diff --git a/containers/messages/EmbeddedToggle.js b/Containers/messages/EmbeddedToggle.js
similarity index 100%
rename from containers/messages/EmbeddedToggle.js
rename to Containers/messages/EmbeddedToggle.js
diff --git a/containers/messages/RemoteToggle.js b/Containers/messages/RemoteToggle.js
similarity index 100%
rename from containers/messages/RemoteToggle.js
rename to Containers/messages/RemoteToggle.js
diff --git a/containers/messages/MessageContentSection.js b/Containers/messages/contentSection.js
similarity index 100%
rename from containers/messages/MessageContentSection.js
rename to Containers/messages/contentSection.js
diff --git a/containers/notification/DailyNotificationsToggle.js b/Containers/notification/DailyToggle.js
similarity index 100%
rename from containers/notification/DailyNotificationsToggle.js
rename to Containers/notification/DailyToggle.js
diff --git a/containers/notification/DesktopNotificationPanel.js b/Containers/notification/DesktopPanel.js
similarity index 100%
rename from containers/notification/DesktopNotificationPanel.js
rename to Containers/notification/DesktopPanel.js
diff --git a/containers/notification/NewsCheckboxes.js b/Containers/notification/NewsCheckboxes.js
similarity index 100%
rename from containers/notification/NewsCheckboxes.js
rename to Containers/notification/NewsCheckboxes.js
diff --git a/containers/notification/NotificationSection.js b/Containers/notification/section.js
similarity index 87%
rename from containers/notification/NotificationSection.js
rename to Containers/notification/section.js
index 4ac3d3ec5..2222088b1 100644
--- a/containers/notification/NotificationSection.js
+++ b/Containers/notification/section.js
@@ -2,11 +2,11 @@ import React from 'react';
 import { c } from 'ttag';
 import { SubTitle, Label, Row, Info } from 'react-components';
 
-import PasswordResetToggle from './PasswordResetToggle';
-import DailyNotificationsToggle from './DailyNotificationsToggle';
-import DesktopNotificationPanel from './DesktopNotificationPanel';
+import PasswordResetToggle from '../password/resetToggle';
+import DailyNotificationsToggle from './DailyToggle';
+import DesktopNotificationPanel from './DesktopPanel';
 import NewsCheckboxes from './NewsCheckboxes';
-import RecoveryEmailButton from './RecoveryEmailButton';
+import RecoveryEmailButton from '../password/RecoveryEmailButton';
 
 const NotificationSection = () => {
     return (
diff --git a/containers/notifications/Container.js b/Containers/notifications/Container.js
similarity index 100%
rename from containers/notifications/Container.js
rename to Containers/notifications/Container.js
diff --git a/containers/notifications/Provider.js b/Containers/notifications/Provider.js
similarity index 100%
rename from containers/notifications/Provider.js
rename to Containers/notifications/Provider.js
diff --git a/containers/notifications/actions.js b/Containers/notifications/actions.js
similarity index 100%
rename from containers/notifications/actions.js
rename to Containers/notifications/actions.js
diff --git a/containers/notifications/manager.js b/Containers/notifications/manager.js
similarity index 100%
rename from containers/notifications/manager.js
rename to Containers/notifications/manager.js
diff --git a/containers/notifications/reducer.js b/Containers/notifications/reducer.js
similarity index 100%
rename from containers/notifications/reducer.js
rename to Containers/notifications/reducer.js
diff --git a/containers/organization/OrganizationSection.js b/Containers/organization/section.js
similarity index 100%
rename from containers/organization/OrganizationSection.js
rename to Containers/organization/section.js
diff --git a/containers/notification/RecoveryEmailButton.js b/Containers/password/RecoveryEmailButton.js
similarity index 100%
rename from containers/notification/RecoveryEmailButton.js
rename to Containers/password/RecoveryEmailButton.js
diff --git a/containers/password/AskPasswordModal.js b/Containers/password/askModal.js
similarity index 100%
rename from containers/password/AskPasswordModal.js
rename to Containers/password/askModal.js
diff --git a/containers/notification/PasswordResetToggle.js b/Containers/password/resetToggle.js
similarity index 100%
rename from containers/notification/PasswordResetToggle.js
rename to Containers/password/resetToggle.js
diff --git a/containers/paymentMethods/PaymentMethodActions.js b/Containers/paymentMethods/actions.js
similarity index 100%
rename from containers/paymentMethods/PaymentMethodActions.js
rename to Containers/paymentMethods/actions.js
diff --git a/containers/paymentMethods/PaymentMethodDetails.js b/Containers/paymentMethods/details.js
similarity index 100%
rename from containers/paymentMethods/PaymentMethodDetails.js
rename to Containers/paymentMethods/details.js
diff --git a/containers/paymentMethods/PaymentMethodsSection.js b/Containers/paymentMethods/section.js
similarity index 90%
rename from containers/paymentMethods/PaymentMethodsSection.js
rename to Containers/paymentMethods/section.js
index b3e54664a..9dcaad444 100644
--- a/containers/paymentMethods/PaymentMethodsSection.js
+++ b/Containers/paymentMethods/section.js
@@ -3,8 +3,8 @@ import { c } from 'ttag';
 import { SubTitle, PrimaryButton, Alert, Block, useApiResult, useModal } from 'react-components';
 import { queryPaymentMethods } from 'proton-shared/lib/api/payments';
 
-import EditCardModal from '../payments/EditCardModal';
-import PaymentMethodsTable from './PaymentMethodsTable';
+import EditCardModal from '../payments/modal/editCard';
+import PaymentMethodsTable from './table';
 
 const PaymentMethodsSection = () => {
     const { isOpen: showCardModal, open: openCardModal, close: closeCardModal } = useModal();
diff --git a/containers/paymentMethods/PaymentMethodsSelect.js b/Containers/paymentMethods/select.js
similarity index 100%
rename from containers/paymentMethods/PaymentMethodsSelect.js
rename to Containers/paymentMethods/select.js
diff --git a/containers/paymentMethods/PaymentMethodState.js b/Containers/paymentMethods/state.js
similarity index 100%
rename from containers/paymentMethods/PaymentMethodState.js
rename to Containers/paymentMethods/state.js
diff --git a/containers/paymentMethods/PaymentMethodsTable.js b/Containers/paymentMethods/table.js
similarity index 94%
rename from containers/paymentMethods/PaymentMethodsTable.js
rename to Containers/paymentMethods/table.js
index a0f682cdc..e47b68073 100644
--- a/containers/paymentMethods/PaymentMethodsTable.js
+++ b/Containers/paymentMethods/table.js
@@ -3,8 +3,8 @@ import { c } from 'ttag';
 import { Table, TableHeader, TableBody, TableRow, Alert } from 'react-components';
 import PropTypes from 'prop-types';
 
-import PaymentMethodActions from './PaymentMethodActions';
-import PaymentMethodState from './PaymentMethodState';
+import PaymentMethodActions from './actions';
+import PaymentMethodState from './state';
 
 const PaymentMethodsTable = ({ methods, loading, fetchMethods }) => {
     if (!loading && !methods.length) {
diff --git a/containers/paymentMethods/usePaymentMethodsSelect.js b/Containers/paymentMethods/usePaymentMethodsSelect.js
similarity index 100%
rename from containers/paymentMethods/usePaymentMethodsSelect.js
rename to Containers/paymentMethods/usePaymentMethodsSelect.js
diff --git a/containers/payments/AmountButton.js b/Containers/payments/AmountButton.js
similarity index 100%
rename from containers/payments/AmountButton.js
rename to Containers/payments/AmountButton.js
diff --git a/containers/payments/Bitcoin.js b/Containers/payments/Bitcoin.js
similarity index 100%
rename from containers/payments/Bitcoin.js
rename to Containers/payments/Bitcoin.js
diff --git a/containers/payments/BitcoinDetails.js b/Containers/payments/BitcoinDetails.js
similarity index 100%
rename from containers/payments/BitcoinDetails.js
rename to Containers/payments/BitcoinDetails.js
diff --git a/containers/payments/BitcoinQRCode.js b/Containers/payments/BitcoinQRCode.js
similarity index 100%
rename from containers/payments/BitcoinQRCode.js
rename to Containers/payments/BitcoinQRCode.js
diff --git a/containers/payments/Card.js b/Containers/payments/Card.js
similarity index 100%
rename from containers/payments/Card.js
rename to Containers/payments/Card.js
diff --git a/containers/payments/Cash.js b/Containers/payments/Cash.js
similarity index 100%
rename from containers/payments/Cash.js
rename to Containers/payments/Cash.js
diff --git a/containers/payments/CurrencySelector.js b/Containers/payments/CurrencySelector.js
similarity index 100%
rename from containers/payments/CurrencySelector.js
rename to Containers/payments/CurrencySelector.js
diff --git a/containers/payments/Method.js b/Containers/payments/Method.js
similarity index 94%
rename from containers/payments/Method.js
rename to Containers/payments/Method.js
index cc86fb4cc..68cdb3731 100644
--- a/containers/payments/Method.js
+++ b/Containers/payments/Method.js
@@ -4,8 +4,8 @@ import { useApiResult } from 'react-components';
 import { queryPaymentMethods } from 'proton-shared/lib/api/payments';
 
 import Card from './Card';
-import useCard from './useCard';
-import PaymentMethodDetails from '../paymentMethods/PaymentMethodDetails';
+import useCard from './hooks/useCard';
+import PaymentMethodDetails from '../paymentMethods/details';
 import PayPal from './PayPal';
 import Cash from './Cash';
 import Bitcoin from './Bitcoin';
diff --git a/containers/payments/PayPal.js b/Containers/payments/PayPal.js
similarity index 100%
rename from containers/payments/PayPal.js
rename to Containers/payments/PayPal.js
diff --git a/containers/payments/useCard.js b/Containers/payments/hooks/useCard.js
similarity index 75%
rename from containers/payments/useCard.js
rename to Containers/payments/hooks/useCard.js
index 412702961..783d0ca1e 100644
--- a/containers/payments/useCard.js
+++ b/Containers/payments/hooks/useCard.js
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { getErrors } from './cardValidator';
-import getDefaultCard from './getDefaultCard';
+import { getErrors } from '../lib/cardValidator';
+import getDefaultCard from '../lib/getDefaultCard';
 
 const useCard = (initialCard = getDefaultCard()) => {
     const [card, update] = useState(initialCard);
@@ -17,4 +17,4 @@ const useCard = (initialCard = getDefaultCard()) => {
     };
 };
 
-export default useCard;
\ No newline at end of file
+export default useCard;
diff --git a/containers/payments/usePayment.js b/Containers/payments/hooks/usePayment.js
similarity index 100%
rename from containers/payments/usePayment.js
rename to Containers/payments/hooks/usePayment.js
diff --git a/containers/payments/Payment.js b/Containers/payments/index.js
similarity index 95%
rename from containers/payments/Payment.js
rename to Containers/payments/index.js
index 8162a9010..0cf210fe1 100644
--- a/containers/payments/Payment.js
+++ b/Containers/payments/index.js
@@ -5,8 +5,8 @@ import { Label, Row } from 'react-components';
 import { CYCLE } from 'proton-shared/lib/constants';
 
 import Method from './Method';
-import PaymentMethodsSelect from '../paymentMethods/PaymentMethodsSelect';
-import toDetails from './toDetails';
+import PaymentMethodsSelect from '../paymentMethods/select';
+import toDetails from './lib/toDetails';
 
 const Payment = ({ type, amount, currency, cycle, onParameters, onMethod, onValidCard }) => {
     const [method, setMethod] = useState('');
diff --git a/containers/payments/cardValidator.js b/Containers/payments/lib/cardValidator.js
similarity index 96%
rename from containers/payments/cardValidator.js
rename to Containers/payments/lib/cardValidator.js
index 38ed483ff..29511b993 100644
--- a/containers/payments/cardValidator.js
+++ b/Containers/payments/lib/cardValidator.js
@@ -1,6 +1,6 @@
 import { c } from 'ttag';
 import valid from 'card-validator';
-import { isEmpty } from '../../helpers/validators';
+import { isEmpty } from '../../../helpers/validators';
 
 export const isCardNumber = (value) => valid.number(value).isValid;
 export const isCVV = (value) => valid.cvv(value).isValid;
@@ -49,4 +49,4 @@ export const getErrors = (card) => {
         }
         return acc;
     }, Object.create(null));
-};
\ No newline at end of file
+};
diff --git a/containers/payments/getDefaultCard.js b/Containers/payments/lib/getDefaultCard.js
similarity index 81%
rename from containers/payments/getDefaultCard.js
rename to Containers/payments/lib/getDefaultCard.js
index 208432741..994ec4fc3 100644
--- a/containers/payments/getDefaultCard.js
+++ b/Containers/payments/lib/getDefaultCard.js
@@ -1,4 +1,4 @@
-import { getFirstTop } from '../../helpers/countries';
+import { getFirstTop } from '../../../helpers/countries';
 
 const getDefault = () => {
     const now = new Date();
@@ -17,4 +17,4 @@ const getDefault = () => {
     };
 };
 
-export default getDefault;
\ No newline at end of file
+export default getDefault;
diff --git a/containers/payments/toDetails.js b/Containers/payments/lib/toDetails.js
similarity index 58%
rename from containers/payments/toDetails.js
rename to Containers/payments/lib/toDetails.js
index 72d1900de..b708f6403 100644
--- a/containers/payments/toDetails.js
+++ b/Containers/payments/lib/toDetails.js
@@ -7,10 +7,14 @@ const formatYear = (year) => {
 
 const toDetails = ({ number, month: Month, year, cvc: CVC, fullname, zip: ZIP, country: Country }) => {
     return {
-        Name: clean(fullname), Number: clean(number),
-        Month, Year: formatYear(year), CVC, // Don't clean ZIP, space is allowed
-        ZIP, Country
+        Name: clean(fullname),
+        Number: clean(number),
+        Month,
+        Year: formatYear(year),
+        CVC, // Don't clean ZIP, space is allowed
+        ZIP,
+        Country
     };
 };
 
-export default toDetails;
\ No newline at end of file
+export default toDetails;
diff --git a/containers/payments/DonateModal.js b/Containers/payments/modal/donate.js
similarity index 95%
rename from containers/payments/DonateModal.js
rename to Containers/payments/modal/donate.js
index f217cace3..7d5761c3a 100644
--- a/containers/payments/DonateModal.js
+++ b/Containers/payments/modal/donate.js
@@ -13,9 +13,9 @@ import {
 } from 'react-components';
 import { DEFAULT_CURRENCY, DEFAULT_DONATION_AMOUNT } from 'proton-shared/lib/constants';
 
-import PaymentSelector from './PaymentSelector';
-import Payment from './Payment';
-import usePayment from './usePayment';
+import PaymentSelector from '../selector';
+import Payment from '../index';
+import usePayment from '../hooks/usePayment';
 
 const DonateModal = ({ show, onClose }) => {
     const { method, setMethod, parameters, setParameters, canPay, setCardValidity } = usePayment(handleSubmit);
diff --git a/containers/payments/EditCardModal.js b/Containers/payments/modal/editCard.js
similarity index 94%
rename from containers/payments/EditCardModal.js
rename to Containers/payments/modal/editCard.js
index c0136a5a2..181cfc898 100644
--- a/containers/payments/EditCardModal.js
+++ b/Containers/payments/modal/editCard.js
@@ -12,9 +12,9 @@ import {
 } from 'react-components';
 import { setPaymentMethod } from 'proton-shared/lib/api/payments';
 
-import Card from './Card';
-import useCard from './useCard';
-import toDetails from './toDetails';
+import Card from '../index';
+import useCard from '../hooks/useCard';
+import toDetails from '../lib/toDetails';
 
 const EditCardModal = ({ card: existingCard, show, onClose, onChange }) => {
     const { loading, request } = useApiWithoutResult(setPaymentMethod);
diff --git a/containers/payments/TopUpModal.js b/Containers/payments/modal/topUp.js
similarity index 100%
rename from containers/payments/TopUpModal.js
rename to Containers/payments/modal/topUp.js
diff --git a/containers/payments/PaymentSelector.js b/Containers/payments/selector.js
similarity index 100%
rename from containers/payments/PaymentSelector.js
rename to Containers/payments/selector.js
diff --git a/containers/products/DownloadsSection.js b/Containers/products/DownloadsSection.js
similarity index 100%
rename from containers/products/DownloadsSection.js
rename to Containers/products/DownloadsSection.js
diff --git a/containers/products/ProtonMailClients.js b/Containers/products/ProtonMailClients.js
similarity index 100%
rename from containers/products/ProtonMailClients.js
rename to Containers/products/ProtonMailClients.js
diff --git a/containers/products/ProtonVPNClients.js b/Containers/products/ProtonVPNClients.js
similarity index 100%
rename from containers/products/ProtonVPNClients.js
rename to Containers/products/ProtonVPNClients.js
diff --git a/containers/prompts/Container.js b/Containers/prompts/Container.js
similarity index 100%
rename from containers/prompts/Container.js
rename to Containers/prompts/Container.js
diff --git a/containers/prompts/Provider.js b/Containers/prompts/Provider.js
similarity index 100%
rename from containers/prompts/Provider.js
rename to Containers/prompts/Provider.js
diff --git a/containers/prompts/actions.js b/Containers/prompts/actions.js
similarity index 100%
rename from containers/prompts/actions.js
rename to Containers/prompts/actions.js
diff --git a/containers/prompts/manager.js b/Containers/prompts/manager.js
similarity index 100%
rename from containers/prompts/manager.js
rename to Containers/prompts/manager.js
diff --git a/containers/prompts/reducer.js b/Containers/prompts/reducer.js
similarity index 100%
rename from containers/prompts/reducer.js
rename to Containers/prompts/reducer.js
diff --git a/containers/security/AddressVerificationSection.js b/Containers/security/AddressVerificationSection.js
similarity index 100%
rename from containers/security/AddressVerificationSection.js
rename to Containers/security/AddressVerificationSection.js
diff --git a/containers/security/AttachPublicKeyToggle.js b/Containers/security/AttachPublicKeyToggle.js
similarity index 100%
rename from containers/security/AttachPublicKeyToggle.js
rename to Containers/security/AttachPublicKeyToggle.js
diff --git a/containers/security/ExternalPGPSettingsSection.js b/Containers/security/ExternalPGPSettingsSection.js
similarity index 100%
rename from containers/security/ExternalPGPSettingsSection.js
rename to Containers/security/ExternalPGPSettingsSection.js
diff --git a/containers/security/PGPSchemeSelect.js b/Containers/security/PGPSchemeSelect.js
similarity index 100%
rename from containers/security/PGPSchemeSelect.js
rename to Containers/security/PGPSchemeSelect.js
diff --git a/containers/security/SignToggle.js b/Containers/security/SignToggle.js
similarity index 100%
rename from containers/security/SignToggle.js
rename to Containers/security/SignToggle.js
diff --git a/containers/sessions/SessionAction.js b/Containers/sessions/action.js
similarity index 95%
rename from containers/sessions/SessionAction.js
rename to Containers/sessions/action.js
index 4ac936948..cd9ec93b5 100644
--- a/containers/sessions/SessionAction.js
+++ b/Containers/sessions/action.js
@@ -17,4 +17,4 @@ SessionAction.propTypes = {
     currentUID: PropTypes.string.isRequired
 };
 
-export default SessionAction;
\ No newline at end of file
+export default SessionAction;
diff --git a/containers/sessions/SessionsSection.js b/Containers/sessions/section.js
similarity index 99%
rename from containers/sessions/SessionsSection.js
rename to Containers/sessions/section.js
index 1a48e3fc1..a79b92e82 100644
--- a/containers/sessions/SessionsSection.js
+++ b/Containers/sessions/section.js
@@ -21,7 +21,7 @@ import useApi from '../../hooks/useApi';
 import { querySessions, revokeOtherSessions, revokeSession } from 'proton-shared/lib/api/auth';
 import { ELEMENTS_PER_PAGE } from 'proton-shared/lib/constants';
 
-import SessionAction from './SessionAction';
+import SessionAction from './action';
 import useAuthenticationStore from '../../hooks/useAuthenticationStore';
 
 const CLIENTS = {
diff --git a/README.md b/README.md
index fffb38a7e..965558393 100644
--- a/README.md
+++ b/README.md
@@ -102,3 +102,72 @@ const handleClick = () => {
 };
 
 ```
+
+
+## How to write components ?
+
+### A new component
+
+Let's create the component **fire**, with 3 flavors, we will have
+- Fire
+- RedFire
+- BlueFire
+- GreenFire
+
+1. Let's create the dir `./components/fire`
+2. Create the main component `index.js` (_it will be exported as_ `Fire`)
+3. Create flavors, `{green,red,blue}.js`
+4. :tada:
+
+Now when we will export them, it will create 4 exports:
+- Fire -> index.js as it's the main component
+- RedFire -> red.js as it's a flavor
+- BlueFire -> blue.js as it's a flavor
+- GreenFire -> greem.js as it's a flavor
+
+ex:
+`import { RedFire } from 'react-components';`
+
+### A new component
+
+### Fresh one
+
+Let's create the component **fire**
+- Fire
+
+1. Let's create the dir `./components/fire`
+2. Create the main component `index.js` (_it will be exported as_ `Fire`)
+3. :tada:
+
+Now when we will export them, it will create 1 export:
+- Fire -> index.js as it's the main component
+
+ex:
+`import { Fire } from 'react-components';`
+
+
+### From an existing one
+
+Let's add a new flavor of an existing component, **button**
+
+1. Let's open the dir `./components/button`
+2. Create the main component `success.js` 
+3. :tada:
+
+
+Now when we will export them, it will create 1 more export:
+- SuccessButton -> success.js as it's a flavor
+
+ex:
+`import { SuccessButton } from 'react-components';`
+
+
+### TL;DR
+
+- `<componentName>/index.js` => `export { default as ComponentName }`
+- `<componentName>/<flavor>.js` => `export { default as FlavorComponentName }`
+
+ex:
+
+- `button/index.js` => `export { default as Button }`
+- `button/small.js` => `export { default as SmallButton }`
diff --git a/components/button/ButtonGroup.js b/components/button/ButtonGroup.js
deleted file mode 100644
index 44191d7f7..000000000
--- a/components/button/ButtonGroup.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Button from './Button';
-import { getClasses } from '../../helpers/component';
-
-const ButtonGroup = ({ children, className, ...rest }) => <Button className={getClasses('pm-button pm-group-button', className)} {...rest}>{children}</Button>;
-
-ButtonGroup.propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string
-};
-
-export default ButtonGroup;
\ No newline at end of file
diff --git a/components/button/ResetButton.js b/components/button/ResetButton.js
deleted file mode 100644
index 46b8808e0..000000000
--- a/components/button/ResetButton.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from './Button';
-
-const ResetButton = ({ children, ...rest }) => <Button type="reset" {...rest}>{children}</Button>;
-
-ResetButton.propTypes = {
-    children: PropTypes.node.isRequired
-};
-
-export default ResetButton;
\ No newline at end of file
diff --git a/components/button/index.js b/components/button/index.js
deleted file mode 100644
index 66872484d..000000000
--- a/components/button/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as Button } from './Button';
-export { default as SmallButton } from './SmallButton';
-export { default as LargeButton } from './LargeButton';
-export { default as PrimaryButton } from './PrimaryButton';
-export { default as ButtonGroup } from './ButtonGroup';
-export { default as Group } from './Group';
-export { default as Copy } from './Copy';
-export { default as LinkButton } from './LinkButton';
-export { default as ResetButton } from './ResetButton';
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
deleted file mode 100644
index ea645df7f..000000000
--- a/components/dropdown/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Dropdown } from './Dropdown';
-export { default as DropdownMenu } from './DropdownMenu';
\ No newline at end of file
diff --git a/components/modal/index.js b/components/modal/index.js
deleted file mode 100644
index c7f155f37..000000000
--- a/components/modal/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as Confirm } from './Confirm';
-export { default as Footer } from './Footer';
-export { default as Header } from './Header';
-export { default as Modal } from './Modal';
-export { default as Content } from './Content';
-export { default as Input } from './Input';
\ No newline at end of file
diff --git a/components/table/index.js b/components/table/index.js
deleted file mode 100644
index d1f6dce9f..000000000
--- a/components/table/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as Table } from './Table';
-export { default as TableCell } from './TableCell';
-export { default as TableHeader } from './TableHeader';
-export { default as TableFooter } from './TableFooter';
-export { default as TableRow } from './TableRow';
-export { default as TableBody } from './TableBody';
-
diff --git a/index.js b/index.js
index cd3ccd12e..ea0be2079 100644
--- a/index.js
+++ b/index.js
@@ -1,90 +1,198 @@
-export { default as AddressesSection } from './containers/addresses/AddressesSection';
-export { default as AddressVerificationSection } from './containers/security/AddressVerificationSection';
-export { default as Alert } from './components/alert/Alert';
-export { default as AskPasswordModal } from './containers/password/AskPasswordModal';
-export { default as Badge } from './components/badge/Badge';
-export { default as Block } from './components/container/Block';
-export { default as Bordered } from './components/container/Bordered';
-export { default as Breadcrumb } from './components/breadcrumb/Breadcrumb';
-export { default as Button } from './components/button/Button';
-export { default as ButtonGroup } from './components/button/ButtonGroup';
-export { default as Checkbox } from './components/input/Checkbox';
-export { default as ConfirmModal } from './components/modal/Confirm';
-export { default as ContentModal } from './components/modal/Content';
-export { default as Copy } from './components/button/Copy';
-export { default as DomainsSection } from './containers/domains/DomainsSection';
-export { default as Dropdown } from './components/dropdown/Dropdown';
-export { default as DropdownMenu } from './components/dropdown/DropdownMenu';
-export { default as EditCardModal } from './containers/payments/EditCardModal';
-export { default as ExternalPGPSettingsSection } from './containers/security/ExternalPGPSettingsSection';
-export { default as FooterModal } from './components/modal/Footer';
-export { default as Group } from './components/button/Group';
-export { default as HeaderModal } from './components/modal/Header';
-export { default as Href } from './components/link/Href';
-export { default as Icon } from './components/icon/Icon';
-export { default as Icons } from './components/icon/Icons';
-export { default as Info } from './components/link/Info';
-export { default as Input } from './components/input/Input';
-export { default as InputModal } from './components/modal/Input';
-export { default as InvoicesSection } from './containers/invoices/InvoicesSection';
-export { default as AddressKeysSection } from './containers/keys/AddressKeysSection';
-export { default as LoginContainer } from './containers/login/LoginContainer';
-export { default as Label } from './components/label/Label';
-export { default as LargeButton } from './components/button/LargeButton';
-export { default as LearnMore } from './components/link/LearnMore';
-export { default as Loader } from './components/loader/Loader';
-export { default as LogsSection } from './containers/logs/LogsSection';
-export { default as MembersSection } from './containers/members/MembersSection';
-export { default as Modal } from './components/modal/Modal';
-export { default as NotificationSection } from './containers/notification/NotificationSection';
-export { default as OrganizationSection } from './containers/organization/OrganizationSection';
-export { default as Pagination } from './components/pagination/Pagination';
-export { default as Paragraph } from './components/paragraph/Paragraph';
-export { default as Password } from './components/input/Password';
-export { default as PaymentMethodsSection } from './containers/paymentMethods/PaymentMethodsSection';
-export { default as Price } from './components/price/Price';
-export { default as PrimaryButton } from './components/button/PrimaryButton';
-export { default as Progress } from './components/progress/Progress';
-export { default as Radio } from './components/input/Radio';
-export { default as RadioCard } from './components/input/RadioCard';
-export { default as LinkButton } from './components/button/LinkButton';
-export { default as ResetButton } from './components/button/ResetButton';
-export { default as RichTextEditor } from './components/input/RichTextEditor';
-export { default as Row } from './components/container/Row';
-export { default as Search } from './components/input/Search';
-export { default as Select } from './components/select/Select';
-export { default as SessionsSection } from './containers/sessions/SessionsSection';
-export { default as Sidebar } from './components/sidebar/Sidebar';
-export { default as SmallButton } from './components/button/SmallButton';
-export { default as SubTitle } from './components/title/SubTitle';
-export { default as Table } from './components/table/Table';
-export { default as TableBody } from './components/table/TableBody';
-export { default as TableCell } from './components/table/TableCell';
-export { default as TableCellBusy } from './components/table/TableCellBusy';
-export { default as TableFooter } from './components/table/TableFooter';
-export { default as TableHeader } from './components/table/TableHeader';
-export { default as TableRow } from './components/table/TableRow';
-export { default as TableRowBusy } from './components/table/TableRowBusy';
-export { default as Text } from './components/text/Text';
-export { default as TextArea } from './components/input/TextArea';
-export { default as Time } from './components/time/Time';
-export { default as Title } from './components/title/Title';
-export { default as Toggle } from './components/toggle/Toggle';
-export { default as Tooltip } from './components/tooltip/Tooltip';
+export { default as BodyTable } from './Components/table/body';
+export { default as CellBusyTable } from './Components/table/cellBusy';
+export { default as HeaderTable } from './Components/table/header';
+export { default as RowBusyTable } from './Components/table/rowBusy';
+export { default as FooterTable } from './Components/table/footer';
+export { default as CellTable } from './Components/table/cell';
+export { default as Table } from './Components/table/index';
+export { default as RowTable } from './Components/table/row';
+export { default as Select } from './Components/select/index';
+export { default as Breadcrumb } from './Components/breadcrumb/index';
+export { default as Alert } from './Components/alert/index';
+export { default as Icon } from './Components/icon/index';
+export { default as Toggle } from './Components/toggle/index';
+export { default as useToggle } from './Components/toggle/useToggle';
+export { default as Badge } from './Components/badge/index';
+export { default as Bordered } from './Components/container/Bordered';
+export { default as Block } from './Components/container/Block';
+export { default as Row } from './Components/container/Row';
+export { default as Group } from './Components/container/Group';
+export { default as Icons } from './Components/container/Icons';
+export { default as Information } from './Components/container/Information';
+export { default as Tooltip } from './Components/tooltip/index';
+export { default as ResetButton } from './Components/button/reset';
+export { default as CopyButton } from './Components/button/copy';
+export { default as GroupButton } from './Components/button/group';
+export { default as Button } from './Components/button/index';
+export { default as LinkButton } from './Components/button/link';
+export { default as PrimaryButton } from './Components/button/primary';
+export { default as LargeButton } from './Components/button/large';
+export { default as SmallButton } from './Components/button/small';
+export { default as HrefLink } from './Components/link/href';
+export { default as InfoLink } from './Components/link/Info';
+export { default as LearnMoreLink } from './Components/link/LearnMore';
+export { default as Time } from './Components/time/index';
+export { default as MenuDropdown } from './Components/dropdown/menu';
+export { default as Dropdown } from './Components/dropdown/index';
+export { default as ItemDropdown } from './Components/dropdown/item';
+export { default as RichTextEditorInput } from './Components/input/RichTextEditor';
+export { default as CheckboxInput } from './Components/input/Checkbox';
+export { default as useInput } from './Components/input/useInput';
+export { default as SearchInput } from './Components/input/Search';
+export { default as TextAreaInput } from './Components/input/TextArea';
+export { default as RadioCardInput } from './Components/input/RadioCard';
+export { default as Input } from './Components/input/index';
+export { default as useDebounceInput } from './Components/input/useDebounceInput';
+export { default as PasswordInput } from './Components/input/Password';
+export { default as RadioInput } from './Components/input/Radio';
+export { default as SubTitle } from './Components/title/SubTitle';
+export { default as Title } from './Components/title/index';
+export { default as useLoader } from './Components/loader/useLoader';
+export { default as Loader } from './Components/loader/index';
+export { default as useLoading } from './Components/loader/useLoading';
+export { default as Paragraph } from './Components/paragraph/index';
+export { default as ModalWithPortalModal } from './Components/modal/ModalWithPortal';
+export { default as ContentModal } from './Components/modal/Content';
+export { default as InputModal } from './Components/modal/Input';
+export { default as Modal } from './Components/modal/index';
+export { default as HeaderModal } from './Components/modal/Header';
+export { default as useModal } from './Components/modal/useModal';
+export { default as ConfirmModal } from './Components/modal/Confirm';
+export { default as FooterModal } from './Components/modal/Footer';
+export { default as Price } from './Components/price/index';
+export { default as Progress } from './Components/progress/index';
+export { default as Text } from './Components/text/index';
+export { default as usePaginationAsync } from './Components/pagination/usePaginationAsync';
+export { default as usePagination } from './Components/pagination/usePagination';
+export { default as Pagination } from './Components/pagination/index';
+export { default as Label } from './Components/label/index';
+export { default as NavMenuSidebar } from './Components/sidebar/NavMenu';
+export { default as NavItemSidebar } from './Components/sidebar/NavItem';
+export { default as Sidebar } from './Components/sidebar/index';
+export { default as FormLogin } from './Containers/login/form';
+export { default as TOTPFormLogin } from './Containers/login/TOTPForm';
+export { default as useLogin } from './Containers/login/useLogin';
+export { default as UnlockFormLogin } from './Containers/login/UnlockForm';
+export { default as ContainerLogin } from './Containers/login/container';
+export { default as ThemesSectionAppearance } from './Containers/appearance/ThemesSection';
+export { default as ProtonMailClientsProducts } from './Containers/products/ProtonMailClients';
+export { default as ProtonVPNClientsProducts } from './Containers/products/ProtonVPNClients';
+export { default as DownloadsSectionProducts } from './Containers/products/DownloadsSection';
+export { default as TableDomains } from './Containers/domains/table';
+export { default as SectionDomains } from './Containers/domains/section';
+export { default as AmountButtonPayments } from './Containers/payments/AmountButton';
+export { default as SelectorPayments } from './Containers/payments/selector';
+export { default as BitcoinPayments } from './Containers/payments/Bitcoin';
+export { default as CurrencySelectorPayments } from './Containers/payments/CurrencySelector';
+export { default as CashPayments } from './Containers/payments/Cash';
+export { default as CardPayments } from './Containers/payments/Card';
+export { default as BitcoinQRCodePayments } from './Containers/payments/BitcoinQRCode';
+export { default as BitcoinDetailsPayments } from './Containers/payments/BitcoinDetails';
+export { default as MethodPayments } from './Containers/payments/Method';
+export { default as ToDetailsLib } from './Containers/payments/lib/toDetails';
+export { default as GetDefaultCardLib } from './Containers/payments/lib/getDefaultCard';
+export { default as Payments } from './Containers/payments/index';
+export { default as EditCardPaymentsModal } from './Containers/payments/modal/editCard';
+export { default as DonatePaymentsModal } from './Containers/payments/modal/donate';
+export { default as TopUpPaymentsModal } from './Containers/payments/modal/topUp';
+export { default as useCard } from './Containers/payments/hooks/useCard';
+export { default as usePayment } from './Containers/payments/hooks/usePayment';
+export { default as PayPalPayments } from './Containers/payments/PayPal';
+export { default as ResetTogglePassword } from './Containers/password/resetToggle';
+export { default as AskModalPassword } from './Containers/password/askModal';
+export { default as RecoveryEmailButtonPassword } from './Containers/password/RecoveryEmailButton';
+export { default as ContainerNotifications } from './Containers/notifications/Container';
+export { default as ProviderNotifications } from './Containers/notifications/Provider';
+export { default as ActionSessions } from './Containers/sessions/action';
+export { default as SectionSessions } from './Containers/sessions/section';
+export { default as ContainerPrompts } from './Containers/prompts/Container';
+export { default as ProviderPrompts } from './Containers/prompts/Provider';
+export { default as DailyToggleNotification } from './Containers/notification/DailyToggle';
+export { default as NewsCheckboxesNotification } from './Containers/notification/NewsCheckboxes';
+export { default as DesktopPanelNotification } from './Containers/notification/DesktopPanel';
+export { default as SectionNotification } from './Containers/notification/section';
+export { default as AddressTableKeys } from './Containers/keys/addressTable';
+export { default as StatusKeys } from './Containers/keys/status';
+export { default as ContactHeaderKeys } from './Containers/keys/contactHeader';
+export { default as AddressRowKeys } from './Containers/keys/addressRow';
+export { default as AddressHeaderKeys } from './Containers/keys/addressHeader';
+export { default as TableKeys } from './Containers/keys/table';
+export { default as AddressSectionKeys } from './Containers/keys/addressSection';
+export { default as RowKeys } from './Containers/keys/row';
+export { default as DKIMSectionDomain } from './Containers/domain/DKIMSection';
+export { default as NameDomain } from './Containers/domain/name';
+export { default as StatusDomain } from './Containers/domain/status';
+export { default as SPFSectionDomain } from './Containers/domain/SPFSection';
+export { default as AddressCatchAllDomain } from './Containers/domain/AddressCatchAll';
+export { default as MXSectionDomain } from './Containers/domain/MXSection';
+export { default as VerifySectionDomain } from './Containers/domain/verifySection';
+export { default as DMARCSectionDomain } from './Containers/domain/DMARCSection';
+export { default as DomainModal } from './Containers/domain/modal/index';
+export { default as CatchAllDomainModal } from './Containers/domain/modal/catchAll';
+export { default as AddressesTableDomain } from './Containers/domain/AddressesTable';
+export { default as SectionDomain } from './Containers/domain/section';
+export { default as DetailsPaymentMethods } from './Containers/paymentMethods/details';
+export { default as TablePaymentMethods } from './Containers/paymentMethods/table';
+export { default as SelectPaymentMethods } from './Containers/paymentMethods/select';
+export { default as usePaymentMethodsSelect } from './Containers/paymentMethods/usePaymentMethodsSelect';
+export { default as StatePaymentMethods } from './Containers/paymentMethods/state';
+export { default as SectionPaymentMethods } from './Containers/paymentMethods/section';
+export { default as SignToggleSecurity } from './Containers/security/SignToggle';
+export { default as ExternalPGPSettingsSectionSecurity } from './Containers/security/ExternalPGPSettingsSection';
+export { default as AttachPublicKeyToggleSecurity } from './Containers/security/AttachPublicKeyToggle';
+export { default as AddressVerificationSectionSecurity } from './Containers/security/AddressVerificationSection';
+export { default as PGPSchemeSelectSecurity } from './Containers/security/PGPSchemeSelect';
+export { default as StatusAddresses } from './Containers/addresses/status';
+export { default as DomainsSelectAddresses } from './Containers/addresses/domainsSelect';
+export { default as UseAddressesModal } from './Containers/addresses/modal/use';
+export { default as AddressesModal } from './Containers/addresses/modal/index';
+export { default as EditAddressesModal } from './Containers/addresses/modal/edit';
+export { default as SectionAddresses } from './Containers/addresses/section';
+export { default as ToolbarAddresses } from './Containers/addresses/toolbar';
+export { default as TableLogs } from './Containers/logs/table';
+export { default as WipeButtonLogs } from './Containers/logs/wipeButton';
+export { default as SectionLogs } from './Containers/logs/section';
+export { default as PayButtonInvoices } from './Containers/invoices/payButton';
+export { default as AmountInvoices } from './Containers/invoices/amount';
+export { default as DownloadButtonInvoices } from './Containers/invoices/downloadButton';
+export { default as PayInvoicesModal } from './Containers/invoices/modal/pay';
+export { default as TextInvoicesModal } from './Containers/invoices/modal/text';
+export { default as TypeInvoices } from './Containers/invoices/type';
+export { default as StateInvoices } from './Containers/invoices/state';
+export { default as SectionInvoices } from './Containers/invoices/section';
+export { default as StorageSelectorMembers } from './Containers/members/storageSelector';
+export { default as AddButtonMembers } from './Containers/members/addButton';
+export { default as PrivateMembers } from './Containers/members/private';
+export { default as RoleMembers } from './Containers/members/role';
+export { default as useMemberModal } from './Containers/members/useMemberModal';
+export { default as VPNSelectorMembers } from './Containers/members/VPNSelector';
+export { default as MembersModal } from './Containers/members/modal/index';
+export { default as EditMembersModal } from './Containers/members/modal/edit';
+export { default as SectionMembers } from './Containers/members/section';
+export { default as OptionsMembers } from './Containers/members/options';
+export { default as AddressesMembers } from './Containers/members/addresses';
+export { default as DraftTypeSelectLayouts } from './Containers/layouts/DraftTypeSelect';
+export { default as TextDirectionSelectLayouts } from './Containers/layouts/TextDirectionSelect';
+export { default as ShowMovedSelectLayouts } from './Containers/layouts/ShowMovedSelect';
+export { default as ViewModeRadiosLayouts } from './Containers/layouts/ViewModeRadios';
+export { default as LayoutsSectionLayouts } from './Containers/layouts/LayoutsSection';
+export { default as ViewLayoutRadiosLayouts } from './Containers/layouts/ViewLayoutRadios';
+export { default as ComposerModeRadiosLayouts } from './Containers/layouts/ComposerModeRadios';
+export { default as SectionOrganization } from './Containers/organization/section';
+export { default as ContentSectionMessages } from './Containers/messages/contentSection';
+export { default as RemoteToggleMessages } from './Containers/messages/RemoteToggle';
+export { default as EmbeddedToggleMessages } from './Containers/messages/EmbeddedToggle';
+export { default as NotificationsContext } from './context/notifications';
 export { default as AuthenticationStoreContext } from './context/authenticationStore';
 export { default as ApiContext } from './context/api';
-export { default as NotificationsProvider } from './containers/notifications/Provider';
-export { default as PromptsProvider } from './containers/prompts/Provider';
-export { default as useAuthenticationStore } from './hooks/useAuthenticationStore';
-export { default as useApi } from './hooks/useApi';
-export { default as useApiResult } from './hooks/useApiResult';
+export { default as PromptsContext } from './context/prompts';
+export { default as useStep } from './helpers/useStep';
 export { default as useApiWithoutResult } from './hooks/useApiWithoutResult';
 export { default as useEventManager } from './hooks/useEventManager';
 export { default as useNotifications } from './hooks/useNotifications';
-export { default as useLoader } from './components/loader/useLoader';
-export { default as useLoading } from './components/loader/useLoading';
-export { default as useModal } from './components/modal/useModal';
 export { default as usePrompts } from './hooks/usePrompts';
-export { default as usePagination } from './components/pagination/usePagination';
-export { default as usePaginationAsync } from './components/pagination/usePaginationAsync';
-export { default as useStep } from './helpers/useStep';
+export { default as useIsMounted } from './hooks/useIsMounted';
+export { default as useApi } from './hooks/useApi';
+export { default as useApiResult } from './hooks/useApiResult';
+export { default as useAuthenticationStore } from './hooks/useAuthenticationStore';
+export { default as useAsync } from './hooks/useAsync';
diff --git a/makeExport b/makeExport
new file mode 100755
index 000000000..c52f251a4
--- /dev/null
+++ b/makeExport
@@ -0,0 +1,141 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const execa = require('execa');
+const bash = (cli) => execa.shell(cli, { shell: '/bin/bash' });
+
+const ucFirst = (input) => {
+    return input.charAt(0).toUpperCase() + input.slice(1);
+};
+
+const NO_EXPORT_FILES = [
+    'manager', 'reducer', 'actions',
+    'AddressStatus', 'countries', 'cardValidator'
+];
+
+const list = [
+    {
+        name: 'Dropdown',
+        newName: 'From DropdownX to XDropdown'
+    },
+    {
+        name: 'Href',
+        newName: 'Link'
+    },
+    {
+        name: 'AddressModal - EditAddressModal - UseAddressModal',
+        newName: 'AddressesModal - EditAddressesModal - UseAddressesModal'
+    },
+    {
+        name: 'AddressActions - AddressStatus - AddressesDomainsSelect',
+        newName: 'AddressesActions - AddressesStatus - AddressesDomainsSelect'
+    },
+    {
+        name: '* domains and * domain',
+        newName: '----'
+    },
+    {
+        name: '* invoices modals',
+        newName: '----'
+    },
+    {
+        name: 'SessionAction',
+        newName: 'SessionsAction'
+    }
+];
+
+console.log('Renamed', JSON.stringify(list, null, 2))
+
+async function main() {
+    const { stdout } = await bash("find {Components,Containers,context,helpers,hooks} -type f -name '*.js'");
+
+    const getExport = ({ fileName, dir, filePath }, mode) => {
+
+        const type = path.basename(dir);
+
+
+        if (mode === 'containers' && type === 'modal') {
+            const component = path.basename(path.resolve(dir, '..'));
+
+            if (fileName === 'index') {
+                return `${ucFirst(component)}Modal`;
+            }
+
+            return `${ucFirst(fileName)}${ucFirst(component)}Modal`;
+        }
+
+        // Custom Case
+        if (fileName === 'SubTitle' || type === 'container') {
+            return ucFirst(fileName);
+        }
+
+        // index === main module
+        if (fileName === 'index' ) {
+            return ucFirst(type);
+        }
+
+        if (fileName.startsWith('use')) {
+            return fileName;
+        }
+
+        return `${ucFirst(fileName)}${ucFirst(type)}`;
+    };
+
+    const getConfig = (file) => {
+        const fileName = path.basename(file, '.js');
+        const dir = path.dirname(file);
+        const filePath = path.join(dir, fileName);
+        return { fileName, filePath, dir };
+    };
+
+    const isExportable = ({ fileName, filePath, dir }) => {
+
+        if (fileName === 'AddressesSection') {
+            const type = path.basename(dir);
+            const test = type !== 'addresses';
+
+            if (test) {
+                console.log(`⚠ Broken name for ${filePath} you need to change it`);
+                return false;
+            }
+        }
+
+        if(['layouts'].includes(dir)) {
+            return false;
+        }
+
+        // export only useX
+        if (/helpers$/.test(dir)) {
+            return fileName.startsWith('use');
+        }
+
+        const isExportable = !NO_EXPORT_FILES.includes(fileName);
+
+        // Do not export Models are they are private or tests
+        return isExportable && !/(\.test|Model)$/.test(fileName)
+    };
+
+    const makeExport = (config, mode) => {
+        return `export { default as ${getExport(config, mode)} } from './${config.filePath}';`;
+    };
+
+    const content = stdout
+        .split('\n')
+        .reduce((acc, file) => {
+
+            const [type = ''] = file.split(path.sep)
+            const config = getConfig(file);
+
+            if (isExportable(config)) {
+                acc.push(makeExport(config, type.toLowerCase()));
+            }
+            return acc;
+        }, [])
+        .join('\n');
+
+    fs.writeFileSync('index.js', content);
+    console.log('✓ Export all the things.')
+}
+
+main();
diff --git a/package.json b/package.json
index aa51d4954..62bcce783 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "mocha -r esm 'test/**/*.spec.js'",
-    "lint": "eslint containers components --ext .js --quiet --cache",
+    "export": "./makeExport",
+    "lint": "eslint Containers Components --ext .js --quiet --cache && eslint index.js --quiet --cache",
     "pretty": "prettier --write $(find lib -type f -name '*.js')"
   },
   "repository": {
@@ -46,6 +47,7 @@
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^1.3.0",
+    "execa": "^1.0.0",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.4",
     "mocha": "^5.2.0",