diff --git a/app/routes/app/components/components/Nav.js b/app/components/Nav/Nav.js
similarity index 100%
rename from app/routes/app/components/components/Nav.js
rename to app/components/Nav/Nav.js
diff --git a/app/routes/app/components/components/Nav.scss b/app/components/Nav/Nav.scss
similarity index 98%
rename from app/routes/app/components/components/Nav.scss
rename to app/components/Nav/Nav.scss
index 0770d7a5..af8aa10d 100644
--- a/app/routes/app/components/components/Nav.scss
+++ b/app/components/Nav/Nav.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import '../../variables.scss';
 
 .nav {
 	display: inline-block;
diff --git a/app/components/Nav/index.js b/app/components/Nav/index.js
new file mode 100644
index 00000000..768d2c60
--- /dev/null
+++ b/app/components/Nav/index.js
@@ -0,0 +1,3 @@
+import Nav from './Nav'
+
+export default Nav
diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js
index 42f112e2..4b13637d 100644
--- a/app/routes/app/components/App.js
+++ b/app/routes/app/components/App.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import LoadingBolt from 'components/LoadingBolt'
 import Form from 'components/Form'
+import Nav from 'components/Nav'
 import ModalRoot from './components/ModalRoot'
-import Nav from './components/Nav'
 import styles from './App.scss'
 
 class App extends Component {
diff --git a/test/components/Nav.spec.js b/test/components/Nav.spec.js
new file mode 100644
index 00000000..c55a1d94
--- /dev/null
+++ b/test/components/Nav.spec.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import ReactSVG from 'react-svg'
+import { NavLink } from 'react-router-dom'
+import { MdAccountBalanceWallet } from 'react-icons/lib/md'
+import { FaClockO, FaDollar } from 'react-icons/lib/fa'
+import Nav from 'components/Nav'
+
+const defaultProps = {
+  ticker: {
+    currency: 'usd',
+    crypto: 'btc'
+  },
+  balance: {},
+  setCurrency: () => {},
+  currentTicker: {},
+  openPayForm: () => {},
+  openRequestForm: () => {}
+}
+
+describe('default elements', () => {
+  const props = { ...defaultProps }
+  const el = shallow(<Nav {...props} />)
+
+  describe('currencies', () => {
+    it('should render currency conversion links', () => {
+      expect(el.find('.currencies').length).toBe(1)
+      expect(el.find(FaDollar).length).toBe(1)
+    })
+  })
+
+  describe('balances', () => {
+    expect(el.find('.balance').length).toBe(1)
+    it('should render wallet balance', () => {})
+    it('should render channel balance', () => {})
+  })
+
+  it('should render logo', () => {
+    expect(el.find(ReactSVG).props().path).toContain('zap_2.svg')
+  })
+  it('should render nav links', () => {
+    expect(el.find(NavLink).at(0).props().to).toBe('/')
+    expect(el.find(NavLink).at(1).props().to).toBe('/wallet')
+    expect(el.find(FaClockO)).toHaveLength(1)
+    expect(el.find(MdAccountBalanceWallet)).toHaveLength(1)
+  })
+  it('should render buttons', () => {
+    expect(el.find('.button').at(0).text()).toContain('Pay')
+    expect(el.find('.button').at(1).text()).toContain('Request')
+  })
+})