diff --git a/src/components/album-list.jsx b/src/components/album-list.jsx
index 30ca062..fea8a95 100644
--- a/src/components/album-list.jsx
+++ b/src/components/album-list.jsx
@@ -5,11 +5,18 @@ export default class AlbumList extends Component {
     render() {
         const {
             albums,
+            handleOnClick,
+            blurred,
         } = this.props;
+        const classNames = blurred ? 'blur' : ''
         return (
-            <div id="albums">
+            <div id="albums" className={classNames}>
                 {albums.map(album => (
-                    <Album key={album.id} {...album} />
+                    <Album
+                        key={album.id}
+                        album={album}
+                        handleOnClick={handleOnClick} 
+                    />
                 ))}
             </div>
         );
diff --git a/src/components/album.jsx b/src/components/album.jsx
index f0e2df5..096742e 100644
--- a/src/components/album.jsx
+++ b/src/components/album.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 export default class Album extends Component {
     render() {
+        const { album, handleOnClick } = this.props
         const {
             id,
             artist,
@@ -10,11 +11,11 @@ export default class Album extends Component {
             year,
             img,
             purchased_on,
-        } = this.props;
+        } = album;
         const imagePath = `assets/covers/${img}`;
         const song = songs.join(', ');
         return (
-            <article>
+            <article onClick={() => handleOnClick(album)}>
                 <figure>
                     <img src={imagePath} alt="cover" />
                 </figure>
diff --git a/src/containers/album-list.js b/src/containers/album-list.js
index 53d517d..e751903 100644
--- a/src/containers/album-list.js
+++ b/src/containers/album-list.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import AlbumList from '../components/album-list';
+import { selectAlbum } from '../actions'
 
 const getAlbums = (albums, filter) => {
     const atos = o => [o.artist, o.title, o.songs.join(' '), o.year].join(' ').toLowerCase();
@@ -13,6 +14,11 @@ const getAlbums = (albums, filter) => {
 
 const mapStateToProps = state => ({
     albums: getAlbums(state.albums, state.visibilityFilter),
+    blurred: "id" in state.selectedAlbum,
 });
 
-export default connect(mapStateToProps)(AlbumList);
+const mapDispatchToProps = dispatch => ({
+    handleOnClick: album => dispatch(selectAlbum(album)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);