diff --git a/README.md b/README.md
index f5fa59b5..f2471268 100755
--- a/README.md
+++ b/README.md
@@ -10,11 +10,12 @@ Works in modern versions of Firefox, Safari and Chrome. Untested in IE.
 
 ## TODO
 
+- Shade mode
+    - Left and right position slider
 - Investigate real space text
 - Blog post
 - Test on IE 10
 - Handle "working" icon
-- Minimized "shade" view
 - Better presentation around it
 - Test other themes
 - Tool for selecting a theme
@@ -31,6 +32,7 @@ Works in modern versions of Firefox, Safari and Chrome. Untested in IE.
         - What is the line graph version?
         - What is the bar graph version?
     - What do the clutter bar letters do?
+    - Check behavior of position slider icon as it moves from left to right
 
 ## Someday Maybe
 
diff --git a/index.html b/index.html
index 60145cc0..d91dcb6d 100755
--- a/index.html
+++ b/index.html
@@ -9,6 +9,11 @@
             <audio id='player'></audio>
             <div id='title-bar' class='selected'>
                 <div id='option'></div>
+                <div id='shade-minus-sign'></div>
+                <div id='shade-minute-first-digit'></div>
+                <div id='shade-minute-second-digit'></div>
+                <div id='shade-second-first-digit'></div>
+                <div id='shade-second-second-digit'></div>
                 <div id='minimize'></div>
                 <div id='shade'></div>
                 <div id='close'></div>
diff --git a/winamp.css b/winamp.css
index a670e1db..3bc4932e 100755
--- a/winamp.css
+++ b/winamp.css
@@ -7,6 +7,13 @@ input[type=range]:focus { outline: none; }
 input[type=range]::-moz-focus-outer { border: 0; }
 a:focus { outline: none; }
 
+#shade-minute-first-digit,
+#shade-minute-second-digit,
+#shade-second-first-digit,
+#shade-second-second-digit {
+    display: none;
+}
+
 #winamp {
     position: relative;
     background-image: url('skins/default/MAIN.BMP');
@@ -15,14 +22,6 @@ a:focus { outline: none; }
     cursor:url('skins/default/MAINMENU.CUR'), auto;
 }
 
-.actions {
-    position: absolute;
-    top: 88px;
-    left: 16px;
-    height: 18px;
-    width: 114px;
-}
-
 #title-bar {
     position: absolute;
     top: 0;
@@ -374,18 +373,39 @@ a:focus { outline: none; }
     background-image: url('skins/default/CBUTTONS.BMP');
     height: 18px;
     width: 23px;
-    float: left;
+    position: absolute;
 }
 
-.actions #previous { background-position: 0 0; }
+.actions #previous {
+    top: 88px;
+    left: 16px;
+    background-position: 0 0;
+}
 .actions #previous:active { background-position: 0 -18px; }
-.actions #play { background-position: -23px 0; }
+.actions #play {
+    top: 88px;
+    left: 39px;
+    background-position: -23px 0;
+}
 .actions #play:active { background-position: -23px -18px; }
-.actions #pause { background-position: -46px 0; }
+.actions #pause {
+    top: 88px;
+    left: 62px;
+    background-position: -46px 0;
+}
 .actions #pause:active { background-position: -46px -18px; }
-.actions #stop { background-position: -69px 0; }
+.actions #stop {
+    top: 88px;
+    left: 85px;
+    background-position: -69px 0;
+}
 .actions #stop:active { background-position: -69px -18px; }
-.actions #next { background-position: -92px 0; width: 22px; }
+.actions #next {
+    top: 88px;
+    left: 108px;
+    background-position: -92px 0;
+    width: 22px;
+}
 .actions #next:active { background-position: -92px -18px; }
 
 #eject {
@@ -469,3 +489,132 @@ a:focus { outline: none; }
 }
 
 #file-input { display: none; }
