diff --git a/app/components/Activity/ActivityModal.js b/app/components/Activity/ActivityModal/ActivityModal.js
similarity index 90%
rename from app/components/Activity/ActivityModal.js
rename to app/components/Activity/ActivityModal/ActivityModal.js
index 703fb108..4c43d6f6 100644
--- a/app/components/Activity/ActivityModal.js
+++ b/app/components/Activity/ActivityModal/ActivityModal.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
 import x from 'icons/x.svg'
 
-import TransactionModal from './TransactionModal'
-import PaymentModal from './PaymentModal'
-import InvoiceModal from './InvoiceModal'
+import TransactionModal from '../TransactionModal'
+import PaymentModal from '../PaymentModal'
+import InvoiceModal from '../InvoiceModal'
 
 import styles from './ActivityModal.scss'
 
diff --git a/app/components/Activity/ActivityModal.scss b/app/components/Activity/ActivityModal/ActivityModal.scss
similarity index 87%
rename from app/components/Activity/ActivityModal.scss
rename to app/components/Activity/ActivityModal/ActivityModal.scss
index 01146a47..c78908b0 100644
--- a/app/components/Activity/ActivityModal.scss
+++ b/app/components/Activity/ActivityModal/ActivityModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;
diff --git a/app/components/Activity/ActivityModal/index.js b/app/components/Activity/ActivityModal/index.js
new file mode 100644
index 00000000..2b1ddb24
--- /dev/null
+++ b/app/components/Activity/ActivityModal/index.js
@@ -0,0 +1,3 @@
+import ActivityModal from './ActivityModal'
+
+export default ActivityModal
diff --git a/app/components/Activity/Countdown.js b/app/components/Activity/Countdown/Countdown.js
similarity index 100%
rename from app/components/Activity/Countdown.js
rename to app/components/Activity/Countdown/Countdown.js
diff --git a/app/components/Activity/Countdown.scss b/app/components/Activity/Countdown/Countdown.scss
similarity index 79%
rename from app/components/Activity/Countdown.scss
rename to app/components/Activity/Countdown/Countdown.scss
index 29fefa3e..20ac30af 100644
--- a/app/components/Activity/Countdown.scss
+++ b/app/components/Activity/Countdown/Countdown.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   display: block;
diff --git a/app/components/Activity/Countdown/index.js b/app/components/Activity/Countdown/index.js
new file mode 100644
index 00000000..cdb1f176
--- /dev/null
+++ b/app/components/Activity/Countdown/index.js
@@ -0,0 +1,3 @@
+import Countdown from './Countdown'
+
+export default Countdown
diff --git a/app/components/Activity/InvoiceModal.js b/app/components/Activity/InvoiceModal/InvoiceModal.js
similarity index 98%
rename from app/components/Activity/InvoiceModal.js
rename to app/components/Activity/InvoiceModal/InvoiceModal.js
index f464f502..e8564ace 100644
--- a/app/components/Activity/InvoiceModal.js
+++ b/app/components/Activity/InvoiceModal/InvoiceModal.js
@@ -10,7 +10,7 @@ import { showNotification } from 'lib/utils/notifications'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import Value from 'components/Value'
-import Countdown from './Countdown'
+import Countdown from '../Countdown'
 
 import styles from './InvoiceModal.scss'
 
