diff --git a/css/equalizer-window.css b/css/equalizer-window.css
index 7cec6aef..276dbd99 100644
--- a/css/equalizer-window.css
+++ b/css/equalizer-window.css
@@ -4,9 +4,32 @@
   width: 275px;
 }
 
+#winamp2-js #equalizer-window.shade {
+  height: 14px;
+}
+
 #winamp2-js .equalizer-top {
   height: 14px;
   width: 275px;
+  position: relative;
+}
+
+#winamp2-js #equalizer-close {
+  position: absolute;
+  height: 9px;
+  width: 9px;
+  left: 264px;
+  top: 3px;
+  cursor: url('../cursors/MAINMENU.PNG'), auto;
+}
+
+#winamp2-js #equalizer-shade {
+  position: absolute;
+  height: 9px;
+  width: 9px;
+  left: 254px;
+  top: 3px;
+  cursor: url('../cursors/MAINMENU.PNG'), auto;
 }
 
 #winamp2-js #on {
diff --git a/js/actionCreators.js b/js/actionCreators.js
index 3943127e..58f4f529 100644
--- a/js/actionCreators.js
+++ b/js/actionCreators.js
@@ -21,7 +21,8 @@ import {
   TOGGLE_SHUFFLE,
   SET_EQ_ON,
   SET_EQ_OFF,
-  TOGGLE_EQUALIZER_SHADE_MODE
+  TOGGLE_EQUALIZER_SHADE_MODE,
+  CLOSE_EQUALIZER_WINDOW
 } from "./actionTypes";
 
 export function play() {
@@ -227,3 +228,7 @@ export function downloadPreset() {
 export function toggleEqualizerShadeMode() {
   return { type: TOGGLE_EQUALIZER_SHADE_MODE };
 }
+
+export function closeEqualizerWindow() {
+  return { type: CLOSE_EQUALIZER_WINDOW };
+}
diff --git a/js/actionTypes.js b/js/actionTypes.js
index 450ab20f..964f55b4 100644
--- a/js/actionTypes.js
+++ b/js/actionTypes.js
@@ -3,6 +3,7 @@ export const LOAD_AUDIO_FILE = "LOAD_AUDIO_FILE";
 export const CLOSE_CONTEXT_MENU = "CLOSE_CONTEXT_MENU";
 export const CLOSE_PRESETS_CONTEXT_MENU = "CLOSE_PRESET_CONTEXT_MENU";
 export const CLOSE_WINAMP = "CLOSE_WINAMP";
+export const CLOSE_EQUALIZER_WINDOW = "CLOSE_EQUALIZER_WINDOW";
 export const IS_PLAYING = "IS_PLAYING";
 export const IS_STOPPED = "IS_STOPPED";
 export const OPEN_FILE_DIALOG = "OPEN_FILE_DIALOG";
diff --git a/js/components/EqualizerWindow/index.js b/js/components/EqualizerWindow/index.js
index f6f76a4b..043de46b 100644
--- a/js/components/EqualizerWindow/index.js
+++ b/js/components/EqualizerWindow/index.js
@@ -9,7 +9,9 @@ import {
   setPreamp,
   setEqToMax,
   setEqToMid,
-  setEqToMin
+  setEqToMin,
+  closeEqualizerWindow,
+  toggleEqualizerShadeMode
 } from "../../actionCreators";
 
 import {
@@ -35,7 +37,8 @@ const EqualizerWindow = props => {
     closed,
     doubled,
     window: true,
-    draggable: true
+    draggable: true,
+    shade: props.shade
   });
   return (
     <div
@@ -44,9 +47,21 @@ const EqualizerWindow = props => {
       onClick={props.focusWindow}
     >
       {props.shade
-        ? "SHADE"
+        ? <div className="draggable">
+            <div
+              id="equalizer-shade"
+              onClick={props.toggleEqualizerShadeMode}
+            />
+            <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
+          </div>
         : <div>
-            <div className="equalizer-top title-bar draggable" />
+            <div className="equalizer-top title-bar draggable">
+              <div
+                id="equalizer-shade"
+                onClick={props.toggleEqualizerShadeMode}
+              />
+              <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
+            </div>
             <EqOn />
             <EqAuto />
             <EqGraph />
@@ -67,7 +82,7 @@ const EqualizerWindow = props => {
                 band={hertz}
                 onChange={props.setHertzValue(hertz)}
               />
-            )}}
+            )}
           </div>}
     </div>
   );