+
+/* Shade View */
+#winamp.shade {
+    height: 14px;
+    overflow: hidden;
+}
+
+.shade #title-bar {
+    background-position: -27px -42px;
+}
+
+.shade #title-bar.selected {
+    background-position: -27px -29px;
+}
+
+.shade #title-bar #shade {
+    background-position: 0px -27px;
+}
+.shade #title-bar #shade:active {
+    background-position: -9px -27px;
+}
+.shade .actions div {
+    background: none;
+    position: absolute;
+}
+.shade #previous {
+    height: 10px;
+    width: 7px;
+    top: 2px;
+    left: 169px;
+}
+.shade #play {
+    height: 10px;
+    width: 10px;
+    top: 2px;
+    left: 176px;
+}
+.shade #pause {
+    height: 10px;
+    width: 9px;
+    top: 2px;
+    left: 186px;
+}
+.shade #stop {
+    height: 10px;
+    width: 9px;
+    top: 2px;
+    left: 195px;
+}
+.shade #next {
+    height: 10px;
+    width: 10px;
+    top: 2px;
+    left: 204px;
+}
+.shade #eject {
+    height: 10px;
+    width: 10px;
+    top: 2px;
+    left: 215px;
+    background: none;
+}
+
+.shade #position {
+    position: absolute;
+    left: 226px;
+    top: 4px;
+    width: 17px;
+    height: 7px;
+    background-image: url('skins/default/TITLEBAR.BMP');
+    background-position: -0px -36px;
+}
+
+.shade #position::-webkit-slider-thumb {
+    height: 7px;
+    width: 3px;
+    background-position: -20px -36px;
+    background-image: url('skins/default/TITLEBAR.BMP');
+}
+.shade #position::-moz-range-thumb {
+    height: 7px;
+    width: 3px;
+    background-position: -20px -36px;
+    background-image: url('skins/default/TITLEBAR.BMP');
+}
+.shade #position:active::-webkit-slider-thumb {
+    background-position: -20px -36px;
+}
+.shade #position:active::-moz-range-thumb {
+    background-position: -20px -36px;
+}
+
+.shade #shade-minus-sign {
+    display: block;
+    top: 5px;
+    left: 126px;
+    width: 5px;
+    height:6px;
+}
+.shade #shade-minute-first-digit {
+    display: block;
+    top: 5px;
+    left: 133px;
+    width: 5px;
+    height:6px;
+}
+
+.shade #shade-minute-second-digit {
+    display: block;
+    top: 5px;
+    left: 138px;
+    width: 5px;
+    height:6px;
+}
+.shade #shade-second-first-digit {
+    display: block;
+    top: 5px;
+    left: 147px;
+    width: 5px;
+    height:6px;
+}
+
+.shade #shade-second-second-digit {
+    display: block;
+    top: 5px;
+    left: 152px;
+    width: 5px;
+    height:6px;
+}
diff --git a/winamp.js b/winamp.js
index 2bf1394a..15f7ee3d 100755
--- a/winamp.js
+++ b/winamp.js
@@ -81,6 +81,7 @@ function Winamp () {
 
     this.nodes = {
         'close': document.getElementById('close'),
+        'shade': document.getElementById('shade'),
         'position': document.getElementById('position'),
         'fileInput': document.getElementById('file-input'),
         'time': document.getElementById('time'),
@@ -111,6 +112,10 @@ function Winamp () {
         self.media.previous();
     });
 
+    this.nodes.shade.onclick = function() {
+        self.nodes.winamp.classList.toggle('shade');
+    }
+
     this.nodes.time.onclick = function() {
         this.classList.toggle('countdown');
         self.updateTime();
@@ -204,15 +209,19 @@ function Winamp () {
         html = digitHtml(digits[0]);
         document.getElementById('minute-first-digit').innerHTML = '';
         document.getElementById('minute-first-digit').appendChild(html);
+        displayCharacterInNode(digits[0], document.getElementById('shade-minute-first-digit'));
         html = digitHtml(digits[1]);
         document.getElementById('minute-second-digit').innerHTML = '';
         document.getElementById('minute-second-digit').appendChild(html);
+        displayCharacterInNode(digits[1], document.getElementById('shade-minute-second-digit'));
         html = digitHtml(digits[2]);
         document.getElementById('second-first-digit').innerHTML = '';
         document.getElementById('second-first-digit').appendChild(html);
+        displayCharacterInNode(digits[2], document.getElementById('shade-second-first-digit'));
         html = digitHtml(digits[3]);
         document.getElementById('second-second-digit').innerHTML = '';
         document.getElementById('second-second-digit').appendChild(html);
+        displayCharacterInNode(digits[3], document.getElementById('shade-second-second-digit'));
     }
 
 
@@ -257,6 +266,21 @@ function Winamp () {
         this.updateTime();
     }
 
+    function displayCharacterInNode(character, node) {
+        position = charPosition(character);
+        row = position[0];
+        column = position[1];
+        verticalOffset = row * 6;
+        horizontalOffset = column * 5;
+
+        x = '-' + horizontalOffset + 'px';
+        y = '-' + verticalOffset + 'px'
+        node.style.backgroundPosition =  x + ' ' + y;
+        node.classList.add('character');
+        node.innerHTML = character;
+        return node;
+    }
+
     function digitHtml(digit) {
         horizontalOffset = digit * 9;
         div = document.createElement('div');
@@ -276,19 +300,7 @@ function Winamp () {
     }
 
     function charHtml(char) {
-        position = charPosition(char);
-        row = position[0];
-        column = position[1];
-        verticalOffset = row * 6;
-        horizontalOffset = column * 5;
-
-        div = document.createElement('div');
-        div.classList.add('character');
-        x = '-' + horizontalOffset + 'px';
-        y = '-' + verticalOffset + 'px'
-        div.style.backgroundPosition =  x + ' ' + y;
-        div.innerHTML = char;
-        return div;
+        return displayCharacterInNode(char, document.createElement('div'));
     }
 
     function charPosition(char) {