diff --git a/19-tabpanel/a-tabpanel/package-lock.json b/19-tabpanel/a-tabpanel/package-lock.json
index 5735152..ea940a9 100644
--- a/19-tabpanel/a-tabpanel/package-lock.json
+++ b/19-tabpanel/a-tabpanel/package-lock.json
@@ -5,11 +5,18 @@
   "requires": true,
   "dependencies": {
     "@fortawesome/fontawesome": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.2.tgz",
-      "integrity": "sha512-bjoRufymOEbLIBWtUhvYf53GatzDc7A4GQp5nPlW/hquIOIFi/CEgmiWARjKwJ30fWwsgyj+H1qxMfgUFJNQ4A==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.3.tgz",
+      "integrity": "sha512-zSKSJsYpV8jHUJYni6YNLN7pOcTBXG4sNVX4vXL6IJsqlwosyZm/IftWNOwbr4tbw3O1MxeY05TzYfjVB3T+QQ==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "0.1.1"
+        "@fortawesome/fontawesome-common-types": "0.1.2"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.2.tgz",
+          "integrity": "sha512-l6pzAz8wVL7Z6CD/hYN7593xogzMFfX04dwyniqDswT8whGSopSG3UMOIx7xkBFbnXTdRgi4/2tbwFXyBy2WBw=="
+        }
       }
     },
     "@fortawesome/fontawesome-common-types": {
@@ -26,11 +33,18 @@
       }
     },
     "@fortawesome/fontawesome-free-solid": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.4.tgz",
