diff --git a/assets/style.css b/assets/style.css
index 7cbebd0..cc1354d 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,173 +1,227 @@
-/* === Base === */
-body {
-    background-color: #111;
-    color: #aaa;
-    font-size: large;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-    padding: 5rem 10rem;
-}
-
-a:link {
-    color: #a83;
-}
-
-a:visited {
-    color: #a83;
-    text-decoration: line-through;
-}
-
-a:hover, a:focus {
-    color: #fff;
-}
-
-a:active {
-    transform: translate(2px, 2px);
-}
-
-header {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 3px solid #a83;
-    padding: 1.25rem 0;
-    margin: 1rem 0;
-}
-
-h1 {
-    text-transform: uppercase;
-    margin: 0;
-}
-
-input {
-    background-color: #333;
-    color: #fff;
-    border-width: 0;
-    border-bottom: 3px solid #555;
-    font-size: large;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-    padding: .5rem 1rem;
-    min-width: 17em;
-}
-
-input:hover {
-    background-color: #444;
-    border-color: #777;
-}
-
-input:focus {
-    background-color: #fff;
-    color: #000;
-    border-color: #a83;
-}
-
-footer {
-    color: #888;
-    font-size: small;
-    position: fixed;
-    transform: rotate(45deg) translate(2em, 3em);
-    top: 0;
-    right: 0;
-}
-
-/* === /Base === */
-/* === Helpers === */
-
-.blur {
-    filter: blur(25px);
-}
-
-/* === /Helpers === */
-/* === Albums === */
-
-.album {
-    display: flex;
-    align-items: center;
-}
-
-.album:hover {
-    background: #333;
-    color: #fff;
-    transform: scale(1.05, 1.05);
-    transition: transform .4s linear;
-}
-
-.album__cover {
-    margin: 1rem;
-}
-
-.album__cover__media {
-    width: 10vw;
-    height: 10vw;
-    padding: 5px;
-    display: block;
-    border: 1px solid #a83;
-    background-color: #000;
-}
-
-.album__cover__media:hover {
-    transform: scale(1.5, 1.5) translateX(-1.5rem);
-    transition: transform .2s linear;
-}
-
-@media (min-width: 600px) {
-    .albums {
-        display: grid;
-        grid-template-columns: auto auto auto;
-        grid-gap: 10px;
-        text-transform: uppercase;
-    }
-}
-
-/* === /Albums === */
-/* === Selected album === */
-
-.selected-album__inner {
-    display: grid;
-    max-width: 80%;
-    transform: translateY(-3em);
-    grid-template-columns: 1fr 1fr; 
-    grid-template-rows: 1fr 2fr; 
-}
-
-.selected-album__cover {
-    grid-column: 1;
-    grid-row: 1 / 3;
-    margin: 0;
-}
-
-.selected-album__cover__media {
-    width: 100%;
-    padding: 0;
-    border: 0;
-    height: 100%;
-    object-fit: cover;
-}
-
-.selected-album__summary {
-    align-self: end;
-    text-transform: uppercase;
-    padding: 0 1rem;
-}
-
-.selected-album__description {
-    color: #fff;
-    margin: 0;
-    font-size: 1.5rem;
-    align-self: start;
-    padding: 0 1rem;
-}    
-
-@media (min-width: 600px) {
-    .selected-album {
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2;
-    }
-}
-
-/* === /Selected album === */
\ No newline at end of file
+/* === Base === */
+body {
+    background-color: #111;
+    color: #aaa;
+    font-size: large;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+    padding: 0;
+    margin: 0 auto;
+    max-width: 80em;
+}
+
+a:link {
+    color: #a83;
+}
+
+a:visited {
+    color: #a83;
+    text-decoration: line-through;
+}
+
+a:hover, a:focus {
+    color: #fff;
+}
+
+a:active {
+    transform: translate(2px, 2px);
+}
+
+header {
+    border-bottom: 3px solid #a83;
+    padding: 0.5em 0.5em;
+    margin-bottom: 0.5em;
+    align-items: center;
+}
+
+@media (min-width: 500px) {
+    header {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.5em;
+        margin: 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    header {
+        margin: 0.5em 0;
+    }
+}
+
+h1 {
+    text-transform: uppercase;
+    margin: 0;
+    font-size: 1.5em;
+}
+
+p:first-child {
+    margin-top: 0;
+}
+
+p:last-child {
+    margin-bottom: 0;
+}
+
+input {
+    background-color: #333;
+    color: #fff;
+    border-width: 0;
+    border-radius: 5px;
+    font-size: large;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+    padding: .5rem 1rem;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 0.5em;
+}
+
+input:hover {
+    background-color: #444;
+}
+
+input:focus {
+    background-color: #fff;
+    color: #000;
+}
+
+@media (min-width: 500px) {
+    input {
+        min-width: 17em;
+        margin-top: 0;
+    }
+}
+
+/* === /Base === */
+/* === Helpers === */
+
+.blur {
+    filter: blur(25px);
+}
+
+/* === /Helpers === */
+/* === Albums === */
+
+.album {
+    display: flex;
+    align-items: start;
+    padding: 0.5em;
+    margin: 0.8em 0;
+}
+
+@media (min-width: 500px) {
+    .album {
+        flex-direction: column;
+        margin: 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    .album {
+        flex-direction: row;
+        align-items: center;
+    }
+}
+
+.album:hover {
+    background: #333;
+    color: #fff;
+}
+
+.album__cover {
+    margin: 0 0.5em 0 0;
+    padding-top: 7px;
+}
+
+@media (min-width: 500px) {
+    .album__cover {
+        margin: 0 0 0.5em;
+        padding-top: 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    .album__cover {
+        margin: 0 1em 0 0;
+        padding-top: 0;
+    }
+}
+
+.album__cover__media {
+    width: 25vw;
+    height: 25vw;
+    position: relative;
+}
+
+.album__cover__media:after {
+    position: absolute;
+    content: '';
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    z-index: 10;
+}
+
+@media (min-width: 500px) {
+    .album__cover__media {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .album__cover__media {
+        width: 10vw;
+        height: 10vw;
+    }
+}
+
+@media (min-width: 500px) {
+    .albums {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 0.5em;
+        text-transform: uppercase;
+        padding-bottom: 2em;
+    }
+}
+
+/* === /Albums === */
+/* === Selected album === */
+
+.selected-album {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.selected-album__inner {
+    display: flex;
+    height: 100%;
+    overflow: auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.selected-album__summary {
+    text-transform: uppercase;
+    padding: 0.5em;
+    background-color: #000;
+    margin-bottom: 0.5em;
+}
+
+.selected-album__description {
+    color: #fff;
+    padding: 0.5rem;
+    overflow: auto;
+    margin: 0;
+    max-width: 40em;
+    background-color: #000;
+}
+
+/* === /Selected album === */
diff --git a/index.html b/index.html
index 12570d0..4c3dfa0 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
   </head>
   <body>
     <div id="brutal"></div>
-    <footer>av <a href="https://madr.se" rel="author">madr</a> 2018</footer>
   </body>
   <script src="bundle.js"></script>
 </html>
diff --git a/src/components/album-list.jsx b/src/components/album-list.jsx
index 868ec1a..c286747 100644
--- a/src/components/album-list.jsx
+++ b/src/components/album-list.jsx
@@ -1,24 +1,24 @@
-import React, { Component } from 'react';
-import Album from './album';
-
-export default class AlbumList extends Component {
-    render() {
-        const {
-            albums,
-            handleOnClick,
-            blurred,
-        } = this.props;
-        const classNames = blurred ? 'blur' : ''
-        return (
-            <div className={"albums " + classNames}>
-                {albums.map(album => (
-                    <Album
-                        key={album.id}
-                        album={album}
-                        handleOnClick={handleOnClick} 
-                    />
-                ))}
-            </div>
-        );
-    }
-}
+import React, { Component } from 'react';
+import Album from './album';
+
+export default class AlbumList extends Component {
+    render() {
+        const {
+            albums,
+            handleOnClick,
+            blurred,
+        } = this.props;
+        const classNames = blurred ? 'blur' : ''
+        return (
+            <div className={"albums " + classNames}>
+                {albums.map(album => (
+                    <Album
+                        key={album.id}
+                        album={album}
+                        handleOnClick={handleOnClick}
+                    />
+                ))}
+            </div>
+        );
+    }
+}
diff --git a/src/components/album.jsx b/src/components/album.jsx
index 5b7f660..b2c1250 100644
--- a/src/components/album.jsx
+++ b/src/components/album.jsx
@@ -1,29 +1,38 @@
-import React, { Component } from 'react';
-
-export default class Album extends Component {
-    render() {
-        const { album, handleOnClick } = this.props;
-        const {
-            id,
-            artist,
-            title,
-            songs,
-            year,
-            img,
-            purchased_on,
-        } = album;
-        const imagePath = `assets/covers/${img}`;
-        const song = songs.join(', ');
-        return (
-            <article className="album" onClick={() => handleOnClick(album)}>
-                <figure className="album__cover">
-                    <img src={imagePath} alt="cover" className="album__cover__media" />
-                </figure>
-                <span>
-                    #{id+1}: {artist} - {song}, från "{title}" ({year})<br />
-                    <small>✔️ {purchased_on}</small>
-                </span>
-            </article>
-        );
-    }
-}
+import React, { Component } from 'react';
+
+export default class Album extends Component {
+    handleKeyPress(e, callback) {
+        const SPACE_KEY = 32
+        const ENTER_KEY = 13
+        if (e.charCode === SPACE_KEY || e.charCode === ENTER_KEY) {
+            e.preventDefault();
+            callback();
+        }
+    }
+
+    render() {
+        const { album, handleOnClick } = this.props;
+        const {
+            id,
+            artist,
+            title,
+            songs,
+            year,
+            img,
+            purchased_on,
+        } = album;
+        const imagePath = `assets/covers/${img}`;
+        const song = songs.join(', ');
+        return (
+            <article className="album" tabIndex="0" role="button" onClick={() => handleOnClick(album)}>
+                <figure className="album__cover">
+                    <img src={imagePath} alt="cover" className="album__cover__media" />
+                </figure>
+                <span>
+                    #{id+1}: {artist} - {song}, från "{title}" ({year})<br />
+                    <small>✔️ {purchased_on}</small>
+                </span>
+            </article>
+        );
+    }
+}
diff --git a/src/components/modal.jsx b/src/components/modal.jsx
index 98afe92..ec51921 100644
--- a/src/components/modal.jsx
+++ b/src/components/modal.jsx
@@ -1,42 +1,46 @@
-import React, { Component } from 'react';
-
-export default class Modal extends Component {
-    render() {
-        const {
-            id,
-            artist,
-            title,
-            songs,
-            year,
-            img,
-            description,
-            handleOnClick,
-        } = this.props;
-        if (id === undefined) {
-            return '';
-        }
-        const imagePath = `assets/covers/${img}`;
-        const song = songs.join(', ');
-        return (
-            <div className="selected-album" tabIndex="0" onClick={handleOnClick}>
-                <div className="selected-album__inner">
-                    <figure className="selected-album__cover">
-                        <img src={imagePath} alt="cover" className="selected-album__cover__media" />
-                    </figure>
-                    <span className="selected-album__summary">
-                        #{id+1}: {artist} - {song}, från "{title}" ({year})<br />
-                    </span>
-                    <p className="selected-album__description">
-                        {description.split('\n\n').map(text => (
-                            <React.Fragment>
-                                {text}
-                                <br />
-                                <br />
-                            </React.Fragment>
-                        ))}
-                    </p>
-                </div>
-            </div>
-        );
-    }
-}
+import React, { Component } from 'react';
+
+export default class Modal extends Component {
+    handleKeyPress(e, callback) {
+        alert("sdsdsd")
+        console.log(e.charCode)
+        callback();
+    }
+
+    render() {
+        const {
+            id,
+            artist,
+            title,
+            songs,
+            year,
+            img,
+            description,
+            handleOnClick,
+        } = this.props;
+        if (id === undefined) {
+            return '';
+        }
+        const imagePath = `assets/covers/${img}`;
+        const song = songs.join(', ');
+        return (
+            <div className="selected-album"
+            tabIndex="0"
+            onClick={handleOnClick}
+            onKeyPress={e => this.handleKeyPress(e, handleOnClick)}>
+                <div className="selected-album__inner">
+                    <span className="selected-album__summary">
+                        #{id+1}: {artist} - {song}, från "{title}" ({year})<br />
+                    </span>
+                    <div className="selected-album__description">
+                        {description.split('\n\n').map(text => (
+                            <p key={text}>
+                                {text}
+                            </p>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}