diff --git a/index.html b/index.html
index ab90510..63e3bf0 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
   <link href="/assets/style.css" rel="stylesheet">
 </head>
 <body>
-  <div id="root"></div>
+  <div id="app"></div>
   <script>
     window.INITIAL_STATE = %INITIAL_STATE%;
     window.YOUTUBE_KEY = '%YOUTUBE_KEY%';
diff --git a/src/actions/actionsTypes.js b/src/actions/actions-types.js
similarity index 92%
rename from src/actions/actionsTypes.js
rename to src/actions/actions-types.js
index 8c27012..0be6447 100644
--- a/src/actions/actionsTypes.js
+++ b/src/actions/actions-types.js
@@ -7,6 +7,7 @@ export const FEED_SET_SORT_TRACKS = 'FEED_SET_SORT_TRACKS';
 export const FEED_SET_ERROR_TRACK = 'FEED_SET_ERROR_TRACK';
 export const FEED_SET_CURRENT_TRACK = 'FEED_SET_CURRENT_TRACK';
 export const FEED_SELECT_NEXT_TRACK = 'FEED_SELECT_NEXT_TRACK';
+export const DISCOVER_SET_VISIBLE = 'DISCOVER_SET_VISIBLE';
 export const DISCOVER_SET_CHANNELS = 'DISCOVER_SET_CHANNELS';
 export const DISCOVER_SET_LOADING = 'DISCOVER_SET_LOADING';
 export const DISCOVER_SET_TAGS = 'DISCOVER_SET_TAGS';
diff --git a/src/actions/discover.js b/src/actions/discover.js
index 27f24c1..f2e7a5d 100644
--- a/src/actions/discover.js
+++ b/src/actions/discover.js
@@ -1,4 +1,4 @@
-import * as types from './actionsTypes';
+import * as types from './actions-types';
 import * as api from '../api/browser';
 import {addFeedChannel} from './feed';
 import {debounce} from '../utils';
@@ -19,6 +19,10 @@ export function setTags(tags) {
   return {type: types.DISCOVER_SET_TAGS, tags};
 }
 
