diff --git a/app/javascript/gabsocial/components/navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar.js
index 052d1680..6ac9de6e 100644
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar.js
@@ -15,6 +15,7 @@ import BackButton from './back_button'
 import Button from './button'
 import Heading from './heading'
 import Icon from './icon'
+import NavigationBarButton from './navigation_bar_button'
 import Search from './search'
 import Text from './text'
 
@@ -238,72 +239,4 @@ class NavigationBarButtonDivider extends PureComponent {
     )
   }
 
-}
-
-class NavigationBarButton extends PureComponent {
-
-  static propTypes = {
-    title: PropTypes.string,
-    icon: PropTypes.string,
-    to: PropTypes.string,
-    href: PropTypes.string,
-    attrTitle: PropTypes.string,
-  }
-
-  render() {
-    const {
-      title,
-      icon,
-      to,
-      href,
-      attrTitle,
-    } = this.props
-
-    const active = false
-
-    const classes = CX({
-      default: 1,
-      height53PX: 1,
-      flexRow: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
-      outlineNone: 1,
-      cursorPointer: 1,
-      bgTransparent: 1,
-      noUnderline: 1,
-      colorNavigation: 1,
-      px10: !!title,
-      px5: !title,
-      colorWhite: !!title,
-      fs13PX: !!title,
-      fontWeightNormal: !!title,
-    })
-
-    const iconClasses = CX({
-      fillNavigation: !!title || active,
-      fillNavigationBlend: !title,
-      mr10: !!title,
-    })
-
-    const iconSize = !!title ? '16px' : '18px'
-
-    return (
-      <Button
-        to={to}
-        href={href}
-        title={attrTitle}
-        className={classes}
-        noClasses
-      >
-        <Icon className={iconClasses} id={icon} size={iconSize} />
-        {
-          !!title &&
-          <Text color='white'>
-            {title}
-          </Text>
-        }
-      </Button>
-    )
-  }
-
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/navigation_bar_button.js b/app/javascript/gabsocial/components/navigation_bar_button.js
new file mode 100644
index 00000000..deb01181
--- /dev/null
+++ b/app/javascript/gabsocial/components/navigation_bar_button.js
@@ -0,0 +1,72 @@
+import { CX } from '../constants'
+import Button from './button'
+import Icon from './icon'
+import Text from './text'
+
+export default class NavigationBarButton extends PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string,
+    icon: PropTypes.string,
+    to: PropTypes.string,
+    href: PropTypes.string,
+    attrTitle: PropTypes.string,
+  }
+
+  render() {
+    const {
+      title,
+      icon,
+      to,
+      href,
+      attrTitle,
+    } = this.props
+
+    const active = false
+
+    const classes = CX({
+      default: 1,
+      height53PX: 1,
+      flexRow: 1,
+      alignItemsCenter: 1,
+      justifyContentCenter: 1,
+      outlineNone: 1,
+      cursorPointer: 1,
+      bgTransparent: 1,
+      noUnderline: 1,
+      colorNavigation: 1,
+      px10: !!title,
+      px5: !title,
+      colorWhite: !!title,
+      fs13PX: !!title,
+      fontWeightNormal: !!title,
+    })
+
+    const iconClasses = CX({
+      fillNavigation: !!title || active,
+      fillNavigationBlend: !title,
+      mr10: !!title,
+    })
+
+    const iconSize = !!title ? '16px' : '18px'
+
+    return (
+      <Button
+        to={to}
+        href={href}
+        title={attrTitle}
+        className={classes}
+        noClasses
+      >
+        <Icon className={iconClasses} id={icon} size={iconSize} />
+        {
+          !!title &&
+          <Text color='white'>
+            {title}
+          </Text>
+        }
+      </Button>
+    )
+  }
+
+}
\ No newline at end of file