diff --git a/app/components/Activity/InvoiceModal.scss b/app/components/Activity/InvoiceModal/InvoiceModal.scss
similarity index 98%
rename from app/components/Activity/InvoiceModal.scss
rename to app/components/Activity/InvoiceModal/InvoiceModal.scss
index 67a00683..b2846cac 100644
--- a/app/components/Activity/InvoiceModal.scss
+++ b/app/components/Activity/InvoiceModal/InvoiceModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Activity/InvoiceModal/index.js b/app/components/Activity/InvoiceModal/index.js
new file mode 100644
index 00000000..8b94bc74
--- /dev/null
+++ b/app/components/Activity/InvoiceModal/index.js
@@ -0,0 +1,3 @@
+import InvoiceModal from './InvoiceModal'
+
+export default InvoiceModal
diff --git a/app/components/Activity/PaymentModal.js b/app/components/Activity/PaymentModal/PaymentModal.js
similarity index 100%
rename from app/components/Activity/PaymentModal.js
rename to app/components/Activity/PaymentModal/PaymentModal.js
diff --git a/app/components/Activity/PaymentModal.scss b/app/components/Activity/PaymentModal/PaymentModal.scss
similarity index 97%
rename from app/components/Activity/PaymentModal.scss
rename to app/components/Activity/PaymentModal/PaymentModal.scss
index 0a271e96..7ca269a8 100644
--- a/app/components/Activity/PaymentModal.scss
+++ b/app/components/Activity/PaymentModal/PaymentModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Activity/PaymentModal/index.js b/app/components/Activity/PaymentModal/index.js
new file mode 100644
index 00000000..36ad09d6
--- /dev/null
+++ b/app/components/Activity/PaymentModal/index.js
@@ -0,0 +1,3 @@
+import PaymentModal from './PaymentModal'
+
+export default PaymentModal
diff --git a/app/components/Activity/TransactionModal.js b/app/components/Activity/TransactionModal/TransactionModal.js
similarity index 100%
rename from app/components/Activity/TransactionModal.js
rename to app/components/Activity/TransactionModal/TransactionModal.js
diff --git a/app/components/Activity/TransactionModal.scss b/app/components/Activity/TransactionModal/TransactionModal.scss
similarity index 97%
rename from app/components/Activity/TransactionModal.scss
rename to app/components/Activity/TransactionModal/TransactionModal.scss
index d82c08fc..0a2c084a 100644
--- a/app/components/Activity/TransactionModal.scss
+++ b/app/components/Activity/TransactionModal/TransactionModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Activity/TransactionModal/index.js b/app/components/Activity/TransactionModal/index.js
new file mode 100644
index 00000000..828a4d53
--- /dev/null
+++ b/app/components/Activity/TransactionModal/index.js
@@ -0,0 +1,3 @@
+import TransactionModal from './TransactionModal'
+
+export default TransactionModal
diff --git a/app/components/Contacts/AddChannel.js b/app/components/Contacts/AddChannel.js
deleted file mode 100644
index 019e996c..00000000
--- a/app/components/Contacts/AddChannel.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
-
-import x from 'icons/x.svg'
-
-import styles from './AddChannel.scss'
-
-class AddChannel extends Component {
-  constructor(props) {
-    super(props)
-    this.searchInput = React.createRef()
-  }
-
-  componentDidMount() {
-    // Focus the search input field.
-    this.searchInput.current.focus()
-  }
-
-  render() {
-    const {
-      contactsform,
-      closeContactsForm,
-      openSubmitChannelForm,
-      updateContactFormSearchQuery,
-      updateManualFormSearchQuery,
-      setNode,
-      activeChannelPubkeys,
-      nonActiveChannelPubkeys,
-      pendingOpenChannelPubkeys,
-      filteredNetworkNodes,
-      loadingChannelPubkeys,
-      showManualForm,
-      openManualForm
-    } = this.props
-    const renderRightSide = node => {
-      if (loadingChannelPubkeys.includes(node.pub_key)) {
-        return (
-          <span className={styles.inactive}>
-            <div className={styles.loading}>
-              <div className={styles.spinner} />
-            </div>
-          </span>
-        )
-      }
-
-      if (activeChannelPubkeys.includes(node.pub_key)) {
-        return (
-          <span className={`${styles.online} ${styles.inactive}`}>
-            <span>Online</span>
-          </span>
-        )
-      }
-
-      if (nonActiveChannelPubkeys.includes(node.pub_key)) {
-        return (
-          <span className={`${styles.offline} ${styles.inactive}`}>
-            <span>Offline</span>
-          </span>
-        )
-      }
-
-      if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
-        return (
-          <span className={`${styles.pending} ${styles.inactive}`}>
-            <span>Pending</span>
-          </span>
-        )
-      }
-
-      if (!node.addresses.length) {
-        return <span className={`${styles.private} ${styles.inactive}`}>Private</span>
-      }
-
-      return (
-        <span
-          className={styles.connect}
-          onClick={() => {
-            // set the node public key for the submit form
-            setNode(node)
-            // open the submit form
-            openSubmitChannelForm()
-          }}
-        >
-          Connect
-        </span>
-      )
-    }
-
-    const searchUpdated = search => {
-      updateContactFormSearchQuery(search)
-
-      if (search.includes('@') && search.split('@')[0].length === 66) {
-        updateManualFormSearchQuery(search)
-      }
-    }
-
-    return (
-      <div className={styles.container}>
-        <header className={styles.header}>
-          <input
-            type="text"
-            placeholder="Search the network..."
-            className={styles.searchInput}
-            value={contactsform.searchQuery}
-            onChange={event => searchUpdated(event.target.value)}
-            ref={this.searchInput}
-          />
-          <span onClick={closeContactsForm} className={styles.closeIcon}>
-            <Isvg src={x} />
-          </span>
-        </header>
-
-        <section className={styles.nodes}>
-          <ul className={styles.networkResults}>
-            {filteredNetworkNodes.map(node => (
-              <li key={node.pub_key}>
-                <section>
-                  {node.alias.length > 0 ? (
-                    <h2>
-                      <span>{node.alias.trim()}</span>
-                      <span>
-                        ({node.pub_key.substr(0, 10)}
-                        ...
-                        {node.pub_key.substr(node.pub_key.length - 10)})
-                      </span>
-                    </h2>
-                  ) : (
-                    <h2>
-                      <span>{node.pub_key}</span>
-                    </h2>
-                  )}
-                </section>
-                <section>{renderRightSide(node)}</section>
-              </li>
-            ))}
-          </ul>
-        </section>
-
-        {showManualForm && (
-          <section className={styles.manualForm}>
-            <p>
-              Hm, looks like we can&apos;t see that node from here, wanna try to manually connect?
-            </p>
-            <div className={styles.manualConnectButton} onClick={openManualForm}>
-              Connect Manually
-            </div>
-          </section>
-        )}
-      </div>
-    )
-  }
-}
-
-AddChannel.propTypes = {
-  contactsform: PropTypes.object.isRequired,
-  closeContactsForm: PropTypes.func.isRequired,
-  openSubmitChannelForm: PropTypes.func.isRequired,
-  updateContactFormSearchQuery: PropTypes.func.isRequired,
-  updateManualFormSearchQuery: PropTypes.func.isRequired,
-  setNode: PropTypes.func.isRequired,
-  activeChannelPubkeys: PropTypes.array.isRequired,
-  nonActiveChannelPubkeys: PropTypes.array.isRequired,
-  pendingOpenChannelPubkeys: PropTypes.array.isRequired,
-  filteredNetworkNodes: PropTypes.array.isRequired,
-  loadingChannelPubkeys: PropTypes.array.isRequired,
-  showManualForm: PropTypes.bool.isRequired,
-  openManualForm: PropTypes.func.isRequired
-}
-
-export default AddChannel
diff --git a/app/components/Contacts/AddChannel/AddChannel.js b/app/components/Contacts/AddChannel/AddChannel.js
new file mode 100644
index 00000000..351910f4
--- /dev/null
+++ b/app/components/Contacts/AddChannel/AddChannel.js
@@ -0,0 +1,158 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Isvg from 'react-inlinesvg'
+
+import x from 'icons/x.svg'
+
+import styles from './AddChannel.scss'
+
+const AddChannel = ({
+  contactsform,
+  closeContactsForm,
+  openSubmitChannelForm,
+  updateContactFormSearchQuery,
+  updateManualFormSearchQuery,
+  setNode,
+  activeChannelPubkeys,
+  nonActiveChannelPubkeys,
+  pendingOpenChannelPubkeys,
+  filteredNetworkNodes,
+  loadingChannelPubkeys,
+  showManualForm,
+  openManualForm
+}) => {
+  const renderRightSide = node => {
+    if (loadingChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={styles.inactive}>
+          <div className={styles.loading}>
+            <div className={styles.spinner} />
+          </div>
+        </span>
+      )
+    }
+
+    if (activeChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.online} ${styles.inactive}`}>
+          <span>Online</span>
+        </span>
+      )
+    }
+
+    if (nonActiveChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.offline} ${styles.inactive}`}>
+          <span>Offline</span>
+        </span>
+      )
+    }
+
+    if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.pending} ${styles.inactive}`}>
+          <span>Pending</span>
+        </span>
+      )
+    }
+
+    if (!node.addresses.length) {
+      return <span className={`${styles.private} ${styles.inactive}`}>Private</span>
+    }
+
+    return (
+      <span
+        className={styles.connect}
+        onClick={() => {
+          // set the node public key for the submit form
+          setNode(node)
+          // open the submit form
+          openSubmitChannelForm()
+        }}
+      >
+        Connect
+      </span>
+    )
+  }
+
+  const searchUpdated = search => {
+    updateContactFormSearchQuery(search)
+
+    if (search.includes('@') && search.split('@')[0].length === 66) {
+      updateManualFormSearchQuery(search)
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <input
+          type="text"
+          placeholder="Search the network..."
+          className={styles.searchInput}
+          value={contactsform.searchQuery}
+          onChange={event => searchUpdated(event.target.value)}
+          // ref={input => input && input.focus()}
+        />
+        <span onClick={closeContactsForm} className={styles.closeIcon}>
+          <Isvg src={x} />
+        </span>
+      </header>
+
+      <section className={styles.nodes}>
+        <ul className={styles.networkResults}>
+          {filteredNetworkNodes.map(node => (
+            <li key={node.pub_key}>
+              <section>
+                {node.alias.length > 0 ? (
+                  <h2>
+                    <span>{node.alias.trim()}</span>
+                    <span>
+                      ({node.pub_key.substr(0, 10)}
+                      ...
+                      {node.pub_key.substr(node.pub_key.length - 10)})
+                    </span>
+                  </h2>
+                ) : (
+                  <h2>
+                    <span>{node.pub_key}</span>
+                  </h2>
+                )}
+              </section>
+              <section>{renderRightSide(node)}</section>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      {showManualForm && (
+        <section className={styles.manualForm}>
+          <p>
+            Hm, looks like we can&apos;t see that node from here, wanna try to manually connect?
+          </p>
+          <div className={styles.manualConnectButton} onClick={openManualForm}>
+            Connect Manually
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}
+
+AddChannel.propTypes = {
+  contactsform: PropTypes.object.isRequired,
+  closeContactsForm: PropTypes.func.isRequired,
+  openSubmitChannelForm: PropTypes.func.isRequired,
+  updateContactFormSearchQuery: PropTypes.func.isRequired,
+  updateManualFormSearchQuery: PropTypes.func.isRequired,
+  setNode: PropTypes.func.isRequired,
+  activeChannelPubkeys: PropTypes.array.isRequired,
+  nonActiveChannelPubkeys: PropTypes.array.isRequired,
+  pendingOpenChannelPubkeys: PropTypes.array.isRequired,
+  filteredNetworkNodes: PropTypes.array.isRequired,
+  loadingChannelPubkeys: PropTypes.array.isRequired,
+  showManualForm: PropTypes.bool.isRequired,
+  openManualForm: PropTypes.func.isRequired
+}
+
+export default AddChannel
diff --git a/app/components/Contacts/AddChannel.scss b/app/components/Contacts/AddChannel/AddChannel.scss
similarity index 98%
rename from app/components/Contacts/AddChannel.scss
rename to app/components/Contacts/AddChannel/AddChannel.scss
index ef03e89f..b5647d9b 100644
--- a/app/components/Contacts/AddChannel.scss
+++ b/app/components/Contacts/AddChannel/AddChannel.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;
diff --git a/app/components/Contacts/AddChannel/index.js b/app/components/Contacts/AddChannel/index.js
new file mode 100644
index 00000000..d3909244
--- /dev/null
+++ b/app/components/Contacts/AddChannel/index.js
@@ -0,0 +1,3 @@
+import AddChannel from './AddChannel'
+
+export default AddChannel
diff --git a/app/components/Contacts/ChannelForm.js b/app/components/Contacts/ChannelForm/ChannelForm.js
similarity index 88%
rename from app/components/Contacts/ChannelForm.js
rename to app/components/Contacts/ChannelForm/ChannelForm.js
index d90c975a..bf35022a 100644
--- a/app/components/Contacts/ChannelForm.js
+++ b/app/components/Contacts/ChannelForm/ChannelForm.js
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
 import x from 'icons/x.svg'
 
-import ConnectManually from './ConnectManually'
-import SubmitChannelForm from './SubmitChannelForm'
+import ConnectManually from '../ConnectManually'
+import SubmitChannelForm from '../SubmitChannelForm'
 
 import styles from './ChannelForm.scss'
 
diff --git a/app/components/Contacts/ChannelForm.scss b/app/components/Contacts/ChannelForm/ChannelForm.scss
similarity index 88%
rename from app/components/Contacts/ChannelForm.scss
rename to app/components/Contacts/ChannelForm/ChannelForm.scss
index 296be11d..5c3b7dd2 100644
--- a/app/components/Contacts/ChannelForm.scss
+++ b/app/components/Contacts/ChannelForm/ChannelForm.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: absolute;
diff --git a/app/components/Contacts/ChannelForm/index.js b/app/components/Contacts/ChannelForm/index.js
new file mode 100644
index 00000000..a30b36cb
--- /dev/null
+++ b/app/components/Contacts/ChannelForm/index.js
@@ -0,0 +1,3 @@
+import ChannelForm from './ChannelForm'
+
+export default ChannelForm
diff --git a/app/components/Contacts/ConnectManually.js b/app/components/Contacts/ConnectManually/ConnectManually.js
similarity index 100%
rename from app/components/Contacts/ConnectManually.js
rename to app/components/Contacts/ConnectManually/ConnectManually.js
diff --git a/app/components/Contacts/ConnectManually.scss b/app/components/Contacts/ConnectManually/ConnectManually.scss
similarity index 97%
rename from app/components/Contacts/ConnectManually.scss
rename to app/components/Contacts/ConnectManually/ConnectManually.scss
index 4724ac86..09ce4eb3 100644
--- a/app/components/Contacts/ConnectManually.scss
+++ b/app/components/Contacts/ConnectManually/ConnectManually.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: absolute;
diff --git a/app/components/Contacts/ConnectManually/index.js b/app/components/Contacts/ConnectManually/index.js
new file mode 100644
index 00000000..0b2b6ac6
--- /dev/null
+++ b/app/components/Contacts/ConnectManually/index.js
@@ -0,0 +1,3 @@
+import ConnectManually from './ConnectManually'
+
+export default ConnectManually
diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal/ContactModal.js
similarity index 100%
rename from app/components/Contacts/ContactModal.js
rename to app/components/Contacts/ContactModal/ContactModal.js
diff --git a/app/components/Contacts/ContactModal.scss b/app/components/Contacts/ContactModal/ContactModal.scss
similarity index 98%
rename from app/components/Contacts/ContactModal.scss
rename to app/components/Contacts/ContactModal/ContactModal.scss
index 1c444197..d3456738 100644
--- a/app/components/Contacts/ContactModal.scss
+++ b/app/components/Contacts/ContactModal/ContactModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .header {
   display: flex;
diff --git a/app/components/Contacts/ContactModal/index.js b/app/components/Contacts/ContactModal/index.js
new file mode 100644
index 00000000..9f666605
--- /dev/null
+++ b/app/components/Contacts/ContactModal/index.js
@@ -0,0 +1,3 @@
+import ContactModal from './ContactModal'
+
+export default ContactModal
diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm/ContactsForm.js
similarity index 100%
rename from app/components/Contacts/ContactsForm.js
rename to app/components/Contacts/ContactsForm/ContactsForm.js
diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm/ContactsForm.scss
similarity index 99%
rename from app/components/Contacts/ContactsForm.scss
rename to app/components/Contacts/ContactsForm/ContactsForm.scss
index cd2cd731..5f05729a 100644
--- a/app/components/Contacts/ContactsForm.scss
+++ b/app/components/Contacts/ContactsForm/ContactsForm.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .modal {
   position: absolute;
diff --git a/app/components/Contacts/ContactsForm/index.js b/app/components/Contacts/ContactsForm/index.js
new file mode 100644
index 00000000..27e6f157
--- /dev/null
+++ b/app/components/Contacts/ContactsForm/index.js
@@ -0,0 +1,3 @@
+import ContactsForm from './ContactsForm'
+
+export default ContactsForm
diff --git a/app/components/Contacts/Network.js b/app/components/Contacts/Network/Network.js
similarity index 99%
rename from app/components/Contacts/Network.js
rename to app/components/Contacts/Network/Network.js
index 839cf518..a33f61ae 100644
--- a/app/components/Contacts/Network.js
+++ b/app/components/Contacts/Network/Network.js
@@ -10,7 +10,7 @@ import plus from 'icons/plus.svg'
 import search from 'icons/search.svg'
 
 import Value from 'components/Value'
-import SuggestedNodes from './SuggestedNodes'
+import SuggestedNodes from '../SuggestedNodes'
 
 import styles from './Network.scss'
 
diff --git a/app/components/Contacts/Network.scss b/app/components/Contacts/Network/Network.scss
similarity index 99%
rename from app/components/Contacts/Network.scss
rename to app/components/Contacts/Network/Network.scss
index cfada152..3e41f902 100644
--- a/app/components/Contacts/Network.scss
+++ b/app/components/Contacts/Network/Network.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .network {
   position: relative;
diff --git a/app/components/Contacts/Network/index.js b/app/components/Contacts/Network/index.js
new file mode 100644
index 00000000..a3d771b5
--- /dev/null
+++ b/app/components/Contacts/Network/index.js
@@ -0,0 +1,3 @@
+import Network from './Network'
+
+export default Network
diff --git a/app/components/Contacts/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js
similarity index 100%
rename from app/components/Contacts/SubmitChannelForm.js
rename to app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js
diff --git a/app/components/Contacts/SubmitChannelForm.scss b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss
similarity index 98%
rename from app/components/Contacts/SubmitChannelForm.scss
rename to app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss
index 3880b52c..260518af 100644
--- a/app/components/Contacts/SubmitChannelForm.scss
+++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .content {
   padding: 0 40px;
diff --git a/app/components/Contacts/SubmitChannelForm/index.js b/app/components/Contacts/SubmitChannelForm/index.js
new file mode 100644
index 00000000..ff471f69
--- /dev/null
+++ b/app/components/Contacts/SubmitChannelForm/index.js
@@ -0,0 +1,3 @@
+import SubmitChannelForm from './SubmitChannelForm'
+
+export default SubmitChannelForm
diff --git a/app/components/Contacts/SuggestedNodes.js b/app/components/Contacts/SuggestedNodes/SuggestedNodes.js
similarity index 100%
rename from app/components/Contacts/SuggestedNodes.js
rename to app/components/Contacts/SuggestedNodes/SuggestedNodes.js
diff --git a/app/components/Contacts/SuggestedNodes.scss b/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss
similarity index 97%
rename from app/components/Contacts/SuggestedNodes.scss
rename to app/components/Contacts/SuggestedNodes/SuggestedNodes.scss
index a273a6d4..c4a73367 100644
--- a/app/components/Contacts/SuggestedNodes.scss
+++ b/app/components/Contacts/SuggestedNodes/SuggestedNodes.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Contacts/SuggestedNodes/index.js b/app/components/Contacts/SuggestedNodes/index.js
new file mode 100644
index 00000000..44a77731
--- /dev/null
+++ b/app/components/Contacts/SuggestedNodes/index.js
@@ -0,0 +1,3 @@
+import SuggestedNodes from './SuggestedNodes'
+
+export default SuggestedNodes
diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay/Pay.js
similarity index 100%
rename from app/components/Form/Pay.js
rename to app/components/Form/Pay/Pay.js
diff --git a/app/components/Form/Pay.scss b/app/components/Form/Pay/Pay.scss
similarity index 98%
rename from app/components/Form/Pay.scss
rename to app/components/Form/Pay/Pay.scss
index cb9c5f4b..4181ceec 100644
--- a/app/components/Form/Pay.scss
+++ b/app/components/Form/Pay/Pay.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   padding: 0 40px;
diff --git a/app/components/Form/Pay/index.js b/app/components/Form/Pay/index.js
new file mode 100644
index 00000000..89680350
--- /dev/null
+++ b/app/components/Form/Pay/index.js
@@ -0,0 +1,3 @@
+import Pay from './Pay'
+
+export default Pay
diff --git a/app/components/Form/Request.js b/app/components/Form/Request.js
deleted file mode 100644
index a8b9553e..00000000
--- a/app/components/Form/Request.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import Isvg from 'react-inlinesvg'
-import hand from 'icons/hand.svg'
-import FaAngleDown from 'react-icons/lib/fa/angle-down'
-
-import { btc } from 'lib/utils'
-import AmountInput from 'components/AmountInput'
-import styles from './Request.scss'
-
-class Request extends Component {
-  constructor(props) {
-    super(props)
-    this.amountInput = React.createRef()
-  }
-
-  componentDidMount() {
-    const { setRequestMemo, setRequestAmount } = this.props
-
-    // Clear the form of any previous data.
-    setRequestMemo('')
-    setRequestAmount('')
-
-    // Focus the amount input field.
-    this.amountInput.current.focusTextInput()
-  }
-
-  render() {
-    const {
-      requestform: { amount, memo, showCurrencyFilters },
-      ticker,
-
-      setRequestAmount,
-      setRequestMemo,
-      setCurrency,
-      setRequestCurrencyFilters,
-      currencyName,
-      requestFiatAmount,
-
-      currentCurrencyFilters,
-
-      onRequestSubmit
-    } = this.props
-
-    const onCurrencyFilterClick = currency => {
-      // change the input amount
-      setRequestAmount(btc.convert(ticker.currency, currency, amount))
-
-      setCurrency(currency)
-      setRequestCurrencyFilters(false)
-    }
-
-    return (
-      <div className={styles.container}>
-        <header className={styles.header}>
-          <Isvg src={hand} />
-          <h1>Request Payment</h1>
-        </header>
-
-        <div className={styles.content}>
-          <section className={styles.amount}>
-            <div className={styles.top}>
-              <label htmlFor="amount">Amount</label>
-              <span />
-            </div>
-            <div className={styles.bottom}>
-              <AmountInput
-                id="amount"
-                amount={amount}
-                currency={ticker.currency}
-                onChangeEvent={setRequestAmount}
-                ref={this.amountInput}
-              />
-              <div className={styles.currency}>
-                <section
-                  className={styles.currentCurrency}
-                  onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
-                >
-                  <span>{currencyName}</span>
-                  <span>
-                    <FaAngleDown />
-                  </span>
-                </section>
-                <ul className={showCurrencyFilters ? styles.active : undefined}>
-                  {currentCurrencyFilters.map(filter => (
-                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-                      {filter.name}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-
-            <div className={styles.fiatAmount}>{`≈ ${requestFiatAmount || 0} ${
-              ticker.fiatTicker
-            }`}</div>
-          </section>
-
-          <section className={styles.memo}>
-            <div className={styles.top}>
-              <label htmlFor="memo">Memo</label>
-            </div>
-            <div className={styles.bottom}>
-              <input
-                type="text"
-                placeholder="Details about the request"
-                value={memo}
-                onChange={event => setRequestMemo(event.target.value)}
-                id="memo"
-              />
-            </div>
-          </section>
-
-          <section className={styles.submit}>
-            <div
-              className={`${styles.button} ${amount > 0 ? styles.active : undefined}`}
-              onClick={onRequestSubmit}
-            >
-              Request
-            </div>
-          </section>
-        </div>
-      </div>
-    )
-  }
-}
-
-Request.propTypes = {
-  requestform: PropTypes.shape({
-    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    memo: PropTypes.string
-  }).isRequired,
-
-  requestFiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  currencyName: PropTypes.string.isRequired,
-
-  currentCurrencyFilters: PropTypes.array.isRequired,
-
-  setRequestAmount: PropTypes.func.isRequired,
-  setRequestMemo: PropTypes.func.isRequired,
-  onRequestSubmit: PropTypes.func.isRequired,
-  setCurrency: PropTypes.func.isRequired,
-  setRequestCurrencyFilters: PropTypes.func.isRequired,
-
-  ticker: PropTypes.object.isRequired
-}
-
-export default Request
diff --git a/app/components/Form/Request/Request.js b/app/components/Form/Request/Request.js
new file mode 100644
index 00000000..82488a90
--- /dev/null
+++ b/app/components/Form/Request/Request.js
@@ -0,0 +1,128 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Isvg from 'react-inlinesvg'
+import hand from 'icons/hand.svg'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
+
+import { btc } from 'lib/utils'
+import AmountInput from 'components/AmountInput'
+import styles from './Request.scss'
+
+const Request = ({
+  requestform: { amount, memo, showCurrencyFilters },
+  ticker,
+
+  setRequestAmount,
+  setRequestMemo,
+  setCurrency,
+  setRequestCurrencyFilters,
+  currencyName,
+  requestFiatAmount,
+
+  currentCurrencyFilters,
+
+  onRequestSubmit
+}) => {
+  const onCurrencyFilterClick = currency => {
+    // change the input amount
+    setRequestAmount(btc.convert(ticker.currency, currency, amount))
+
+    setCurrency(currency)
+    setRequestCurrencyFilters(false)
+  }
+
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <Isvg src={hand} />
+        <h1>Request Payment</h1>
+      </header>
+
+      <div className={styles.content}>
+        <section className={styles.amount}>
+          <div className={styles.top}>
+            <label htmlFor="amount">Amount</label>
+            <span />
+          </div>
+          <div className={styles.bottom}>
+            <AmountInput
+              id="amount"
+              amount={amount}
+              currency={ticker.currency}
+              onChangeEvent={setRequestAmount}
+            />
+            <div className={styles.currency}>
+              <section
+                className={styles.currentCurrency}
+                onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
+              >
+                <span>{currencyName}</span>
+                <span>
+                  <FaAngleDown />
+                </span>
+              </section>
+              <ul className={showCurrencyFilters ? styles.active : undefined}>
+                {currentCurrencyFilters.map(filter => (
+                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
+                    {filter.name}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div className={styles.fiatAmount}>{`≈ ${requestFiatAmount || 0} ${
+            ticker.fiatTicker
+          }`}</div>
+        </section>
+
+        <section className={styles.memo}>
+          <div className={styles.top}>
+            <label htmlFor="memo">Memo</label>
+          </div>
+          <div className={styles.bottom}>
+            <input
+              type="text"
+              placeholder="Details about the request"
+              value={memo}
+              onChange={event => setRequestMemo(event.target.value)}
+              id="memo"
+            />
+          </div>
+        </section>
+
+        <section className={styles.submit}>
+          <div
+            className={`${styles.button} ${amount > 0 ? styles.active : undefined}`}
+            onClick={onRequestSubmit}
+          >
+            Request
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}
+
+Request.propTypes = {
+  requestform: PropTypes.shape({
+    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    memo: PropTypes.string
+  }).isRequired,
+
+  requestFiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  currencyName: PropTypes.string.isRequired,
+
+  currentCurrencyFilters: PropTypes.array.isRequired,
+
+  setRequestAmount: PropTypes.func.isRequired,
+  setRequestMemo: PropTypes.func.isRequired,
+  onRequestSubmit: PropTypes.func.isRequired,
+  setCurrency: PropTypes.func.isRequired,
+  setRequestCurrencyFilters: PropTypes.func.isRequired,
+
+  ticker: PropTypes.object.isRequired
+}
+
+export default Request
diff --git a/app/components/Form/Request.scss b/app/components/Form/Request/Request.scss
similarity index 98%
rename from app/components/Form/Request.scss
rename to app/components/Form/Request/Request.scss
index b5627902..3b88bc05 100644
--- a/app/components/Form/Request.scss
+++ b/app/components/Form/Request/Request.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   padding: 0 40px;
diff --git a/app/components/Form/Request/index.js b/app/components/Form/Request/index.js
new file mode 100644
index 00000000..29b01605
--- /dev/null
+++ b/app/components/Form/Request/index.js
@@ -0,0 +1,3 @@
+import Request from './Request'
+
+export default Request
diff --git a/app/components/Onboarding/Alias.js b/app/components/Onboarding/Alias/Alias.js
similarity index 100%
rename from app/components/Onboarding/Alias.js
rename to app/components/Onboarding/Alias/Alias.js
diff --git a/app/components/Onboarding/Alias.scss b/app/components/Onboarding/Alias/Alias.scss
similarity index 87%
rename from app/components/Onboarding/Alias.scss
rename to app/components/Onboarding/Alias/Alias.scss
index 8763fbb2..45722e2a 100644
--- a/app/components/Onboarding/Alias.scss
+++ b/app/components/Onboarding/Alias/Alias.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .alias {
   background: transparent;
diff --git a/app/components/Onboarding/Alias/index.js b/app/components/Onboarding/Alias/index.js
new file mode 100644
index 00000000..d0cfd152
--- /dev/null
+++ b/app/components/Onboarding/Alias/index.js
@@ -0,0 +1,3 @@
+import Alias from './Alias'
+
+export default Alias
diff --git a/app/components/Onboarding/Autopilot.js b/app/components/Onboarding/Autopilot/Autopilot.js
similarity index 100%
rename from app/components/Onboarding/Autopilot.js
rename to app/components/Onboarding/Autopilot/Autopilot.js
diff --git a/app/components/Onboarding/Autopilot.scss b/app/components/Onboarding/Autopilot/Autopilot.scss
similarity index 95%
rename from app/components/Onboarding/Autopilot.scss
rename to app/components/Onboarding/Autopilot/Autopilot.scss
index b64c47a7..41049686 100644
--- a/app/components/Onboarding/Autopilot.scss
+++ b/app/components/Onboarding/Autopilot/Autopilot.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Onboarding/Autopilot/index.js b/app/components/Onboarding/Autopilot/index.js
new file mode 100644
index 00000000..576d33b8
--- /dev/null
+++ b/app/components/Onboarding/Autopilot/index.js
@@ -0,0 +1,3 @@
+import Autopilot from './Autopilot'
+
+export default Autopilot
diff --git a/app/components/Onboarding/BtcPayServer.js b/app/components/Onboarding/BtcPayServer/BtcPayServer.js
similarity index 100%
rename from app/components/Onboarding/BtcPayServer.js
rename to app/components/Onboarding/BtcPayServer/BtcPayServer.js
diff --git a/app/components/Onboarding/BtcPayServer.scss b/app/components/Onboarding/BtcPayServer/BtcPayServer.scss
similarity index 95%
rename from app/components/Onboarding/BtcPayServer.scss
rename to app/components/Onboarding/BtcPayServer/BtcPayServer.scss
index 964ee3e1..1a91e4cd 100644
--- a/app/components/Onboarding/BtcPayServer.scss
+++ b/app/components/Onboarding/BtcPayServer/BtcPayServer.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Onboarding/BtcPayServer/index.js b/app/components/Onboarding/BtcPayServer/index.js
new file mode 100644
index 00000000..582f7754
--- /dev/null
+++ b/app/components/Onboarding/BtcPayServer/index.js
@@ -0,0 +1,3 @@
+import BtcPayServer from './BtcPayServer'
+
+export default BtcPayServer
diff --git a/app/components/Onboarding/ConnectionConfirm.js b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.js
similarity index 100%
rename from app/components/Onboarding/ConnectionConfirm.js
rename to app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.js
diff --git a/app/components/Onboarding/ConnectionConfirm.scss b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss
similarity index 77%
rename from app/components/Onboarding/ConnectionConfirm.scss
rename to app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss
index dd1d54d8..71efe1ff 100644
--- a/app/components/Onboarding/ConnectionConfirm.scss
+++ b/app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Onboarding/ConnectionConfirm/index.js b/app/components/Onboarding/ConnectionConfirm/index.js
new file mode 100644
index 00000000..fe5c15d3
--- /dev/null
+++ b/app/components/Onboarding/ConnectionConfirm/index.js
@@ -0,0 +1,3 @@
+import ConnectionConfirm from './ConnectionConfirm'
+
+export default ConnectionConfirm
diff --git a/app/components/Onboarding/ConnectionDetails.js b/app/components/Onboarding/ConnectionDetails/ConnectionDetails.js
similarity index 100%
rename from app/components/Onboarding/ConnectionDetails.js
rename to app/components/Onboarding/ConnectionDetails/ConnectionDetails.js
diff --git a/app/components/Onboarding/ConnectionDetails.scss b/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss
similarity index 95%
rename from app/components/Onboarding/ConnectionDetails.scss
rename to app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss
index 83423449..62b3c47e 100644
--- a/app/components/Onboarding/ConnectionDetails.scss
+++ b/app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Onboarding/ConnectionDetails/index.js b/app/components/Onboarding/ConnectionDetails/index.js
new file mode 100644
index 00000000..780beb4e
--- /dev/null
+++ b/app/components/Onboarding/ConnectionDetails/index.js
@@ -0,0 +1,3 @@
+import ConnectionDetails from './ConnectionDetails'
+
+export default ConnectionDetails
diff --git a/app/components/Onboarding/ConnectionType.js b/app/components/Onboarding/ConnectionType/ConnectionType.js
similarity index 100%
rename from app/components/Onboarding/ConnectionType.js
rename to app/components/Onboarding/ConnectionType/ConnectionType.js
diff --git a/app/components/Onboarding/ConnectionType.scss b/app/components/Onboarding/ConnectionType/ConnectionType.scss
similarity index 95%
rename from app/components/Onboarding/ConnectionType.scss
rename to app/components/Onboarding/ConnectionType/ConnectionType.scss
index 69d95a2e..ebbd3497 100644
--- a/app/components/Onboarding/ConnectionType.scss
+++ b/app/components/Onboarding/ConnectionType/ConnectionType.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Onboarding/ConnectionType/index.js b/app/components/Onboarding/ConnectionType/index.js
new file mode 100644
index 00000000..904ab309
--- /dev/null
+++ b/app/components/Onboarding/ConnectionType/index.js
@@ -0,0 +1,3 @@
+import ConnectionType from './ConnectionType'
+
+export default ConnectionType
diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer/FormContainer.js
similarity index 100%
rename from app/components/Onboarding/FormContainer.js
rename to app/components/Onboarding/FormContainer/FormContainer.js
diff --git a/app/components/Onboarding/FormContainer.scss b/app/components/Onboarding/FormContainer/FormContainer.scss
similarity index 97%
rename from app/components/Onboarding/FormContainer.scss
rename to app/components/Onboarding/FormContainer/FormContainer.scss
index 9030b983..795990af 100644
--- a/app/components/Onboarding/FormContainer.scss
+++ b/app/components/Onboarding/FormContainer/FormContainer.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;
diff --git a/app/components/Onboarding/FormContainer/index.js b/app/components/Onboarding/FormContainer/index.js
new file mode 100644
index 00000000..8007e06d
--- /dev/null
+++ b/app/components/Onboarding/FormContainer/index.js
@@ -0,0 +1,3 @@
+import FormContainer from './FormContainer'
+
+export default FormContainer
diff --git a/app/components/Onboarding/InitWallet.js b/app/components/Onboarding/InitWallet/InitWallet.js
similarity index 82%
rename from app/components/Onboarding/InitWallet.js
rename to app/components/Onboarding/InitWallet/InitWallet.js
index 271d2adb..dccbd4a0 100644
--- a/app/components/Onboarding/InitWallet.js
+++ b/app/components/Onboarding/InitWallet/InitWallet.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Login from './Login'
-import Signup from './Signup'
+import Signup from 'components/Onboarding/Signup'
+import Login from 'components/Onboarding/Login'
 import styles from './InitWallet.scss'
 
 const InitWallet = ({ hasSeed, loginProps, signupProps }) => (
diff --git a/app/components/Onboarding/InitWallet.scss b/app/components/Onboarding/InitWallet/InitWallet.scss
similarity index 96%
rename from app/components/Onboarding/InitWallet.scss
rename to app/components/Onboarding/InitWallet/InitWallet.scss
index e11bc81a..9abc997e 100644
--- a/app/components/Onboarding/InitWallet.scss
+++ b/app/components/Onboarding/InitWallet/InitWallet.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;
diff --git a/app/components/Onboarding/InitWallet/index.js b/app/components/Onboarding/InitWallet/index.js
new file mode 100644
index 00000000..1c0a98e0
--- /dev/null
+++ b/app/components/Onboarding/InitWallet/index.js
@@ -0,0 +1,3 @@
+import InitWallet from './InitWallet'
+
+export default InitWallet
diff --git a/app/components/Onboarding/Login.js b/app/components/Onboarding/Login/Login.js
similarity index 100%
rename from app/components/Onboarding/Login.js
rename to app/components/Onboarding/Login/Login.js
diff --git a/app/components/Onboarding/Login.scss b/app/components/Onboarding/Login/Login.scss
similarity index 98%
rename from app/components/Onboarding/Login.scss
rename to app/components/Onboarding/Login/Login.scss
index 84f9b2af..2c796a34 100644
--- a/app/components/Onboarding/Login.scss
+++ b/app/components/Onboarding/Login/Login.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;
diff --git a/app/components/Onboarding/Login/index.js b/app/components/Onboarding/Login/index.js
new file mode 100644
index 00000000..393a6df4
--- /dev/null
+++ b/app/components/Onboarding/Login/index.js
@@ -0,0 +1,3 @@
+import Login from './Login'
+
+export default Login
diff --git a/app/components/Onboarding/NewWalletPassword.js b/app/components/Onboarding/NewWalletPassword/NewWalletPassword.js
similarity index 100%
rename from app/components/Onboarding/NewWalletPassword.js
rename to app/components/Onboarding/NewWalletPassword/NewWalletPassword.js
diff --git a/app/components/Onboarding/NewWalletPassword.scss b/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss
similarity index 94%
rename from app/components/Onboarding/NewWalletPassword.scss
rename to app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss
index 51e6ed41..fc16b464 100644
--- a/app/components/Onboarding/NewWalletPassword.scss
+++ b/app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .input:nth-child(2) {
   margin-top: 30px;
diff --git a/app/components/Onboarding/NewWalletPassword/index.js b/app/components/Onboarding/NewWalletPassword/index.js
new file mode 100644
index 00000000..fa9aa5d7
--- /dev/null
+++ b/app/components/Onboarding/NewWalletPassword/index.js
@@ -0,0 +1,3 @@
+import NewWalletPassword from './NewWalletPassword'
+
+export default NewWalletPassword
diff --git a/app/components/Onboarding/NewWalletSeed.js b/app/components/Onboarding/NewWalletSeed/NewWalletSeed.js
similarity index 100%
rename from app/components/Onboarding/NewWalletSeed.js
rename to app/components/Onboarding/NewWalletSeed/NewWalletSeed.js
diff --git a/app/components/Onboarding/NewWalletSeed.scss b/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss
similarity index 94%
rename from app/components/Onboarding/NewWalletSeed.scss
rename to app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss
index 6a76d5d2..5f66edbf 100644
--- a/app/components/Onboarding/NewWalletSeed.scss
+++ b/app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   font-size: 14px;
diff --git a/app/components/Onboarding/NewWalletSeed/index.js b/app/components/Onboarding/NewWalletSeed/index.js
new file mode 100644
index 00000000..a9861ec7
--- /dev/null
+++ b/app/components/Onboarding/NewWalletSeed/index.js
@@ -0,0 +1,3 @@
+import NewWalletSeed from './NewWalletSeed'
+
+export default NewWalletSeed
diff --git a/app/components/Onboarding/ReEnterSeed.js b/app/components/Onboarding/ReEnterSeed/ReEnterSeed.js
similarity index 100%
rename from app/components/Onboarding/ReEnterSeed.js
rename to app/components/Onboarding/ReEnterSeed/ReEnterSeed.js
diff --git a/app/components/Onboarding/ReEnterSeed.scss b/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss
similarity index 95%
rename from app/components/Onboarding/ReEnterSeed.scss
rename to app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss
index 955e7eb4..51157ccf 100644
--- a/app/components/Onboarding/ReEnterSeed.scss
+++ b/app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .seedContainer {
   display: flex;
diff --git a/app/components/Onboarding/ReEnterSeed/index.js b/app/components/Onboarding/ReEnterSeed/index.js
new file mode 100644
index 00000000..cac4ae9b
--- /dev/null
+++ b/app/components/Onboarding/ReEnterSeed/index.js
@@ -0,0 +1,3 @@
+import ReEnterSeed from './ReEnterSeed'
+
+export default ReEnterSeed
diff --git a/app/components/Onboarding/RecoverForm.js b/app/components/Onboarding/RecoverForm/RecoverForm.js
similarity index 100%
rename from app/components/Onboarding/RecoverForm.js
rename to app/components/Onboarding/RecoverForm/RecoverForm.js
diff --git a/app/components/Onboarding/RecoverForm.scss b/app/components/Onboarding/RecoverForm/RecoverForm.scss
similarity index 95%
rename from app/components/Onboarding/RecoverForm.scss
rename to app/components/Onboarding/RecoverForm/RecoverForm.scss
index 06eb208d..066b630d 100644
--- a/app/components/Onboarding/RecoverForm.scss
+++ b/app/components/Onboarding/RecoverForm/RecoverForm.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .seedContainer {
   position: relative;
diff --git a/app/components/Onboarding/RecoverForm/index.js b/app/components/Onboarding/RecoverForm/index.js
new file mode 100644
index 00000000..ce3c455f
--- /dev/null
+++ b/app/components/Onboarding/RecoverForm/index.js
@@ -0,0 +1,3 @@
+import RecoverForm from './RecoverForm'
+
+export default RecoverForm
diff --git a/app/components/Onboarding/Signup.js b/app/components/Onboarding/Signup/Signup.js
similarity index 100%
rename from app/components/Onboarding/Signup.js
rename to app/components/Onboarding/Signup/Signup.js
diff --git a/app/components/Onboarding/Signup.scss b/app/components/Onboarding/Signup/Signup.scss
similarity index 94%
rename from app/components/Onboarding/Signup.scss
rename to app/components/Onboarding/Signup/Signup.scss
index 1fe342ae..7260cf0b 100644
--- a/app/components/Onboarding/Signup.scss
+++ b/app/components/Onboarding/Signup/Signup.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;
diff --git a/app/components/Onboarding/Signup/index.js b/app/components/Onboarding/Signup/index.js
new file mode 100644
index 00000000..68786149
--- /dev/null
+++ b/app/components/Onboarding/Signup/index.js
@@ -0,0 +1,3 @@
+import Signup from './Signup'
+
+export default Signup
diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing/Syncing.js
similarity index 100%
rename from app/components/Onboarding/Syncing.js
rename to app/components/Onboarding/Syncing/Syncing.js
diff --git a/app/components/Onboarding/Syncing.scss b/app/components/Onboarding/Syncing/Syncing.scss
similarity index 98%
rename from app/components/Onboarding/Syncing.scss
rename to app/components/Onboarding/Syncing/Syncing.scss
index 83710ab3..6d28a538 100644
--- a/app/components/Onboarding/Syncing.scss
+++ b/app/components/Onboarding/Syncing/Syncing.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;
diff --git a/app/components/Onboarding/Syncing/index.js b/app/components/Onboarding/Syncing/index.js
new file mode 100644
index 00000000..791d5dd5
--- /dev/null
+++ b/app/components/Onboarding/Syncing/index.js
@@ -0,0 +1,3 @@
+import Syncing from './Syncing'
+
+export default Syncing
diff --git a/app/components/Settings/Fiat.js b/app/components/Settings/Fiat/Fiat.js
similarity index 100%
rename from app/components/Settings/Fiat.js
rename to app/components/Settings/Fiat/Fiat.js
diff --git a/app/components/Settings/Fiat.scss b/app/components/Settings/Fiat/Fiat.scss
similarity index 93%
rename from app/components/Settings/Fiat.scss
rename to app/components/Settings/Fiat/Fiat.scss
index 5129707a..8451f9d5 100644
--- a/app/components/Settings/Fiat.scss
+++ b/app/components/Settings/Fiat/Fiat.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .submenuHeader {
   padding: 20px;
diff --git a/app/components/Settings/Fiat/index.js b/app/components/Settings/Fiat/index.js
new file mode 100644
index 00000000..d57d0e66
--- /dev/null
+++ b/app/components/Settings/Fiat/index.js
@@ -0,0 +1,3 @@
+import Fiat from './Fiat'
+
+export default Fiat
diff --git a/app/components/Settings/Menu.js b/app/components/Settings/Menu/Menu.js
similarity index 100%
rename from app/components/Settings/Menu.js
rename to app/components/Settings/Menu/Menu.js
diff --git a/app/components/Settings/Menu.scss b/app/components/Settings/Menu/Menu.scss
similarity index 100%
rename from app/components/Settings/Menu.scss
rename to app/components/Settings/Menu/Menu.scss
diff --git a/app/components/Settings/Menu/index.js b/app/components/Settings/Menu/index.js
new file mode 100644
index 00000000..7e045e4b
--- /dev/null
+++ b/app/components/Settings/Menu/index.js
@@ -0,0 +1,3 @@
+import Menu from './Menu'
+
+export default Menu
diff --git a/app/components/Settings/index.js b/app/components/Settings/index.js
new file mode 100644
index 00000000..d04fd354
--- /dev/null
+++ b/app/components/Settings/index.js
@@ -0,0 +1,3 @@
+import Settings from './Settings'
+
+export default Settings
diff --git a/app/components/Wallet/ReceiveModal.js b/app/components/Wallet/ReceiveModal/ReceiveModal.js
similarity index 100%
rename from app/components/Wallet/ReceiveModal.js
rename to app/components/Wallet/ReceiveModal/ReceiveModal.js
diff --git a/app/components/Wallet/ReceiveModal.scss b/app/components/Wallet/ReceiveModal/ReceiveModal.scss
similarity index 97%
rename from app/components/Wallet/ReceiveModal.scss
rename to app/components/Wallet/ReceiveModal/ReceiveModal.scss
index 7f618e52..42d1a35a 100644
--- a/app/components/Wallet/ReceiveModal.scss
+++ b/app/components/Wallet/ReceiveModal/ReceiveModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;
diff --git a/app/components/Wallet/ReceiveModal/index.js b/app/components/Wallet/ReceiveModal/index.js
new file mode 100644
index 00000000..da02b8d6
--- /dev/null
+++ b/app/components/Wallet/ReceiveModal/index.js
@@ -0,0 +1,3 @@
+import ReceiveModal from './ReceiveModal'
+
+export default ReceiveModal
diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js
index 88c35211..55048987 100644
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@@ -7,7 +7,7 @@ import Isvg from 'react-inlinesvg'
 import { btc, blockExplorer } from 'lib/utils'
 import Value from 'components/Value'
 import AnimatedCheckmark from 'components/AnimatedCheckmark'
-import Settings from 'components/Settings/Settings'
+import Settings from 'components/Settings'
 
 import zapLogo from 'icons/zap_logo.svg'
 import qrCode from 'icons/qrcode.svg'