-      "integrity": "sha512-QnbWIiRQiDe7CAjyO1JFS5usgcThmxBq9mf4FnrO4Ngmi6D+f7ZklaSijTU9LtTP9ilFe9w415SF7shR+KM6NA==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.6.tgz",
+      "integrity": "sha512-vpysFybs2fWuI5RblDQX8r20vMX1Kc9yXmqoJ5RGOdRiXs105FLzJgGK1UlYf2NeECdvZ/O65Oo74oDgshpE7A==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "0.1.1"
+        "@fortawesome/fontawesome-common-types": "0.1.2"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.2.tgz",
+          "integrity": "sha512-l6pzAz8wVL7Z6CD/hYN7593xogzMFfX04dwyniqDswT8whGSopSG3UMOIx7xkBFbnXTdRgi4/2tbwFXyBy2WBw=="
+        }
       }
     },
     "@fortawesome/react-fontawesome": {
diff --git a/19-tabpanel/a-tabpanel/package.json b/19-tabpanel/a-tabpanel/package.json
index a0a6319..4979196 100644
--- a/19-tabpanel/a-tabpanel/package.json
+++ b/19-tabpanel/a-tabpanel/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome": "^1.1.2",
+    "@fortawesome/fontawesome": "^1.1.3",
     "@fortawesome/fontawesome-free-brands": "^5.0.4",
-    "@fortawesome/fontawesome-free-solid": "^5.0.4",
+    "@fortawesome/fontawesome-free-solid": "^5.0.6",
     "@fortawesome/react-fontawesome": "0.0.17",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
diff --git a/19-tabpanel/a-tabpanel/src/App.css b/19-tabpanel/a-tabpanel/src/App.css
index 76afb28..e69de29 100644
--- a/19-tabpanel/a-tabpanel/src/App.css
+++ b/19-tabpanel/a-tabpanel/src/App.css
@@ -1,83 +0,0 @@
-.tab-panel {
- display: flex;
-}
-.tab-panel.top {
- flex-direction: column;
-}
-.tab-panel.bottom {
- flex-direction: column-reverse;
-}
-.tab-panel.left {
- flex-direction: row;
-}
-.tab-panel.right {
- flex-direction: row-reverse;
-}
-
-.tab-strip {
- background-color: #e8e8e8;
- display: flex;
- justify-content: flex-start;
-}
-.tab-strip.indicator {
- justify-content: center;
-}
-.tab-panel.top .tab-strip,
-.tab-panel.bottom .tab-strip {
- flex-direction: row;
-}
-.tab-panel.left .tab-strip,
-.tab-panel.right .tab-strip {
- flex-direction: column;
-}
-
-.tab {
- text-align: center;
- cursor: pointer;
- border: 2px solid transparent;
-}
-.tab:hover {
- background-color: #d8d8d8;
-}
-.tab-panel.top .tab,
-.tab-panel.bottom .tab {
- padding: 12px 6px;
-}
-.tab-panel.left .tab,
-.tab-panel.right .tab {
- padding: 6px 12px;
-}
-.tab-panel.top .tab.active {
- border-bottom-color: #1e8bfb;
-}
-.tab-panel.left .tab.active {
- border-right-color: #1e8bfb;
-}
-.tab-panel.bottom .tab.active {
- border-top-color: #1e8bfb;
-}
-.tab-panel.right .tab.active {
- border-left-color: #1e8bfb;
-}
-.tab.active:hover {
- background-color: transparent;
-}
-.tab .fa {
- margin-right: 8px;
-}
-
-.card-ct {
- flex: 1;
- display: flex;
-}
-
-.card {
- padding: 12px;
- flex: 1 0 auto;
- display: none;
-}
-
-.card.active {
- display: block !important;
-}
-
diff --git a/19-tabpanel/a-tabpanel/src/App.js b/19-tabpanel/a-tabpanel/src/App.js
index d8b8a94..e7f545b 100644
--- a/19-tabpanel/a-tabpanel/src/App.js
+++ b/19-tabpanel/a-tabpanel/src/App.js
@@ -1,97 +1,19 @@
 import React, { Component } from 'react';
-import FontAwesome from '@fortawesome/react-fontawesome'
-import './App.css';
-import freeSolid from '@fortawesome/fontawesome-free-solid'
-
-const Tab = (props) => {
- const { tabtext, icon, activetab, cardindex, onClick } = props,
-       isActive = (activetab === cardindex) ? 'active' : '';
-  const { [icon] : iconName } = freeSolid;
-
- return (
-   <div className={`tab ${isActive}`} onClick={onClick}>
-     {icon ? <FontAwesome name={iconName} /> : ''}
-     {tabtext}
-   </div>
- );
-};
-
-class TabPanel extends Component {
- static defaultProps = {
-   activetab: 0,
-   className: '',
-   position: 'top'
- }
-
-
- constructor (props) {
-   super(props);
-   
-   this.state = {
-     activetab: props.activetab
-   }
- }
-
- render () {
-   const { children, className, position } = this.props;
-   const { activetab } = this.state;
-
-   return (
-     <div
-       {...this.props}
-       className={`${className} tab-panel ${position}`}
-     >
-       <div className={`tab-strip`}>
-         {React.Children.map(children, (child, i) =>
-           <Tab
-             onClick={this.onTabClick.bind(this, i)}
-             {...child.props}
-             cardindex={i}
-             activetab={activetab}
-           />
-         )}
-       </div>
-       <div className="card-ct">
-         {React.Children.map(children, (child, i) => {
-           const { className } = child.props,
-                 isActive = (i === activetab) ? 'active' : '',
-                 cardProps = {
-                   ...child.props,
-                  
-                   className: `${className} card ${isActive}`,
-                   cardindex: i,
-                   activetab
-                 };
-
-           return React.cloneElement(child, cardProps);
-         })}
-       </div>
-     </div>
-   );
- }
-
- onTabClick (activetab) {
-   this.setState({
-     activetab
-   });
- }
-}
+import TabPanel from './TabPanel';
 
 class App extends Component {
- render() {
-   return (
-     <TabPanel
-       style={{height: "400px", width: "600px"}}
-     >
-       <div tabtext="Home" icon="faHome">
-         Content for the first panel
-       </div>
-       <div tabtext="User" icon="faUser">
-         ... and the second panel
-       </div>
-     </TabPanel>
-   );
- }
+  render() {
+    return (
+      <TabPanel style={{ height: '400px', width: '600px' }}>
+        <div tabtext="Home" icon="Home">
+          Content for the first panel
+        </div>
+        <div tabtext="User" icon="User">
+          ... and the second panel
+        </div>
+      </TabPanel>
+    );
+  }
 }
 
 export default App;
diff --git a/19-tabpanel/a-tabpanel/src/Tab.css b/19-tabpanel/a-tabpanel/src/Tab.css
new file mode 100644
index 0000000..2f1c9fc
--- /dev/null
+++ b/19-tabpanel/a-tabpanel/src/Tab.css
@@ -0,0 +1,34 @@
+.tab {
+  text-align: center;
+  cursor: pointer;
+  border: 2px solid transparent;
+}
+.tab:hover {
+  background-color: #d8d8d8;
+}
+.tab-panel.top .tab,
+.tab-panel.bottom .tab {
+  padding: 12px 6px;
+}
+.tab-panel.left .tab,
+.tab-panel.right .tab {
+  padding: 6px 12px;
+}
+.tab-panel.top .tab.active {
+  border-bottom-color: #1e8bfb;
+}
+.tab-panel.left .tab.active {
+  border-right-color: #1e8bfb;
+}
+.tab-panel.bottom .tab.active {
+  border-top-color: #1e8bfb;
+}
+.tab-panel.right .tab.active {
+  border-left-color: #1e8bfb;
+}
+.tab.active:hover {
+  background-color: transparent;
+}
+.tab .svg-inline--fa {
+  margin-right: 8px;
+}
\ No newline at end of file
diff --git a/19-tabpanel/a-tabpanel/src/Tab.js b/19-tabpanel/a-tabpanel/src/Tab.js
new file mode 100644
index 0000000..ff56c7d
--- /dev/null
+++ b/19-tabpanel/a-tabpanel/src/Tab.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import FontAwesome from '@fortawesome/react-fontawesome';
+import * as Icons from '@fortawesome/fontawesome-free-solid';
+import './Tab.css';
+
+const Tab = props => {
+  const { tabtext, icon, activetab, cardindex, onClick } = props,
+        isActive = activetab === cardindex ? 'active' : '';
+
+  return (
+    <div className={`tab ${isActive}`} onClick={onClick}>
+      {icon ? <FontAwesome icon={Icons[`fa${icon}`]} /> : ''}
+      {tabtext}
+    </div>
+  );
+};
+
+export default Tab;
diff --git a/19-tabpanel/a-tabpanel/src/TabPanel.css b/19-tabpanel/a-tabpanel/src/TabPanel.css
new file mode 100644
index 0000000..3d33b28
--- /dev/null
+++ b/19-tabpanel/a-tabpanel/src/TabPanel.css
@@ -0,0 +1,45 @@
+.tab-panel {
+  display: flex;
+}
+.tab-panel.top {
+  flex-direction: column;
+}
+.tab-panel.bottom {
+  flex-direction: column-reverse;
+}
+.tab-panel.left {
+  flex-direction: row;
+}
+.tab-panel.right {
+  flex-direction: row-reverse;
+}
+ 
+.tab-strip {
+  background-color: #e8e8e8;
+  display: flex;
+  justify-content: flex-start;
+}
+.tab-strip.indicator {
+  justify-content: center;
+}
+.tab-panel.top .tab-strip,
+.tab-panel.bottom .tab-strip {
+  flex-direction: row;
+}
+.tab-panel.left .tab-strip,
+.tab-panel.right .tab-strip {
+  flex-direction: column;
+}
+ 
+.card-ct {
+  flex: 1;
+  display: flex;
+} 
+.card {
+  padding: 12px;
+  flex: 1 0 auto;
+  display: none;
+}
+.card.active {
+  display: block !important;
+}
\ No newline at end of file
diff --git a/19-tabpanel/a-tabpanel/src/TabPanel.js b/19-tabpanel/a-tabpanel/src/TabPanel.js
new file mode 100644
index 0000000..f724d92
--- /dev/null
+++ b/19-tabpanel/a-tabpanel/src/TabPanel.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import Tab from './Tab';
+import './TabPanel.css';
+
+class TabPanel extends Component {
+  static defaultProps = {
+    activetab: 0,
+    className: '',
+    position: 'top'
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activetab: props.activetab
+    };
+  }
+
+  render() {
+    const { children, className, position } = this.props;
+    const { activetab } = this.state;
+
+    return (
+      <div {...this.props} className={`${className} tab-panel ${position}`}>
+        <div className={`tab-strip`}>
+          {React.Children.map(children, (child, i) => (
+            <Tab
+              onClick={this.onTabClick.bind(this, i)}
+              {...child.props}
+              cardindex={i}
+              activetab={activetab}
+            />
+          ))}
+        </div>
+        <div className="card-ct">
+          {React.Children.map(children, (child, i) => {
+            const { className } = child.props,
+              isActive = i === activetab ? 'active' : '',
+              cardProps = {
+                ...child.props,
+
+                className: `${className} card ${isActive}`,
+                cardindex: i,
+                activetab: activetab
+              };
+
+            return React.cloneElement(child, cardProps);
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  onTabClick(activetab) {
+    this.setState({
+      activetab
+    });
+  }
+}
+
+export default TabPanel;