@@ -93,7 +108,9 @@ const mapDispatchToProps = dispatch => ({
     // TODO: Consider binding to a ref instead.
     // https://stackoverflow.com/a/24421834
     e.nativeEvent.stopImmediatePropagation();
-  }
+  },
+  closeEqualizerWindow: () => dispatch(closeEqualizerWindow()),
+  toggleEqualizerShadeMode: () => dispatch(toggleEqualizerShadeMode())
 });
 
 const mapStateToProps = state => ({
diff --git a/js/components/Skin.js b/js/components/Skin.js
index 9d30c3db..67b2d105 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -75,7 +75,7 @@ const imageSelectors = {
   PLAYLIST_BOTTOM_RIGHT_CORNER: [".playlist-bottom-right"],
   PLAYLIST_VISUALIZER_BACKGROUND: [".playlist-visualizer"],
   PLAYLIST_SHADE_BACKGROUND: ["#playlist.shade"],
-  EQ_WINDOW_BACKGROUND: ["#equalizer-window"],
+  EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"],
   EQ_TITLE_BAR: [".equalizer-top"],
   EQ_TITLE_BAR_SELECTED: [".selected .equalizer-top"],
   EQ_SLIDER_BACKGROUND: [".band"],
@@ -93,6 +93,9 @@ const imageSelectors = {
   EQ_PRESETS_BUTTON: ["#presets"],
   EQ_PRESETS_BUTTON_SELECTED: ["#presets:active"],
   EQ_PREAMP_LINE: ["#preamp-line"],
+  EQ_SHADE_BACKGROUND: ["#equalizer-window.shade"],
+  EQ_SHADE_BACKGROUND_SELECTED: ["#equalizer-window.shade.selected"],
+  EQ_SHADE_SLIDER: ["#equalizer-window.shade .slider"],
   MAIN_POSITION_SLIDER_BACKGROUND: ["#position"],
   MAIN_POSITION_SLIDER_THUMB: [
     "#position::-webkit-slider-thumb",
@@ -213,7 +216,11 @@ const Skin = props => {
       "#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }"
     );
   }
-  return <style type="text/css">{cssRules.join("\n")}</style>;
+  return (
+    <style type="text/css">
+      {cssRules.join("\n")}
+    </style>
+  );
 };
 
 export default connect(state => ({ skinImages: state.display.skinImages }))(
diff --git a/js/reducers.js b/js/reducers.js
index 8bc80e06..9ec09099 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -20,6 +20,7 @@ import {
   TOGGLE_PRESETS_CONTEXT_MENU,
   TOGGLE_DOUBLESIZE_MODE,
   TOGGLE_EQUALIZER_WINDOW,
+  CLOSE_EQUALIZER_WINDOW,
   SET_EQ_AUTO,
   SET_EQ_ON,
   SET_EQ_OFF,
@@ -68,6 +69,8 @@ const windows = (state, action) => {
         return state;
       }
       return { ...state, equalizer: !state.equalizer };
+    case CLOSE_EQUALIZER_WINDOW:
+      return { ...state, equalizer: false };
     default:
       return state;
   }
@@ -96,7 +99,7 @@ const display = (state, action) => {
     case TOGGLE_SHADE_MODE:
       return { ...state, shade: !state.shade };
     case TOGGLE_EQUALIZER_SHADE_MODE:
-      return { ...state, equalizerShade: !state.shade };
+      return { ...state, equalizerShade: !state.equalizerShade };
     case TOGGLE_LLAMA_MODE:
       return { ...state, llama: !state.llama };
     case STEP_MARQUEE:
diff --git a/js/skinSprites.js b/js/skinSprites.js
index cb0b8f1e..61824e58 100644
--- a/js/skinSprites.js
+++ b/js/skinSprites.js
@@ -217,6 +217,17 @@ export default {
     },
     { name: "PLAYLIST_SHADE_BACKGROUND", x: 72, y: 57, width: 25, height: 14 }
   ],
+  EQ_EX: [
+    {
+      name: "EQ_SHADE_BACKGROUND_SELECTED",
+      x: 0,
+      y: 0,
+      width: 275,
+      height: 14
+    },
+    { name: "EQ_SHADE_BACKGROUND", x: 0, y: 15, width: 275, height: 14 },
+    { name: "EQ_SHADE_SLIDER", x: 1, y: 30, width: 9, height: 7 }
+  ],
   EQMAIN: [
     { name: "EQ_WINDOW_BACKGROUND", x: 0, y: 0, width: 275, height: 116 },
     { name: "EQ_TITLE_BAR", x: 0, y: 149, width: 275, height: 14 },