+export function setDiscoverVisible(visible) {
+  return {type: types.DISCOVER_SET_VISIBLE, visible};
+}
+
 export function loadTags() {
   return async (dispatch) => {
     const tags = await api.getChannelsTags();
diff --git a/src/actions/feed.js b/src/actions/feed.js
index 8905811..2851941 100644
--- a/src/actions/feed.js
+++ b/src/actions/feed.js
@@ -1,4 +1,4 @@
-import * as types from './actionsTypes';
+import * as types from './actions-types';
 import * as api from '../api/browser';
 
 export function addFeedChannels(channels) {
diff --git a/src/client.js b/src/client.js
index 2fdff6f..9078466 100644
--- a/src/client.js
+++ b/src/client.js
@@ -1,25 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {Provider} from 'react-redux';
-import {Router, IndexRoute, Route, hashHistory} from 'react-router';
-import Landing from './components/landing/landing-container';
-import Application from './components/application/application-container';
-import Feed from './components/feed/feed-container';
-import Discover from './components/discover/discover-container';
-import {syncHistoryWithStore} from 'react-router-redux';
-import store from './store';
+import App from 'components/app';
 
-ReactDOM.render(
-  <div>
-    <Provider store={store}>
-      <Router history={syncHistoryWithStore(hashHistory, store)}>
-        <Route path="/" component={Landing} />
-        <Route path="/app" component={Application}>
-          <IndexRoute component={Feed} />
-          <Route path="/app/discover" component={Discover} />
-        </Route>
-      </Router>
-    </Provider>
-  </div>,
-  document.getElementById('root')
-);
+ReactDOM.render(<App/>, document.getElementById('app'));
diff --git a/src/components/application/_theme.scss b/src/components/app/_theme.scss
similarity index 73%
rename from src/components/application/_theme.scss
rename to src/components/app/_theme.scss
index 444ff71..887ad74 100644
--- a/src/components/application/_theme.scss
+++ b/src/components/app/_theme.scss
@@ -1,13 +1,17 @@
+$backgroundColor: #e5e5e5;
+$primaryColor: #2F80ED;
+$secondaryTextColor: #727272;
+
 $darkPrimaryColor: #303f9f;
-$primaryColor: #3f51b5;
 $lightPrimaryColor: #c5cae9;
 $textColor: #fff;
 $accentColor: #ff4081;
 $primaryTextColor: #212121;
-$secondaryTextColor: #727272;
 $dividerColor: #b6b6b6;
 $errorColor: #f44336;
 
 @mixin shadow($elevation) {
   box-shadow: 0px 2px $elevation rgba(0, 0, 0, .26);
 }
+
+$transformCurve: cubic-bezier(0.4, 0.0, 0.2, 1);
diff --git a/src/components/application/application.scss b/src/components/app/app.scss
similarity index 62%
rename from src/components/application/application.scss
rename to src/components/app/app.scss
index 1c6c2f9..5043426 100644
--- a/src/components/application/application.scss
+++ b/src/components/app/app.scss
@@ -1,16 +1,17 @@
+@import './_theme.scss';
+
 :global {
   body {
     padding: 0;
     margin: 0;
     font-family: 'Roboto';
     font-size: 16px;
-    background-color: rgba(0, 0, 0, .1);
+    background-color: $backgroundColor;
     -webkit-font-smoothing: antialiased;
   }
 }
 
 .root {
   display: flex;
-  justify-content: space-between;
-  height: calc(100vh - 60px);
+  height: 100vh;
 }
diff --git a/src/components/app/index.js b/src/components/app/index.js
new file mode 100644
index 0000000..a6e8db7
--- /dev/null
+++ b/src/components/app/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import Sidebar from 'components/sidebar';
+import Player from 'components/player';
+import store from '../../store';
+import styles from './app.scss';
+
+export default class Application extends React.PureComponent {
+  render() {
+    return <Provider store={store}>
+      <main className={styles.root}>
+        <Sidebar/>
+        <Player/>
+      </main>
+    </Provider>;
+  }
+}
diff --git a/src/components/application/application-container.js b/src/components/application/application-container.js
deleted file mode 100644
index e5dd79e..0000000
--- a/src/components/application/application-container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, {Component} from 'react';
-import HeaderContainer from '../header/header-container';
-import SidebarContainer from '../sidebar/sidebar-container';
-import styles from './application.scss';
-
-export default class ApplicationContainer extends Component {
-  render() {
-    return <main>
-      <HeaderContainer />
-      <section className={styles.root}>
-        <SidebarContainer />
-        {this.props.children}
-      </section>
-    </main>;
-  }
-}
diff --git a/src/components/channel-list/channel-item.js b/src/components/channel-list/channel-item.js
deleted file mode 100644
index 9598df5..0000000
--- a/src/components/channel-list/channel-item.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
-import {ListItem, Avatar, Icon, Loader} from '../ui';
-import cn from 'classnames';
-import styles from './channel-list.scss';
-
-export default class ChannelItem extends Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    image: PropTypes.string.isRequired,
-    isEnabled: PropTypes.bool.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    hasUpdates: PropTypes.bool,
-    onToggle: PropTypes.func.isRequired,
-  }
-
-  render() {
-    const {name, isEnabled, isLoading} = this.props;
-
-    return <ListItem
-      primaryText={name}
-      leftElement={this._renderLeftElement()}
-      leftElementHeight={24}
-      rightElement={this._renderRightElement()}
-      rightElementHeight={24}
-      height={36}
-      onClick={this._toggle}
-      className={cn(styles.item, {
-        [styles.itemEnabled]: isEnabled && !isLoading,
-        [styles.itemHasUpdates]: this.props.hasUpdates,
-      })}/>;
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
-  _renderLeftElement() {
-    return <Avatar size={24} url={this.props.image} />;
-  }
-
-  _renderRightElement() {
-    if (this.props.isLoading) {
-      return <Loader size={24} />;
-    }
-
-    return this.props.isEnabled ? <Icon size={24} glyph="check" /> : null;
-  }
-
-  _toggle = () => {
-    this.props.onToggle(this.props);
-  }
-}
diff --git a/src/components/channel-list/channel-list.js b/src/components/channel-list/channel-list.js
deleted file mode 100644
index 13a732e..0000000
--- a/src/components/channel-list/channel-list.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import Channel from './channel-item';
-import {List, ListLabel, IconButton, Loader, EmptyState, FlatButton} from '../ui';
-import styles from './channel-list.scss';
-
-export default class ChannelList extends Component {
-  static propTypes = {
-    list: PropTypes.array.isRequired,
-    isRefreshing: PropTypes.bool,
-    onToggle: PropTypes.func.isRequired,
-    onRefresh: PropTypes.func.isRequired,
-    onGotoDiscover: PropTypes.func.isRequired,
-  }
-
-  state = {
-    isRefreshing: false,
-  }
-
-  render() {
-    const {className, list} = this.props;
-
-    return <div className={className}>
-      <ListLabel
-        text={`${list.length} channel${list.length !== 1 ? 's' : ''}`}
-        rightElement={this._renderButtons()}/>
-      {list.length === 0
-        ? this._renderEmptyState()
-        : this._renderList()}
-    </div>;
-  }
-
-  _renderEmptyState() {
-    const button = <FlatButton
-      label="Let's try to discover"
-      onClick={this.props.onGotoDiscover}
-      primary
-      small />;
-
-    return <EmptyState
-      glyph="search"
-      primaryText="Oh-oh, you have no channels!"
-      secondaryText={button}
-      small />;
-  }
-
-  _renderList() {
-    const {list, onToggle} = this.props;
-
-    return <List>
-      {list.map((channel) => {
-        return <Channel
-          isEnabled={false}
-          {...channel}
-          key={channel.id}
-          onToggle={onToggle} />;
-      })}
-    </List>;
-  }
-
-  _renderButtons() {
-    const {onGotoDiscover, list} = this.props;
-
-    return <div>
-      {list.length > 0 ? this._renderRefresh() : null}
-      <IconButton
-        glyph="search"
-        onClick={onGotoDiscover}
-        size={24}
-        boxSize={24}
-        className={styles.discover} />
-    </div>;
-  }
-
-  _renderRefresh() {
-    const {isRefreshing, onRefresh} = this.props;
-
-    if (isRefreshing) {
-      return <Loader size={24} boxSize={24} multicolor={false} className={styles.refreshLoader} />;
-    }
-
-    return <IconButton
-      glyph="refresh"
-      onClick={onRefresh}
-      size={24}
-      boxSize={24}
-      className={styles.refresh} />;
-  }
-}
diff --git a/src/components/channel-list/channel-list.scss b/src/components/channel-list/channel-list.scss
deleted file mode 100644
index 17f364d..0000000
--- a/src/components/channel-list/channel-list.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../application/_theme.scss';
-
-.item {
-  position: relative;
-  font-size: 14px;
-
-  &Enabled {
-    color: $primaryColor;
-  }
-
-  &HasUpdates:after {
-    position: absolute;
-    content: '';
-    left: 36px;
-    top: 4px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: $accentColor;
-    border: 1px solid #fff;
-    box-sizing: border-box;
-  }
-}
-
-.refresh {
-  color: $secondaryTextColor;
-
-  &Loader {
-    display: inline-block;
-    opacity: .5;
-  }
-}
-
-.discover {
-  color: $secondaryTextColor;
-  float: right;
-
-  .refresh + &, .refreshLoader + & {
-    margin-left: 8px;
-  }
-}
diff --git a/src/components/channels/channel.js b/src/components/channels/channel.js
new file mode 100644
index 0000000..d65df20
--- /dev/null
+++ b/src/components/channels/channel.js
@@ -0,0 +1,31 @@
+import React, {PropTypes} from 'react';
+import cn from 'classnames';
+import Avatar from 'components/ui/avatar';
+import styles from './channels.scss';
+
+export default class Channel extends React.PureComponent {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    image: PropTypes.string,
+    isEnabled: PropTypes.bool.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    hasUpdates: PropTypes.bool,
+    onToggle: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {name, image, isEnabled} = this.props;
+
+    return (
+      <li className={cn(styles.channel, {[styles.channelEnabled]: isEnabled})} onClick={this._toggle}>
+        <Avatar url={image} className={styles.avatar} />
+        {name}
+      </li>
+    );
+  }
+
+  _toggle = () => {
+    this.props.onToggle(this.props);
+  }
+}
diff --git a/src/components/channels/channels.scss b/src/components/channels/channels.scss
new file mode 100644
index 0000000..864b3e9
--- /dev/null
+++ b/src/components/channels/channels.scss
@@ -0,0 +1,37 @@
+@import '../app/_theme.scss';
+
+.root {
+  padding: 0;
+  margin: 8px 0;
+  list-style-type: none;
+}
+
+.channel {
+  height: 36px;
+  padding: 6px 8px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 13px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(#efefef, .5);
+  }
+
+  &Enabled {
+    color: $primaryColor;
+
+    .avatar {
+      box-shadow: 0 0 0 2px $primaryColor;
+    }
+  }
+}
+
+.avatar {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  float: left;
+  background-color: #efefef;
+}
diff --git a/src/components/channels/index.js b/src/components/channels/index.js
new file mode 100644
index 0000000..1d62e85
--- /dev/null
+++ b/src/components/channels/index.js
@@ -0,0 +1,20 @@
+import React, {PropTypes} from 'react';
+import Channel from './channel';
+import style from './channels.scss';
+
+export default class Channels extends React.PureComponent {
+  static propTypes = {
+    channels: PropTypes.array.isRequired,
+    onToggleChannel: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {channels, onToggleChannel} = this.props;
+
+    return <ul className={style.root}>
+      {channels.map(channel => (
+        <Channel key={channel.id} {...channel} onToggle={onToggleChannel} />
+      ))}
+    </ul>;
+  }
+}
diff --git a/src/components/controls/controls.scss b/src/components/controls/controls.scss
new file mode 100644
index 0000000..4d7da2d
--- /dev/null
+++ b/src/components/controls/controls.scss
@@ -0,0 +1,35 @@
+@import '../app/_theme.scss';
+
+.root {
+  position: relative;
+  width: 100%;
+  height: 96px;
+  background: $primaryColor;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, .16);
+}
+
+.track {
+  height: 64px;
+  padding: 16px;
+  box-sizing: border-box;
+  display: flex;
+}
+
+.trackName {
+  font-size: 16px;
+  line-height: 32px;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.play, .next {
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.next {
+  margin: 0 16px 0 8px;
+}
diff --git a/src/components/header/header-player.js b/src/components/controls/index.js
similarity index 52%
rename from src/components/header/header-player.js
rename to src/components/controls/index.js
index eda507d..e0f3de9 100644
--- a/src/components/header/header-player.js
+++ b/src/components/controls/index.js
@@ -1,14 +1,16 @@
-import React, {Component, PropTypes} from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
-import {formatDuration} from '../../utils';
-import {Loader, IconButton} from '../ui';
-import Progress from './header-player-progress';
+import React, {PropTypes} from 'react';
 import ReactPlayer from 'react-player';
-import styles from './header.scss';
+import IconButton from 'components/ui/icon-button';
+import Progress from './progress';
+import styles from './controls.scss';
 
-export default class HeaderPlayer extends Component {
+export default class Controls extends React.PureComponent {
   static propTypes = {
-    track: PropTypes.object,
+    // trackId: PropTypes.string,
+    // trackTitle: PropTypes.string,
+    // trackArtist: PropTypes.string,
+    // trackUrl: PropTypes.string,
+    // trackDuration: PropTypes.number,
     isPlaying: PropTypes.bool.isRequired,
     onTogglePlay: PropTypes.func.isRequired,
     onNext: PropTypes.func.isRequired,
@@ -26,43 +28,33 @@ export default class HeaderPlayer extends Component {
     duration: null,
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   render() {
+    const {track, isPlaying, onError, onNext} = this.props;
     const {progress, isLoading, duration} = this.state;
-    const {track, isPlaying, onNext, onError} = this.props;
-
-    return <div className={styles.player}>
-      <IconButton
-        glyph={isPlaying ? 'pause' : 'play_arrow'}
-        onClick={this._togglePlaying}
-        size={32}
-        boxSize={40}
-        className={styles.playerToggle}/>
-
-      <IconButton
-        glyph="skip_next"
-        onClick={onNext}
-        size={32}
-        boxSize={40}
-        className={styles.playerNext} />
-
-      {this._renderTitle()}
-
-      {duration
-        ? <span className={styles.playerTime}>{formatDuration(progress)}</span>
-        : null}
-
-      {duration && (progress || isPlaying)
-        ? <Progress
-            isLoading={isLoading}
-            current={progress}
-            max={duration}
-            canSeek={isPlaying && !isLoading}
-            onSeek={this._seek} />
-        : null}
+
+    return <div className={styles.root}>
+      <div className={styles.track}>
+        <IconButton
+          onClick={this._togglePlaying}
+          glyph={isPlaying ? 'pause' : 'play_arrow'}
+          size="large"
+          className={styles.play} />
+        <IconButton
+          onClick={onNext}
+          glyph="skip_next"
+          size="large"
+          className={styles.next} />
+        {track && <span className={styles.trackName}>
+          {track.title}{track.artist ? ' ' + track.artist : null}
+        </span>}
+      </div>
+
+      <Progress
+        current={progress || 0}
+        max={duration || 1}
+        onSeek={this._seek}
+        isLoading={isLoading}
+        canSeek={isPlaying && !isLoading} />
 
       <ReactPlayer
         ref="player"
@@ -74,27 +66,9 @@ export default class HeaderPlayer extends Component {
         onProgress={this._updateProgress}
         onDuration={this._updateDuration}
         onEnded={onNext} />
-
-      {isLoading && isPlaying
-        ? <Loader size={24} className={styles.playerLoader} />
-        : null}
     </div>;
   }
 
-  _renderTitle() {
-    if (!this.props.track) {
-      return null;
-    }
-
-    const {artist, title} = this.props.track;
-
-    return <span className={styles.playerTitle}>{title}
-      {artist
-        ? <span className={styles.playerArtist}> by {artist}</span>
-        : null}
-    </span>;
-  }
-
   componentWillMount() {
     if (this.props.track) {
       this._updateDuration(this.props.track.duration);
@@ -112,7 +86,7 @@ export default class HeaderPlayer extends Component {
     }
   }
 
-  _seek = (progress) => {
+  _seek = progress => {
     this.refs.player.seekTo(progress / this.state.duration);
     this.setState({
       isLoading: true,
@@ -127,7 +101,7 @@ export default class HeaderPlayer extends Component {
     }
   }
 
-  _updateProgress = (progress) => {
+  _updateProgress = progress => {
     if (!progress || !progress.played) {
       return;
     }
@@ -145,7 +119,7 @@ export default class HeaderPlayer extends Component {
 }
 
 function shouldTrackUpdate(prevTrack, nextTrack) {
-  if (!prevTrack && nextTrack) {
+  if (!prevTrack || !nextTrack) {
     return true;
   }
 
diff --git a/src/components/header/header-player-progress.js b/src/components/controls/progress/index.js
similarity index 58%
rename from src/components/header/header-player-progress.js
rename to src/components/controls/progress/index.js
index ab1e4b5..ebf015f 100644
--- a/src/components/header/header-player-progress.js
+++ b/src/components/controls/progress/index.js
@@ -1,10 +1,9 @@
-import React, {Component, PropTypes} from 'react';
-import {nodeOffset} from '../../utils';
+import React, {PropTypes} from 'react';
 import cn from 'classnames';
-import styles from './header.scss';
-
-export default class HeaderPlayerProgress extends Component {
+import {nodeOffset} from 'utils';
+import styles from './progress.scss';
 
+export default class Progress extends React.PureComponent {
   static propTypes = {
     current: PropTypes.number.isRequired,
     max: PropTypes.number.isRequired,
@@ -22,20 +21,20 @@ export default class HeaderPlayerProgress extends Component {
     const progressPercent = ((100 / this.props.max) * this.props.current) + '%';
 
     return <div ref="progress"
-      className={cn(styles.progress, {
-        [styles.progressSeekable]: canSeek,
+      className={cn(styles.root, {
+        [styles.seekable]: canSeek,
       })}
       onClick={this._seek}>
 
-      <div className={cn(styles.progressBackground, {
-        [styles.progressBackgroundLoading]: isLoading,
+      <div className={cn(styles.background, {
+        [styles.backgroundLoading]: isLoading,
       })} />
 
-      <div className={styles.progressBar} style={{width: progressPercent}}/>
+      <div className={styles.bar} style={{width: progressPercent}}/>
 
       {canSeek
-        ? <div className={styles.progressPointer} style={{left: progressPercent}}>
-            <div className={styles.progressPointerGlow} />
+        ? <div className={styles.pointer} style={{left: progressPercent}}>
+            <div className={styles.pointerGlow} />
           </div>
         : null}
     </div>;
diff --git a/src/components/controls/progress/progress.scss b/src/components/controls/progress/progress.scss
new file mode 100644
index 0000000..31b8001
--- /dev/null
+++ b/src/components/controls/progress/progress.scss
@@ -0,0 +1,71 @@
+$color: #fff;
+
+.root {
+  box-sizing: border-box;
+  height: 16px;
+  position: absolute;
+  bottom: 16px;
+  left: 24px;
+  right: 24px;
+
+  &:hover .pointer {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.seekable {
+  cursor: pointer;
+}
+
+.background {
+  position: absolute;
+  bottom: 6px;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background-color: rgba($color, .24);
+
+  &Loading {
+    background-color: transparent;
+    background-image: radial-gradient(rgb(169, 192, 233) 0%, rgb(169, 192, 233) 24%, transparent 50%);
+    background-size: 10px 10px;
+    background-position: 0px center;
+    background-repeat: repeat-x;
+    animation: progress-loading 3s infinite linear;
+  }
+}
+
+.bar {
+  position: absolute;
+  background-color: $color;
+  height: 4px;
+  left: 0;
+  bottom: 6px;
+  transition: width .2s linear;
+}
+
+.pointer {
+  position: absolute;
+  z-index: 10;
+  top: 2px;
+  margin-left: -8px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  opacity: 0;
+  background-color: $color;
+  transform: scale(.3);
+  transition: opacity .1s ease-out, transform .2s ease-out;
+
+  &Glow {
+    position: absolute;
+    top: -6px;
+    left: -6px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: $color;
+    opacity: .24;
+  }
+}
diff --git a/src/components/discover/discover-channel.js b/src/components/discover/discover-channel.js
deleted file mode 100644
index 27b3b7b..0000000
--- a/src/components/discover/discover-channel.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import {FlatButton} from '../ui';
-import styles from './discover.scss';
-
-export default class DiscoverChannel extends Component {
-  static propTypes = {
-    onToggle: PropTypes.func.isRequired,
-    isFeedChannel: PropTypes.bool,
-  };
-
-  render() {
-    const {name, image, imageLarge, isFeedChannel} = this.props;
-
-    return <div className={styles.channel} style={{
-        backgroundImage: `url(${imageLarge || image})`,
-      }}>
-      <div className={styles.channelImage}></div>
-      <div className={styles.channelContent}>
-        <h3 className={styles.channelTitle} title={name}>{name}</h3>
-        {this._renderTags()}
-      </div>
-      <FlatButton
-        label={isFeedChannel ? 'remove' : 'add to feed'}
-        onClick={this._toggle}
-        primary
-        small
-        className={styles.channelAction} />
-    </div>;
-  }
-
-  _renderTags() {
-    const tags = (this.props.tags || []).map(t => '#' + t).join(' ');
-    return <p className={styles.channelTags} title={tags}>{tags}</p>;
-  }
-
-  _toggle = () => {
-    this.props.onToggle(Object.keys(this.props).reduce((acc, key) => {
-      if (key !== 'isFeedChannel' && typeof(this.props[key]) !== 'function') {
-        acc[key] = this.props[key];
-      }
-
-      return acc;
-    }, {}));
-  }
-}
diff --git a/src/components/discover/discover-container.js b/src/components/discover/discover-container.js
deleted file mode 100644
index 3738669..0000000
--- a/src/components/discover/discover-container.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, {Component} from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
-import {connect} from 'react-redux';
-import {createSearchAction, setChannels, addChannel, loadTags} from '../../actions/discover';
-import {addFeedChannel, removeFeedChannel} from '../../actions/feed';
-import {Grid, GridCell, Loader, EmptyState, FlatButton} from '../ui';
-import Channel from './discover-channel';
-import SearchInput from './discover-input';
-import {curried} from '../../utils';
-import cn from 'classnames';
-import styles from './discover.scss';
-
-const SEARCH_DEBOUNCE = 300;
-const SEARCH_MINLENGTH = 3;
-
-export class DiscoverContainer extends Component {
-  state = {
-    searchQuery: '',
-    source: null,
-    url: null,
-  }
-
-  constructor(...args) {
-    super(...args);
-    this._searchAction = createSearchAction(SEARCH_DEBOUNCE);
-  }
-
-  render() {
-    return <div className={styles.discover}>
-
-      <SearchInput
-        value={this.state.searchQuery}
-        onSearch={this._search}
-        onAdd={this._add}
-        onSubmit={this._submit} />
-
-      <div className={styles.discoverContent}>
-
-        {this._renderGetStarted()}
-        {this._renderLoader()}
-        {this._renderFoundChannels()}
-
-      </div>
-
-    </div>;
-  }
-
-  _renderGetStarted() {
-    if (this.props.channels.length || this.props.isLoading) {
-      return null;
-    }
-
-    return <div><EmptyState
-      glyph="search"
-      primaryText="Type a genre or whatever you want"
-      secondaryText="or paste vk.com group, youtube channel or subreddit url" />
-
-      <div className={styles.discoverTags}>
-          {this.props.tags.map((tag) => (
-            <FlatButton
-              key={tag}
-              small primary
-              onClick={curried(this._search, tag)}
-              label={`#${tag}`} />
-          ))}
-      </div>
-    </div>;
-  }
-
-  _renderLoader() {
-    if (!this.props.isLoading) {
-      return null;
-    }
-
-    return <Loader size={40} className={styles.discoverLoader} />;
-  }
-
-  _renderFoundChannels() {
-    const {channels, isLoading, feedChannelsIds} = this.props;
-
-    return <Grid className={cn(styles.discoverChannels, {
-      [styles.discoverChannelsLoading]: isLoading,
-    })}>
-      {channels.map((channel) => (
-        <GridCell key={channel.id} small="1of2" medium="1of3" large="1of4">
-          <Channel
-            {...channel}
-            isFeedChannel={feedChannelsIds.indexOf(channel.id) !== -1}
-            onToggle={this._toggleChannel} />
-        </GridCell>
-      ))}
-    </Grid>;
-  }
-
-  componentWillMount() {
-    this.props.dispatch(loadTags());
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
-  _search = (searchQuery) => {
-    this.setState({source: null, url: null, searchQuery});
-
-    if (searchQuery.trim().length < SEARCH_MINLENGTH) {
-      this.props.dispatch(setChannels([]));
-      return;
-    }
-
-    this.props.dispatch(this._searchAction(searchQuery));
-  }
-
-  _add = (source, url) => {
-    this.setState({source, url});
-  }
-
-  _toggleChannel = (channel) => {
-    this.props.dispatch(
-      this.props.feedChannelsIds.indexOf(channel.id) === -1
-        ? addFeedChannel(channel)
-        : removeFeedChannel(channel.id)
-    );
-  }
-
-  _submit = () => {
-    this.props.dispatch(addChannel(this.state.url));
-  }
-
-}
-
-export function mapToProps(state) {
-  return {
-    ...state.discover,
-    feedChannelsIds: state.feed.channels.map(ch => ch.id),
-  };
-}
-
-export default connect(mapToProps)(DiscoverContainer);
diff --git a/src/components/discover/discover-input.js b/src/components/discover/discover-input.js
deleted file mode 100644
index 0e25345..0000000
--- a/src/components/discover/discover-input.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import {Icon, IconButton} from '../ui';
-import {getChannelUrlSource} from '../../api/browser';
-import cn from 'classnames';
-import styles from './discover.scss';
-
-export default class DiscoverInput extends Component {
-  static propTypes = {
-    onSearch: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onAdd: PropTypes.func.isRequired,
-  }
-
-  state = {
-    value: '',
-    prevValue: '',
-    source: null,
-  }
-
-  render() {
-    const {value, source} = this.state;
-
-    return <div className={styles.input}>
-      <div className={styles.inputWrapper}>
-
-        <input
-          ref="input"
-          type="text"
-          onChange={this._change}
-          onKeyUp={this._keyup}
-          placeholder="Search or paste an url"
-          value={value}
-          className={styles.inputControl} />
-
-        <Icon
-          glyph={source ? 'add' : 'search'}
-          size={24}
-          boxSize={40}
-          className={cn(styles.inputIcon)} />
-
-        <span className={cn(styles.inputBar)}></span>
-
-        {value.trim().length
-          ? <IconButton
-            glyph="clear"
-            onClick={this._clear}
-            size={24}
-            boxSize={40}
-            className={cn(styles.inputClear)} />
-          : null}
-
-      </div>
-    </div>;
-  }
-
-  componentDidMount() {
-    this.refs.input.focus();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.value !== this.state.prevValue) {
-      this.setState({value: nextProps.value, prevValue: nextProps.value});
-    }
-  }
-
-  _change = (event) => {
-    const value = event.target.value;
-    const source = getChannelUrlSource(value);
-
-    if (source) {
-      this.props.onAdd(source, value);
-    } else {
-      this.props.onSearch(value);
-    }
-
-    this.setState({value, source});
-  }
-
-  _keyup = (event) => {
-    if (event.keyCode === 13) {
-      this.props.onSubmit();
-    }
-  }
-
-  _clear = () => {
-    this.setState({value: '', source: null}, () => this.props.onSearch(''));
-  }
-}
diff --git a/src/components/discover/discover.scss b/src/components/discover/discover.scss
index 0eee688..448e4d5 100644
--- a/src/components/discover/discover.scss
+++ b/src/components/discover/discover.scss
@@ -1,175 +1,22 @@
-@import '../application/_theme.scss';
+@import '../app/_theme.scss';
 
-@mixin ellipsis() {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.discover {
-  flex-grow: 2;
-
-  &Content {
-    position: relative;
-    max-width: 960px;
-    margin: 0 auto;
-    padding: 16px 16px;
-  }
-
-  &Channels {
-    position: relative;
-
-    &Loading {
-      opacity: .2;
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
-    }
-  }
-
-  &Tags {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    margin-top: 2em;
-  }
-
-  &Loader {
-    position: absolute;
-    left: 50%;
-    margin-left: -20px;
-  }
-}
-
-.channel {
-  position: relative;
-  box-sizing: border-box;
-  @include shadow(4px);
-  width: 100%;
-  background-size: cover;
-  background-position: center;
-
-  &Image {
-    width: 100%;
-    padding-top: 56.25%;
-    background-position: center;
-  }
-
-  &Content {
-    background: rgba(255,255,255,0.9);
-    box-sizing: border-box;
-    padding: 8px 16px;
-    height: 102px;
-  }
+$channelsWidth: 240px;
+$discoverWidth: 320px;
 
-  &Title {
-    font-size: 16px;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-    @include ellipsis;
-  }
-
-  &Tags {
-    margin: 4px 0;
-    font-size: 14px;
-    color: $secondaryTextColor;
-    @include ellipsis;
-  }
-
-  &Action {
+.root {
     position: absolute;
-    right: 4px;
-    bottom: 4px;
-  }
-}
-
-.input {
-  display: block;
-  background: white;
-  @include shadow(4px);
-
-  &Wrapper {
-    display: block;
-    position: relative;
-    max-width: 960px;
-    margin: 0 auto;
-  }
-
-  &Control {
-    -webkit-appearance: none;
-    border: none;
-    height: 56px;
-    width: 100%;
-    font-size: 16px;
-    padding: 16px 16px 16px 48px;
-    line-height: 16px;
+    top: 0;
+    left: $channelsWidth;
+    height: 100%;
     box-sizing: border-box;
-
-    &:focus {
-      outline: none;
-
-      & ~ .inputIcon {
-        color: $primaryColor;
-      }
-
-      & ~ .inputBar:before, & ~ .inputBar:after {
-        width: 50%;
-      }
-    }
-
-  }
-
-  &Icon, &Clear {
-    position: absolute;
-    top: 8px;
-    color: $secondaryTextColor;
-    transition: color .15s ease-in-out;
-  }
-
-  &Icon {
-    left: 0;
-  }
-
-  &Clear {
-    right: 0;
-  }
-
-  &Bar {
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-
-    &:before, &:after {
-      content: '';
-      position: absolute;
-      width: 0;
-      transition: width .15s ease-in-out;
-      height: 2px;
-      background-color: $primaryColor;
-    }
-
-    &:before {
-      right: 50%;
+    border-left: 1px solid #e5e5e5;
+    background-color: #fff;
+    width: $discoverWidth;
+    transform: translate(-100%);
+    transition: transform .12s $transformCurve;
+    z-index: -1;
+
+    &Visible {
+        transform: translate(0);
     }
-
-    &:after {
-      left: 50%;
-    }
-  }
-}
-
-
-.getStarted {
-  color: $secondaryTextColor;
 }
diff --git a/src/components/discover/index.js b/src/components/discover/index.js
new file mode 100644
index 0000000..693a8cf
--- /dev/null
+++ b/src/components/discover/index.js
@@ -0,0 +1,17 @@
+import React, {PropTypes} from 'react';
+import cn from 'classnames';
+import styles from './discover.scss';
+
+export default class Discover extends React.Component {
+  static propTypes = {
+    visible: PropTypes.bool.isRequired,
+  }
+
+  render() {
+    return (
+      <div className={cn(styles.root, {[styles.rootVisible]: this.props.visible})}>
+        discover
+      </div>
+    );
+  }
+}
diff --git a/src/components/feed/feed-container.js b/src/components/feed/feed-container.js
deleted file mode 100644
index 6a91108..0000000
--- a/src/components/feed/feed-container.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import FeedPlaylist from './feed-playlist';
-import {
-  setTracksSort,
-  setCurrentTrack,
-  loadMoreTracks,
-} from '../../actions/feed';
-import {
-  getTrackById,
-  getSortedPlaylist,
-} from '../../reducers/feed';
-
-export class Feed extends Component {
-  render() {
-    const {currentTrack, playlist, isShuffle} = this.props;
-
-    return <FeedPlaylist
-      currentTrackId={currentTrack ? currentTrack.id : null}
-      tracks={playlist}
-      isShuffle={isShuffle}
-      onSelect={this._selectTrack}
-      onToggleShuffle={this._toggleShuffle}
-      onLoadMore={this._loadMore} />;
-  }
-
-  _toggleShuffle = () => {
-    this.props.dispatch(setTracksSort(this.props.isShuffle ? 'date' : '_seed', 'desc'));
-  }
-
-  _selectTrack = (trackId) => {
-    this.props.dispatch(setCurrentTrack(trackId));
-  }
-
-  _loadMore = () => {
-    this.props.dispatch(loadMoreTracks());
-  }
-
-}
-
-export function mapToProps(state) {
-  const {feed} = state;
-  const channelsById = feed.channels.reduce((acc, c) => {
-    acc[c.id] = c;
-    return acc;
-  }, {});
-
-  return {
-    currentTrack: getTrackById(feed, feed.currentTrackId),
-    isShuffle: feed.tracksSort.prop === '_seed',
-    playlist: getSortedPlaylist(feed).map((t) => {
-      return {...t, channelImage: channelsById[t.channelId].image};
-    }),
-  };
-}
-
-export default connect(mapToProps)(Feed);
diff --git a/src/components/feed/feed-playlist-track.js b/src/components/feed/feed-playlist-track.js
deleted file mode 100644
index ce6068d..0000000
--- a/src/components/feed/feed-playlist-track.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
-import {Avatar, ListItem, Icon} from '../ui';
-import {formatDuration} from '../../utils';
-import cn from 'classnames';
-import styles from './feed.scss';
-
-export default class PlaylistTrack extends Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    artist: PropTypes.string,
-    duration: PropTypes.number,
-    error: PropTypes.string,
-    isCurrent: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-  }
-
-  static defaultProps = {
-    duration: null,
-    isCurrent: false,
-    error: null,
-  }
-
-  render() {
-    return <ListItem
-      onClick={this._click}
-      primaryText={this._renderPrimaryText()}
-      leftElement={this._renderIcon()}
-      rightElement={this._renderChannelImage()}
-      leftElementHeight={24}
-      rightElementHeight={32}
-      className={cn(styles.track, {
-        [styles.trackCurrent]: this.props.isCurrent,
-      })} />;
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
-  _renderPrimaryText() {
-    const {title, artist, duration} = this.props;
-
-    return <span>
-      {title}
-      {artist
-        ? <span className={styles.trackArtist}> by {artist}</span>
-        : null}
-      <span className={styles.trackDuration}>{formatDuration(duration)}</span>
-    </span>;
-  }
-
-  _renderChannelImage() {
-    const {channelImage} = this.props;
-
-    if (!channelImage) {
-      return null;
-    }
-
-    return <Avatar
-      url={channelImage}
-      size={32}
-      className={styles.trackChannelImage} />;
-  }
-
-  _renderIcon() {
-    const {error, isCurrent} = this.props;
-
-    if (error === null && !isCurrent) {
-      return null;
-    }
-
-    return <Icon
-      glyph={error ? 'error' : 'play_arrow'}
-      size={24}
-      className={cn({
-        [styles.trackCurrentIcon]: isCurrent,
-        [styles.trackErrorIcon]: error !== null,
-      })} />;
-  }
-
-  _click = (event) => {
-    this.props.onClick(this.props.id, event);
-  }
-}
diff --git a/src/components/feed/feed-playlist.js b/src/components/feed/feed-playlist.js
deleted file mode 100644
index 40b1245..0000000
--- a/src/components/feed/feed-playlist.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import {LazyList, ListLabel, IconButton, EmptyState, FlatButton} from '../ui';
-import cn from 'classnames';
-import Track from './feed-playlist-track';
-import styles from './feed.scss';
-
-export default class FeedPlaylist extends Component {
-
-  static propTypes = {
-    tracks: PropTypes.array.isRequired,
-    onSelect: PropTypes.func.isRequired,
-    onToggleShuffle: PropTypes.func.isRequired,
-    onLoadMore: PropTypes.func.isRequired,
-    currentTrackId: PropTypes.string,
-    isShuffle: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    currentTrackId: null,
-    isShuffle: false,
-  }
-
-  render() {
-    const {tracks} = this.props;
-
-    if (tracks.length === 0) {
-      return <EmptyState
-          className={styles.playlist}
-          glyph="headset"
-          primaryText="Playlist is empty"
-          secondaryText="Choose any channel to get started" />;
-    }
-
-    return <div className={styles.playlist} ref="container">
-      <ListLabel
-        text={`${tracks.length} tracks`}
-        rightElement={this._renderShuffleButton()} />
-      <LazyList
-        container={this.refs.container}
-        items={tracks}
-        renderItem={this._renderTrack}
-        itemHeight={56}
-        updateDelay={10}
-        itemsBuffer={10}
-        className={styles.playlistTracks} />
-
-      <FlatButton
-        primary
-        label="Load more"
-        onClick={this.props.onLoadMore}
-        className={styles.loadMore}/>
-    </div>;
-  }
-
-  _renderTrack = (track) => {
-    return <Track
-      {...track}
-      key={track.id}
-      onClick={this.props.onSelect}
-      isCurrent={this.props.currentTrackId === track.id} />;
-  }
-
-  _renderShuffleButton() {
-    return <IconButton
-      glyph="shuffle"
-      onClick={this.props.onToggleShuffle}
-      size={24}
-      className={cn(styles.playlistShuffle, {
-        [styles.playlistShuffleActive]: this.props.isShuffle,
-      })}/>;
-  }
-}
diff --git a/src/components/feed/feed.scss b/src/components/feed/feed.scss
deleted file mode 100644
index d14fdb9..0000000
--- a/src/components/feed/feed.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import '../application/_theme.scss';
-
-.playlist {
-  flex-grow: 2;
-  padding-bottom: 32px;
-  height: 100%;
-  box-sizing: border-box;
-  overflow-y: auto;
-  padding-left: 16px;
-  padding-bottom: 48px;
-  padding-right: 16px;
-
-  &Tracks {
-    @include shadow(20px);
-    background: #fff
-  }
-
-  &Shuffle {
-    color: $secondaryTextColor;
-
-    &Active {
-      color: $primaryTextColor;
-    }
-  }
-}
-
-.track {
-  transition: background-color .1s ease-out;
-
-  &Artist {
-    color: $secondaryTextColor;
-  }
-
-  &Duration {
-    display: inline-block;
-    position: absolute;
-    right: 56px;
-    font-size: 14px;
-    color: $secondaryTextColor;
-  }
-
-  &ChannelImage {
-    opacity: .5;
-  }
-
-  &Current {
-    background-color: rgba(0, 0, 0, .08);
-
-    &Icon {
-      color: $secondaryTextColor;
-    }
-  }
-
-  &ErrorIcon {
-    color: $errorColor;
-  }
-}
-
-.loadMore {
-  display: block;
-  margin: 16px auto;
-}
diff --git a/src/components/header/header-container.js b/src/components/header/header-container.js
deleted file mode 100644
index 1a04501..0000000
--- a/src/components/header/header-container.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {selectNextTrack, refetchTrackOrError} from '../../actions/feed';
-import {getTrackById} from '../../reducers/feed';
-import Navigation from './header-navigation';
-import Player from './header-player';
-import HeaderCover from './header-cover';
-import styles from './header.scss';
-
-const routeMap = {
-  '/app/discover': 'Discover',
-};
-
-export class Header extends Component {
-  state = {
-    isPlaying: false,
-  };
-
-  render() {
-    const {isPlaying} = this.state;
-    const {currentTrack} = this.props;
-
-    return <header className={styles.header}>
-      <Navigation />
-      {currentTrack
-        ? <Player
-            isPlaying={isPlaying}
-            track={currentTrack}
-            onTogglePlay={this._togglePlaying}
-            onError={this._trackError}
-            onNext={this._nextTrack} />
-        : null}
-      <HeaderCover url={currentTrack ? currentTrack.cover : null} />
-    </header>;
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.currentTrack === null && nextProps.currentTrack !== null) {
-      this.setState({isPlaying: true});
-    }
-  }
-
-  _getPageTitle() {
-    return routeMap[this.props.route]
-      ? routeMap[this.props.route]
-      : null;
-  }
-
-  _nextTrack = () => {
-    this.props.dispatch(selectNextTrack());
-  }
-
-  _togglePlaying = () => {
-    this.setState({isPlaying: !this.state.isPlaying});
-  }
-
-  _trackError = (/*error*/) => {
-    // error is inconsistent object, skip for now
-    const {currentTrack, dispatch} = this.props;
-    dispatch(refetchTrackOrError(currentTrack, 'error'));
-  }
-}
-
-export function mapToProps(state) {
-  return {
-    currentTrack: getTrackById(state.feed, state.feed.currentTrackId),
-  };
-}
-
-export default connect(mapToProps)(Header);
diff --git a/src/components/header/header-cover.js b/src/components/header/header-cover.js
deleted file mode 100644
index acef928..0000000
--- a/src/components/header/header-cover.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import styles from './header.scss';
-
-export default class HeaderCover extends Component {
-  static propTypes = {
-    url: PropTypes.string,
-  }
-
-  static defaultProps = {
-    url: null,
-  }
-
-  render() {
-    const {url} = this.props;
-
-    return <div className={styles.cover}>
-        <div className={styles.coverImage} style={{
-          backgroundImage: url ? `url(${url})` : 'none',
-        }} />
-    </div>;
-  }
-}
diff --git a/src/components/header/header-logo.js b/src/components/header/header-logo.js
deleted file mode 100644
index 2782ac5..0000000
--- a/src/components/header/header-logo.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const HeaderLogo = ({className}) => (
-  <svg className={className} viewBox="0 0 85 89">
-    <path fill="#FF4081" fillRule="evenodd" d="M69.238 64.13l1.113-.63c18.252-10.354 18.252-27.14 0-37.494l-1.112-.63V64.13zm-7.103 4.03L33.178 84.587C14.926 94.94.13 86.327.13 65.335V24.17C.13 3.186 14.927-5.433 33.18 4.92l28.957 16.426v19.868H53.36v-21.16h-7.1v49.4h7.1V47.458h8.775v20.7zM40.48 58.42c0 1.528-.29 2.985-.87 4.372-.582 1.388-1.382 2.602-2.404 3.643-1.02 1.04-2.216 1.873-3.586 2.498-1.37.624-2.843.936-4.422.936-1.346 0-2.715-.186-4.108-.556-1.393-.37-2.646-1.006-3.76-1.908-1.114-.902-2.03-2.093-2.75-3.573-.72-1.48-1.08-3.353-1.08-5.62V31.015c0-1.62.278-3.122.836-4.51.557-1.387 1.346-2.59 2.367-3.607 1.02-1.018 2.24-1.816 3.656-2.394 1.415-.578 2.982-.867 4.7-.867 1.624 0 3.133.29 4.525.867 1.393.578 2.6 1.387 3.62 2.428 1.023 1.04 1.823 2.29 2.404 3.747.58 1.456.87 3.04.87 4.752v2.775h-7.103v-2.36c0-1.387-.395-2.59-1.184-3.607-.79-1.018-1.857-1.526-3.203-1.526-1.765 0-2.937.543-3.517 1.63-.58 1.087-.87 2.463-.87 4.128v25.255c0 1.434.313 2.637.94 3.608.626.972 1.752 1.457 3.377 1.457.464 0 .963-.08 1.497-.243.534-.162 1.02-.428 1.462-.798.44-.37.8-.88 1.08-1.527.277-.647.417-1.457.417-2.428v-2.43h7.102v3.054z"/>
-  </svg>
-);
-
-export default HeaderLogo;
diff --git a/src/components/header/header-navigation.js b/src/components/header/header-navigation.js
deleted file mode 100644
index 378b259..0000000
--- a/src/components/header/header-navigation.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {push} from 'react-router-redux';
-import Logo from './header-logo';
-import {IconButton} from '../ui';
-import styles from './header.scss';
-
-const titles = {
-  '/app/discover': 'Discover',
-};
-
-class HeaderNavigation extends Component {
-  render() {
-    if (this._isApp()) {
-      return <nav>
-        <Logo className={styles.navLogo} />
-      </nav>;
-    }
-
-    return <nav>
-      <IconButton
-        glyph="arrow_back"
-        onClick={this._back}
-        size={24}
-        boxSize={40}
-        className={styles.navBack} />
-      <div className={styles.navTitle}>
-        {titles[this._getRoute()] || null}
-      </div>
-    </nav>;
-  }
-
-  _isApp() {
-    return this._getRoute() === '/app';
-  }
-
-  _getRoute() {
-    return this.props.routing.locationBeforeTransitions.pathname;
-  }
-
-  _back = () => {
-    this.props.dispatch(push('/app'));
-  }
-}
-
-export function mapToProps(state) {
-  return {
-    routing: state.routing,
-  };
-}
-
-export default connect(mapToProps)(HeaderNavigation);
diff --git a/src/components/header/header.scss b/src/components/header/header.scss
index d46a37a..071fd47 100644
--- a/src/components/header/header.scss
+++ b/src/components/header/header.scss
@@ -1,217 +1,31 @@
-@import '../application/_theme.scss';
+@import '../app/_theme.scss';
 
-.header {
-  @include shadow(4px);
-  z-index: 4;
-  position: relative;
-  height: 60px;
-  padding: 0 16px;
-  color: $textColor;
-  background-color: $primaryColor;
-}
-
-.nav {
-  &Logo {
-    position: absolute;
-    width: 32px;
-    height: 32px;
-    top: 13px;
-    left: 24px;
-  }
-
-  &Title {
-    display: inline-block;
-    position: absolute;
-    font-size: 24px;
-    line-height: 60px;
-    left: 72px;
-  }
-
-  &Back {
-    position: absolute;
-    color: $textColor;
-    top: 10px;
-    left: 16px;
-  }
-}
-
-.cover {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  z-index: -1;
-
-  &Image {
-    position: absolute;
-    top: -12px;
-    right: -12px;
-    bottom: -12px;
-    left: -12px;
-    background-color: $primaryColor;
-    background-position-x: center;
-    background-repeat-y: repeat;
-    background-size: cover;
-    filter: blur(8px);
-    animation: cover-sliding 60s linear infinite alternate;
-    opacity: .5;
-    transition: background-image 2s ease-out;
-  }
-}
-
-.progress {
+.root {
+  display: flex;
+  height: 48px;
   box-sizing: border-box;
-  height: 16px;
-  position: absolute;
-  bottom: -6px;
-  left: 0;
-  right: 0;
-
-  &Seekable {
-    cursor: pointer;
-  }
-
-  &Background {
-    position: absolute;
-    bottom: 6px;
-    left: 0;
-    right: 0;
-    height: 4px;
-    z-index: -1;
-    background-color: rgba(255, 255, 255, .24);
-
-    &Loading {
-      background-color: transparent;
-      background-image: radial-gradient(rgb(169, 192, 233) 0%, rgb(169, 192, 233) 24%, transparent 50%);
-      background-size: 10px 10px;
-      background-position: 0px center;
-      background-repeat: repeat-x;
-      animation: progress-loading 3s infinite linear;
-    }
-  }
-
-  &Bar {
-    position: absolute;
-    background-color: $accentColor;
-    height: 4px;
-    left: 0;
-    bottom: 6px;
-    transition: width .2s linear;
-  }
-
-  &Pointer {
-    position: absolute;
-    z-index: 10;
-    top: 2px;
-    margin-left: -8px;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    opacity: 0;
-    background-color: $accentColor;
-    transform: scale(.3);
-    transition: opacity .1s ease-out, transform .2s ease-out;
-
-    &Glow {
-      position: absolute;
-      top: -6px;
-      left: -6px;
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      background-color: $accentColor;
-      opacity: .24;
-    }
-  }
-
-  &:hover .progressPointer {
-    transform: scale(1);
-    opacity: 1;
-  }
-
+  padding: 8px;
+  border-bottom: 1px solid #efefef;
 }
 
-.player {
-  position: relative;
-  height: 60px;
-  box-sizing: border-box;
-  margin-left: 280px;
-  margin-right: 16px;
-  padding: 10px 0;
-  padding-left: 96px;
-  padding-right: 64px;
-  white-space: nowrap;
-
-  &Loading {
-    padding-right: 102px;
-  }
-
-  &Loader {
-    position: absolute;
-    top: 18px;
-    right: 64px;
-  }
-
-  &Title {
-    display: inline-block;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    font-size: 24px;
-    vertical-align: middle;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &Artist {
-    font-size: 16px;
-  }
-
-  &Time {
-    position: absolute;
-    right: 4px;
-    width: 56px;
-    text-align: center;
-    font-size: 16px;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-
-  &Toggle {
-    color: $textColor;
-    position: absolute;
-    left: 0;
-  }
-
-  &Next {
-    color: $textColor;
-    position: absolute;
-    left: 48px;
-  }
+.logo {
+  width: auto;
+  height: 32px;
+  margin: 0 8px;
+  float: left;
 }
 
-@keyframes cover-sliding {
-  from {
-    background-position-y: 0%;
-  }
-  to {
-    background-position-y: 100%;
-  }
+.channels {
+  display: inline-block;
+  flex-grow: 1;
+  margin-left: 8px;
+  color: $secondaryTextColor;
+  font-size: 12px;
+  line-height: 32px;
+  text-transform: uppercase;
 }
 
-@keyframes progress-loading {
-  0% {
-    opacity: 1;
-    background-position: 0px center;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    background-position: -200px center;
-  }
+.icon {
+  margin: 4px 4px;
+  color: $secondaryTextColor;
 }
diff --git a/src/components/header/index.js b/src/components/header/index.js
new file mode 100644
index 0000000..03f9332
--- /dev/null
+++ b/src/components/header/index.js
@@ -0,0 +1,23 @@
+import React, {PropTypes} from 'react';
+import Logo from './logo';
+import IconButton from 'components/ui/icon-button';
+import styles from './header.scss';
+
+export default class Header extends React.PureComponent {
+  static propTypes = {
+    channelsCount: PropTypes.number.isRequired,
+    isDiscoverVisible: PropTypes.bool.isRequired,
+    onToggleDiscover: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {channelsCount, isDiscoverVisible, onToggleDiscover} = this.props;
+
+    return <div className={styles.root}>
+      <Logo className={styles.logo}/>
+      <div className={styles.channels}>{channelsCount} channels</div>
+      {isDiscoverVisible ||
+        <IconButton glyph="add" onClick={onToggleDiscover} className={styles.icon} />}
+    </div>;
+  }
+}
diff --git a/src/components/header/logo.js b/src/components/header/logo.js
new file mode 100644
index 0000000..417f432
--- /dev/null
+++ b/src/components/header/logo.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const _path = <path fill="#FF4081" fillRule="evenodd" d="M69.238 64.13l1.113-.63c18.252-10.354 18.252-27.14 0-37.494l-1.112-.63V64.13zm-7.103 4.03L33.178 84.587C14.926 94.94.13 86.327.13 65.335V24.17C.13 3.186 14.927-5.433 33.18 4.92l28.957 16.426v19.868H53.36v-21.16h-7.1v49.4h7.1V47.458h8.775v20.7zM40.48 58.42c0 1.528-.29 2.985-.87 4.372-.582 1.388-1.382 2.602-2.404 3.643-1.02 1.04-2.216 1.873-3.586 2.498-1.37.624-2.843.936-4.422.936-1.346 0-2.715-.186-4.108-.556-1.393-.37-2.646-1.006-3.76-1.908-1.114-.902-2.03-2.093-2.75-3.573-.72-1.48-1.08-3.353-1.08-5.62V31.015c0-1.62.278-3.122.836-4.51.557-1.387 1.346-2.59 2.367-3.607 1.02-1.018 2.24-1.816 3.656-2.394 1.415-.578 2.982-.867 4.7-.867 1.624 0 3.133.29 4.525.867 1.393.578 2.6 1.387 3.62 2.428 1.023 1.04 1.823 2.29 2.404 3.747.58 1.456.87 3.04.87 4.752v2.775h-7.103v-2.36c0-1.387-.395-2.59-1.184-3.607-.79-1.018-1.857-1.526-3.203-1.526-1.765 0-2.937.543-3.517 1.63-.58 1.087-.87 2.463-.87 4.128v25.255c0 1.434.313 2.637.94 3.608.626.972 1.752 1.457 3.377 1.457.464 0 .963-.08 1.497-.243.534-.162 1.02-.428 1.462-.798.44-.37.8-.88 1.08-1.527.277-.647.417-1.457.417-2.428v-2.43h7.102v3.054z"/>;
+
+const Logo = ({className}) => (
+  <svg className={className} viewBox="0 0 85 89">
+    {_path}
+  </svg>
+);
+
+export default Logo;
diff --git a/src/components/landing/landing-container.js b/src/components/landing/landing-container.js
deleted file mode 100644
index 1cbeed6..0000000
--- a/src/components/landing/landing-container.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router';
-
-export default class Landing extends Component {
-  render() {
-    return <div>
-      <Link to="/app">app</Link>
-    </div>;
-  }
-}
diff --git a/src/components/player/index.js b/src/components/player/index.js
new file mode 100644
index 0000000..a374998
--- /dev/null
+++ b/src/components/player/index.js
@@ -0,0 +1,85 @@
+import React, {PropTypes} from 'react';
+import {connect} from 'react-redux';
+import {getTrackById, getSortedPlaylist} from '../../reducers/feed';
+import {setCurrentTrack, selectNextTrack, setTrackError, loadMoreTracks} from '../../actions/feed';
+import Controls from 'components/controls';
+import Playlist from 'components/playlist';
+import Button from 'components/ui/button';
+import styles from './player.scss';
+
+export class Player extends React.PureComponent {
+  static propTypes = {
+    isShuffle: PropTypes.bool.isRequired,
+    tracks: PropTypes.array.isRequired,
+    currentTrack: PropTypes.object,
+  }
+
+  state = {
+    isPlaying: false,
+  }
+
+  render() {
+    const {tracks, currentTrack} = this.props;
+
+    return <div className={styles.root}>
+      <div className={styles.wrapper}>
+        <Controls
+          isPlaying={this.state.isPlaying}
+          track={currentTrack}
+          onTogglePlay={this._togglePlay}
+          onNext={this._selectNextTrack}
+          onError={this._resolveError} />
+        <Playlist
+          tracks={tracks}
+          onSelect={this._selectTrack}
+          currentTrackId={currentTrack ? currentTrack.id : null} />
+        {Boolean(tracks.length) && <Button
+          onClick={this._loadMore}
+          label="Load more"
+          className={styles.loadMore} />}
+      </div>
+    </div>;
+  }
+
+  _togglePlay = () => {
+    this.setState({isPlaying: !this.state.isPlaying});
+  }
+
+  _selectTrack = (trackId) => {
+    this.props.dispatch(setCurrentTrack(trackId));
+  }
+
+  _selectNextTrack = () => {
+    this.props.dispatch(selectNextTrack());
+  }
+
+  _loadMore = () => {
+    this.props.dispatch(loadMoreTracks());
+  }
+
+  _resolveError = () => {
+    const {dispatch, currentTrack} = this.props;
+    if (currentTrack && currentTrack.id) {
+      dispatch(setTrackError(currentTrack.id, 'error'));
+      this._selectNextTrack();
+    }
+  }
+}
+
+export function mapToProps(state) {
+  const {feed} = state;
+  const channelsById = feed.channels.reduce((acc, c) => {
+    acc[c.id] = c;
+    return acc;
+  }, {});
+
+  return {
+    currentTrack: getTrackById(feed, feed.currentTrackId),
+    isShuffle: feed.tracksSort.prop === '_seed',
+    tracks: getSortedPlaylist(feed).map((t) => {
+      return {...t, channelImage: channelsById[t.channelId].image};
+    }),
+  };
+}
+
+export default connect(mapToProps)(Player);
diff --git a/src/components/player/player.scss b/src/components/player/player.scss
new file mode 100644
index 0000000..b2bc3e3
--- /dev/null
+++ b/src/components/player/player.scss
@@ -0,0 +1,20 @@
+.root {
+  flex-grow: 1;
+  position: relative;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 16px 32px;
+  box-sizing: border-box;
+}
+
+.wrapper {
+  width: 560px;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.loadMore {
+  display: block;
+  margin: 24px auto;
+}
diff --git a/src/components/playlist/index.js b/src/components/playlist/index.js
new file mode 100644
index 0000000..b2167f4
--- /dev/null
+++ b/src/components/playlist/index.js
@@ -0,0 +1,25 @@
+import React, {PropTypes} from 'react';
+import Track from './track';
+import styles from './playlist.scss';
+
+export default class Playlist extends React.Component {
+  static propTypes = {
+    tracks: PropTypes.array.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    currentTrackId: PropTypes.string,
+  }
+
+  render() {
+    const {tracks, currentTrackId, onSelect} = this.props;
+
+    return <ul className={styles.root}>
+      {tracks.map(track => (
+        <Track
+          key={track.id}
+          onSelect={onSelect}
+          isSelected={currentTrackId === track.id}
+          {...track} />
+      ))}
+    </ul>;
+  }
+}
diff --git a/src/components/playlist/playlist.scss b/src/components/playlist/playlist.scss
new file mode 100644
index 0000000..4318958
--- /dev/null
+++ b/src/components/playlist/playlist.scss
@@ -0,0 +1,65 @@
+@import '../app/_theme.scss';
+
+.root {
+  margin: 0;
+  padding: 16px 0 0 0;
+  list-style-type: none;
+}
+
+.track {
+  display: flex;
+  position: relative;
+  height: 48px;
+  line-height: 48px;
+  font-size: 14px;
+  padding: 0 0 0 16px;
+  background-color: #fff;
+  cursor: pointer;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, .08);
+  transition: margin .2s $transformCurve,
+              box-shadow .2s $transformCurve,
+              padding .2s $transformCurve;
+
+  &Selected {
+    margin: 20px 0;
+    padding-left: 56px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
+  }
+
+  &:first-of-type:not(&Selected), &Selected + & {
+    box-shadow: 0 0 3px rgba(0, 0, 0, .08);
+  }
+
+  &:hover {
+    background-color: #f7f7f7;
+  }
+
+  &Play {
+    position: absolute;
+    top: 12px;
+    left: 16px;
+    color: transparent;
+    transition: color .15s $transformCurve;
+  }
+
+  &Selected &Play {
+    color: $secondaryTextColor;
+    transition: color .25s $transformCurve .15s;
+  }
+
+  &Name {
+    flex-grow: 2;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &Channel {
+    width: 24px;
+    height: 24px;
+    margin: 12px 8px;
+    flex-shrink: 0;
+    background-color: #efefef;
+  }
+}
diff --git a/src/components/playlist/track.js b/src/components/playlist/track.js
new file mode 100644
index 0000000..77d27b1
--- /dev/null
+++ b/src/components/playlist/track.js
@@ -0,0 +1,35 @@
+import React, {PropTypes} from 'react';
+import cn from 'classnames';
+import Icon from 'components/ui/icon';
+import Avatar from 'components/ui/avatar';
+import styles from './playlist.scss';
+
+export default class Track extends React.PureComponent {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    isSelected: PropTypes.bool.isRequired,
+    artist: PropTypes.string,
+    cover: PropTypes.string,
+    channelImage: PropTypes.string,
+  }
+
+  render() {
+    const {title, artist, cover, channelImage, isSelected} = this.props;
+
+    return <li
+      onClick={this._select}
+      className={cn(styles.track, {[styles.trackSelected]: isSelected})}>
+      <Icon glyph="play_arrow" className={styles.trackPlay} />
+      <div className={styles.trackName}>
+        {title}{artist ? ' ' + artist : null}
+      </div>
+      <Avatar url={cover || channelImage} className={styles.trackChannel} />
+    </li>;
+  }
+
+  _select = () => {
+    this.props.onSelect(this.props.id);
+  }
+}
diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
new file mode 100644
index 0000000..ec2ff2d
--- /dev/null
+++ b/src/components/sidebar/index.js
@@ -0,0 +1,48 @@
+import React, {PropTypes} from 'react';
+import {connect} from 'react-redux';
+import cn from 'classnames';
+import Header from 'components/header';
+import Channels from 'components/channels';
+import Discover from 'components/discover';
+import {setChannelEnabled} from '../../actions/feed';
+import {setDiscoverVisible} from '../../actions/discover';
+import styles from './sidebar.scss';
+
+export class Sidebar extends React.PureComponent {
+  static propTypes = {
+    channels: PropTypes.array.isRequired,
+    isChannelsLoading: PropTypes.bool.isRequired,
+    isDiscoverVisible: PropTypes.bool.isRequired,
+  }
+
+  render() {
+    const {channels, isDiscoverVisible} = this.props;
+
+    return <aside className={cn(styles.root, {[styles.rootWithDiscover]: isDiscoverVisible})}>
+      <Header
+        channelsCount={channels.length}
+        isDiscoverVisible={isDiscoverVisible}
+        onToggleDiscover={this._toggleDiscover} />
+      <Channels channels={channels} onToggleChannel={this._toggleChannel} />
+      <Discover visible={isDiscoverVisible} />
+    </aside>;
+  }
+
+  _toggleChannel = channel => {
+    this.props.dispatch(setChannelEnabled(channel, !channel.isEnabled));
+  }
+
+  _toggleDiscover = () => {
+    this.props.dispatch(setDiscoverVisible(!this.props.isDiscoverVisible));
+  }
+}
+
+export function mapStateToProps(state) {
+  return {
+    channels: state.feed.channels,
+    isChannelsLoading: Boolean(state.feed.isChannelsLoading),
+    isDiscoverVisible: state.discover.visible,
+  };
+}
+
+export default connect(mapStateToProps)(Sidebar);
diff --git a/src/components/sidebar/sidebar-container.js b/src/components/sidebar/sidebar-container.js
deleted file mode 100644
index 7ac8eab..0000000
--- a/src/components/sidebar/sidebar-container.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {push} from 'react-router-redux';
-import {
-  setChannelEnabled,
-  refreshFeedChannels,
-} from '../../actions/feed';
-import ChannelList from '../channel-list/channel-list';
-import styles from './sidebar.scss';
-
-export class Sidebar extends Component {
-  render() {
-    const {channels, isChannelsLoading} = this.props;
-
-    return <aside className={styles.root}>
-      <ChannelList
-        className={styles.channelList}
-        list={channels}
-        isRefreshing={isChannelsLoading}
-        onToggle={this._toggleChannel}
-        onRefresh={this._refreshChannels}
-        onGotoDiscover={this._gotoDiscover} />
-    </aside>;
-  }
-
-  _toggleChannel = (channel) => {
-    this.props.dispatch(setChannelEnabled(channel, !channel.isEnabled));
-  }
-
-  _refreshChannels = () => {
-    this.props.dispatch(refreshFeedChannels(this.props.channels));
-  }
-
-  _gotoDiscover = () => {
-    this.props.dispatch(push('/app/discover'));
-  }
-}
-
-export function mapToProps(state) {
-  return {
-    channels: state.feed.channels,
-    isChannelsLoading: state.feed.isChannelsLoading,
-  };
-}
-
-export default connect(mapToProps)(Sidebar);
diff --git a/src/components/sidebar/sidebar.scss b/src/components/sidebar/sidebar.scss
index 53c7dda..7416d78 100644
--- a/src/components/sidebar/sidebar.scss
+++ b/src/components/sidebar/sidebar.scss
@@ -1,15 +1,16 @@
-@import '../application/_theme.scss';
+@import '../app/_theme.scss';
+
+$channelsWidth: 240px;
+$discoverWidth: 320px;
 
 .root {
-  position: relative;
-  min-width: 280px;
-  max-width: 280px;
+  width: $channelsWidth;
   height: 100%;
-  box-sizing: border-box;
-  overflow-y: hidden;
-}
+  background: #fff;
+  @include shadow(1);
+  transition: margin-right .25s $transformCurve;
 
-.channelList {
-  height: 100%;
-  overflow-y: auto;
+  &WithDiscover {
+    margin-right: $discoverWidth;
+  }
 }
diff --git a/src/components/ui/avatar/avatar.js b/src/components/ui/avatar/avatar.js
deleted file mode 100644
index 0c62dd7..0000000
--- a/src/components/ui/avatar/avatar.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, {Component} from 'react';
-import cn from 'classnames';
-import styles from './avatar.scss';
-
-export default class Avatar extends Component {
-  static propTypes = {
-    url: React.PropTypes.string.isRequired,
-    size: React.PropTypes.number,
-  }
-
-  static defaultProps = {
-    size: 40,
-  }
-
-  render() {
-    const {url, size, className, style} = this.props;
-
-    return <span
-      className={cn(styles.avatar, className)}
-      style={{
-        ...style,
-        width: size,
-        height: size,
-        backgroundImage: `url(${url})`,
-      }} />;
-  }
-}
diff --git a/src/components/ui/avatar/index.js b/src/components/ui/avatar/index.js
new file mode 100644
index 0000000..5b9ab5f
--- /dev/null
+++ b/src/components/ui/avatar/index.js
@@ -0,0 +1,18 @@
+import React, {PropTypes} from 'react';
+import cn from 'classnames';
+import styles from './avatar.scss';
+
+export default class Avatar extends React.PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    url: PropTypes.string,
+  }
+
+  render() {
+    const {url, className} = this.props;
+
+    return <span
+      className={cn(styles.avatar, className)}
+      style={{backgroundImage: url ? `url(${url})` : null}} />;
+  }
+}
diff --git a/src/components/ui/button/button.scss b/src/components/ui/button/button.scss
index 6fcd45e..8c5194a 100644
--- a/src/components/ui/button/button.scss
+++ b/src/components/ui/button/button.scss
@@ -1,10 +1,8 @@
-@import '../../application/_theme.scss';
-
-.flat {
-  height: 36px;
-  padding: 0 24px;
-  line-height: 16px;
-  font-size: 16px;
+.button {
+  height: 32px;
+  padding: 0 14px;
+  line-height: 14px;
+  font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
   border: none;
@@ -22,40 +20,4 @@
   &:hover, &:active {
     background-color: rgba(0, 0, 0, .1);
   }
-
-  &Small {
-    height: 36px;
-    padding: 0 16px;
-    line-height: 36px;
-    font-size: 14px;
-  }
-
-  &Primary {
-    color: $primaryColor;
-
-    &:focus {
-      background-color: rgba($primaryColor, .15);
-    }
-
-    &:hover, &:active {
-      background-color: rgba($primaryColor, .1);
-    }
-  }
-}
-
-.icon {
-  display: inline-block;
-  background-color: transparent;
-  border: none;
-  outline: none;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-  border-radius: 50%;
-  transition: background-color .1s ease-out;
-
-  &:hover {
-    background-color: rgba(0,0,0,.1);
-  }
-
 }
diff --git a/src/components/ui/button/flat-button.js b/src/components/ui/button/flat-button.js
deleted file mode 100644
index 20fbaf2..0000000
--- a/src/components/ui/button/flat-button.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import cn from 'classnames';
-import styles from './button.scss';
-
-export default class FlatButton extends Component {
-  static propTypes = {
-    onClick: PropTypes.func.isRequired,
-    label: PropTypes.node.isRequired,
-    primary: PropTypes.bool,
-    small: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    primary: false,
-    small: false,
-  }
-
-  render() {
-    const {onClick, label, primary, small, className, style} = this.props;
-
-    return <button onClick={onClick} className={cn(styles.flat, {
-      [styles.flatPrimary]: primary,
-      [styles.flatSmall]: small,
-    }, className)} style={style}>
-      {label}
-    </button>;
-  }
-}
diff --git a/src/components/ui/button/icon-button.js b/src/components/ui/button/icon-button.js
deleted file mode 100644
index a1f2b81..0000000
--- a/src/components/ui/button/icon-button.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import cn from 'classnames';
-import Icon from '../icon/icon';
-import styles from './button.scss';
-
-export default class IconButton extends Component {
-  static propTypes = {
-    glyph: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-    size: PropTypes.number,
-    boxSize: PropTypes.number,
-  }
-
-  render() {
-    const {size, boxSize, glyph, onClick, className} = this.props;
-    return <button
-      className={cn(styles.icon, className)}
-      onClick={onClick}
-      style={this.props.style}>
-      <Icon size={size} boxSize={boxSize} glyph={glyph} />
-    </button>;
-  }
-}
diff --git a/src/components/ui/button/index.js b/src/components/ui/button/index.js
new file mode 100644
index 0000000..db91fd3
--- /dev/null
+++ b/src/components/ui/button/index.js
@@ -0,0 +1,19 @@
+import React, {PropTypes} from 'react';
+import cn from 'classnames';
+import styles from './button.scss';
+
+export default class Button extends React.PureComponent {
+  static propTypes = {
+    onClick: PropTypes.func.isRequired,
+    label: PropTypes.node.isRequired,
+  }
+
+  render() {
+    const {onClick, label, className} = this.props;
+
+    return <button onClick={onClick} className={cn(styles.button, {
+    }, className)}>
+      {label}
+    </button>;
+  }
+}
diff --git a/src/components/ui/icon-button/icon-button.scss b/src/components/ui/icon-button/icon-button.scss
new file mode 100644
index 0000000..c1a7762
--- /dev/null
+++ b/src/components/ui/icon-button/icon-button.scss
@@ -0,0 +1,25 @@
+.button {
+  display: inline-block;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background-color .1s ease-out;
+
+  &:hover {
+    background-color: rgba(0,0,0,.1);
+  }
+}
+
+.large {
+  height: 32px;
+  width: 32px;
+}
+
+.medium {
+  height: 24px;
+  width: 24px;
+}
diff --git a/src/components/ui/icon-button/index.js b/src/components/ui/icon-button/index.js
new file mode 100644
index 0000000..675a4ec
--- /dev/null
+++ b/src/components/ui/icon-button/index.js
@@ -0,0 +1,27 @@
+import React, {PropTypes} from 'react';
+import cn from 'classnames';
+import Icon from 'components/ui/icon';
+import styles from './icon-button.scss';
+
+export default class IconButton extends React.PureComponent {
+  static propTypes = {
+    onClick: PropTypes.func.isRequired,
+    glyph: PropTypes.string.isRequired,
+    size: PropTypes.oneOf(['large', 'medium']),
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    size: 'medium',
+  }
+
+  render() {
+    const {glyph, size, className, onClick} = this.props;
+
+    return <button
+      onClick={onClick}
+      className={cn(styles.button, className, {[styles[size]]: true})}>
+      <Icon glyph={glyph} size={size} />
+    </button>;
+  }
+}
diff --git a/src/components/ui/icon/icon.js b/src/components/ui/icon/icon.js
deleted file mode 100644
index f1e9668..0000000
--- a/src/components/ui/icon/icon.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import cn from 'classnames';
-import styles from './icon.scss';
-
-export default class Icon extends Component {
-  static propTypes = {
-    glyph: PropTypes.string.isRequired,
-    size: PropTypes.number,
-    boxSize: PropTypes.number,
-  };
-
-  static defaultProps = {
-    size: 24,
-    boxSize: null,
-  };
-
-  render() {
-    const {size, boxSize, glyph, className} = this.props;
-
-    return <span
-      className={cn('material-icons', styles.icon, className)}
-      style={{
-        ...this.props.style,
-        width: (boxSize || size),
-        height: (boxSize || size),
-        lineHeight: (boxSize || size) / size,
-        fontSize: size,
-      }}>
-      {glyph}
-    </span>;
-  }
-}
diff --git a/src/components/ui/icon/icon.scss b/src/components/ui/icon/icon.scss
index b7ce322..4fc0444 100644
--- a/src/components/ui/icon/icon.scss
+++ b/src/components/ui/icon/icon.scss
@@ -4,3 +4,17 @@
   text-align: center;
   vertical-align: middle;
 }
+
+.large {
+  height: 32px;
+  width: 32px;
+  font-size: 32px;
+  line-height: 32px;
+}
+
+.medium {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  line-height: 24px;
+}
diff --git a/src/components/ui/icon/index.js b/src/components/ui/icon/index.js
new file mode 100644
index 0000000..cfce37a
--- /dev/null
+++ b/src/components/ui/icon/index.js
@@ -0,0 +1,28 @@
+import React, {Component, PropTypes} from 'react';
+import cn from 'classnames';
+import styles from './icon.scss';
+
+export default class Icon extends Component {
+  static propTypes = {
+    glyph: PropTypes.string.isRequired,
+    size: PropTypes.oneOf(['large', 'medium']),
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    size: 'medium',
+  }
+
+  render() {
+    const {glyph, size, className} = this.props;
+
+    return <span className={cn(
+      'material-icons',
+      styles.icon,
+      className,
+      {[styles[size]]: true}
+    )}>
+      {glyph}
+    </span>;
+  }
+}
diff --git a/src/reducers/discover.js b/src/reducers/discover.js
index b03ccee..b9ba68a 100644
--- a/src/reducers/discover.js
+++ b/src/reducers/discover.js
@@ -1,17 +1,22 @@
 import {
+  DISCOVER_SET_VISIBLE,
   DISCOVER_SET_CHANNELS,
   DISCOVER_SET_LOADING,
   DISCOVER_SET_TAGS,
-} from '../actions/actionsTypes';
+} from '../actions/actions-types';
 import update from 'react-addons-update';
 
 const initialState = {
+  visible: false,
   channels: [],
   tags: [],
   isLoading: false,
 };
 
 const handlers = {
+  [DISCOVER_SET_VISIBLE]: (state, action) => {
+    return update(state, {visible: {$set: action.visible}});
+  },
   [DISCOVER_SET_CHANNELS]: (state, action) => {
     return update(state, {
       channels: {$set: action.channels},
diff --git a/src/reducers/feed.js b/src/reducers/feed.js
index abcf971..07069ff 100644
--- a/src/reducers/feed.js
+++ b/src/reducers/feed.js
@@ -8,7 +8,7 @@ import {
   FEED_SELECT_NEXT_TRACK,
   FEED_SET_SORT_TRACKS,
   FEED_SET_ERROR_TRACK,
-} from '../actions/actionsTypes';
+} from '../actions/actions-types';
 import {REHYDRATE} from 'redux-persist/constants';
 import update from 'react-addons-update';
 
diff --git a/src/server.js b/src/server.js
index eb99614..e3ca855 100644
--- a/src/server.js
+++ b/src/server.js
@@ -28,6 +28,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 app
+  .disable('x-powered-by')
   .use(bodyParser.json())
   .use('/assets', express.static(__dirname + '/../assets'))
   .use(router(express.Router()))
diff --git a/test/actions/feed_test.js b/test/actions/feed_test.js
index e557671..9988135 100644
--- a/test/actions/feed_test.js
+++ b/test/actions/feed_test.js
@@ -1,6 +1,6 @@
 import * as api from '../../src/api/browser';
 import * as actions from '../../src/actions/feed';
-import * as actionsTypes from '../../src/actions/actionsTypes';
+import * as actionsTypes from '../../src/actions/actions-types';
 
 describe('Feed actions', () => {
 
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 5987528..deeb23e 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -14,6 +14,12 @@ module.exports = {
     filename: 'bundle.js',
     publicPath: '/assets/',
   },
+  resolve: {
+    alias: {
+      components: path.join(__dirname, 'src/components'),
+      utils: path.join(__dirname, 'src/utils'),
+    },
+  },
   plugins: [
     new webpack.NoErrorsPlugin(),
     new webpack.PrefetchPlugin('react'),
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
index 42ed333..5cab7d0 100644
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@@ -14,6 +14,11 @@ module.exports = {
     filename: 'bundle.js',
     publicPath: '/assets/',
   },
+  resolve: {
+    alias: {
+      components: path.join(__dirname, 'src/components'),
+    },
+  },
   plugins: [
     new ExtractTextPlugin('style.css', {allChunks: true}),
     new webpack.optimize.OccurenceOrderPlugin(),
