diff --git a/assets/css/common.css.sass b/assets/css/common.css.sass
new file mode 100644
index 0000000..e69de29
diff --git a/assets/css/controls.css.sass b/assets/css/controls.css.sass
new file mode 100644
index 0000000..f60dbe5
--- /dev/null
+++ b/assets/css/controls.css.sass
@@ -0,0 +1,2 @@
+#controls button
+ @extend .icon
diff --git a/assets/css/includes/fonts.css.sass b/assets/css/includes/fonts.css.sass
new file mode 100644
index 0000000..24f9362
--- /dev/null
+++ b/assets/css/includes/fonts.css.sass
@@ -0,0 +1,94 @@
+@font-face
+ font-family: 'icomoon'
+ src: url('icomoon.eot')
+ src: url('icomoon.eot?#iefix') format("embedded-opentype"), url('icomoon.ttf') format("truetype"), url('icomoon.woff') format("woff"), url('icomoon.svg#icomoon') format("svg")
+ font-weight: normal
+ font-style: normal
+
+.icon
+ font-family: 'icomoon'
+ speak: none
+ font-style: normal
+ font-weight: normal
+ font-variant: normal
+ text-transform: none
+ line-height: 1
+ /* Enable Ligatures ================
+ -webkit-font-feature-settings: "liga"
+ -moz-font-feature-settings: "liga=1"
+ -moz-font-feature-settings: "liga"
+ -ms-font-feature-settings: "liga" 1
+ -o-font-feature-settings: "liga"
+ font-feature-settings: "liga"
+ /* Better Font Rendering ===========
+ -webkit-font-smoothing: antialiased
+ -moz-osx-font-smoothing: grayscale
+
+[class*="icon-"]
+ @extend .icon
+
+.icon-music:before
+ content: "\e600"
+
+.icon-volume-off:before
+ content: "\e601"
+
+.icon-volume-down:before
+ content: "\e602"
+
+.icon-volume-up:before
+ content: "\e603"
+
+.icon-headphones:before
+ content: "\e604"
+
+.icon-step-backward:before
+ content: "\e605"
+
+.icon-fast-backward:before
+ content: "\e606"
+
+.icon-backward:before
+ content: "\e607"
+
+.icon-play:before
+ content: "\e608"
+
+.icon-pause:before
+ content: "\e609"
+
+.icon-stop:before
+ content: "\e60a"
+
+.icon-forward:before
+ content: "\e60b"
+
+.icon-fast-forward:before
+ content: "\e60c"
+
+.icon-step-forward:before
+ content: "\e60d"
+
+.icon-eject:before
+ content: "\e60e"
+
+.icon-plus:before
+ content: "\e60f"
+
+.icon-minus:before
+ content: "\e610"
+
+.icon-cog:before
+ content: "\e611"
+
+.icon-star:before
+ content: "\e612"
+
+.icon-star-empty:before
+ content: "\e613"
+
+.icon-ok:before
+ content: "\e614"
+
+.icon-remove:before
+ content: "\e615"
diff --git a/assets/css/mpd-client.css.sass b/assets/css/mpd-client.css.sass
new file mode 100644
index 0000000..7f3a3d2
--- /dev/null
+++ b/assets/css/mpd-client.css.sass
@@ -0,0 +1,4 @@
+@import 'includes/fonts'
+@import 'common'
+@import 'controls'
+@import 'queue'
diff --git a/assets/css/queue.css.sass b/assets/css/queue.css.sass
new file mode 100644
index 0000000..6d80b9c
--- /dev/null
+++ b/assets/css/queue.css.sass
@@ -0,0 +1,2 @@
+#queue .current
+ font-weight: bold
diff --git a/views/index.erb b/views/index.erb
index 623e18b..43d59f8 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -2,11 +2,7 @@
MPD Client
-
+ <%= stylesheet_tag 'mpd-client' %>