diff --git a/css/equalizer-window.css b/css/equalizer-window.css
index 276dbd99..8d99e0cc 100644
--- a/css/equalizer-window.css
+++ b/css/equalizer-window.css
@@ -8,6 +8,70 @@
   height: 14px;
 }
 
+#winamp2-js #equalizer-volume {
+  position: absolute;
+  left: 60px;
+  top: 4px;
+  height: 6px;
+  width: 97px;
+  background-position: 0 0;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-volume::-webkit-slider-thumb {
+  height: 7px;
+  width: 2px;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-volume::-moz-range-thumb {
+  height: 7px;
+  width: 2px;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-volume.center::-webkit-slider-thumb {
+  width: 5px;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-volume.center::-moz-range-thumb {
+  width: 5px;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-balance {
+  position: absolute;
+  left: 164px;
+  top: 4px;
+  height: 6px;
+  width: 43px;
+  background-position: 0 0;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-balance::-webkit-slider-thumb {
+  height: 7px;
+  width: 2px;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-balance::-moz-range-thumb {
+  height: 7px;
+  width: 2px;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-balance.center::-webkit-slider-thumb {
+  width: 5px;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
+#winamp2-js #equalizer-balance.center::-moz-range-thumb {
+  width: 5px;
+  cursor: url('../cursors/POSBAR.PNG'), auto;
+}
+
 #winamp2-js .equalizer-top {
   height: 14px;
   width: 275px;
diff --git a/js/components/Balance.js b/js/components/Balance.js
new file mode 100644
index 00000000..ae0c76c3
--- /dev/null
+++ b/js/components/Balance.js
@@ -0,0 +1,31 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { setBalance } from "../actionCreators";
+import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
+
+const Balance = props =>
+  <input
+    id={props.id}
+    className={props.className}
+    type="range"
+    min="-100"
+    max="100"
+    step="1"
+    value={props.balance}
+    style={props.style}
+    onChange={props.handleChange}
+    onMouseDown={props.showMarquee}
+    onMouseUp={props.hideMarquee}
+  />;
+
+const mapDispatchToProps = dispatch => ({
+  handleChange: e => dispatch(setBalance(e.target.value)),
+  showMarquee: () => dispatch({ type: SET_FOCUS, input: "balance" }),
+  hideMarquee: () => dispatch({ type: UNSET_FOCUS })
+});
+
+export default connect(
+  state => ({ balance: state.media.balance }),
+  mapDispatchToProps
+)(Balance);
diff --git a/js/components/EqualizerWindow/EqGraph.js b/js/components/EqualizerWindow/EqGraph.js
index 30dfb155..51cded36 100644
--- a/js/components/EqualizerWindow/EqGraph.js
+++ b/js/components/EqualizerWindow/EqGraph.js
@@ -23,11 +23,17 @@ class EqGraph extends React.Component {
     this.canvasCtx.imageSmoothingEnabled = false;
     this.width = this.canvas.width * 1; // Cast to int
     this.height = this.canvas.height * 1; // Cast to int
+
+    if (this.props.lineColorsImage) {
+      this.createColorPattern(this.props.lineColorsImage);
+    }
+    if (this.props.preampLineUrl) {
+      this.createPreampLineImage(this.props.preampLineUrl);
+    }
   }
 
   componentDidUpdate() {
     this.canvasCtx.clearRect(0, 0, this.width, this.height);
-    //this.createColorPattern();
     this.drawPreampLine();
     this.drawEqLine(); // This should paint on top of the preamp line
   }
diff --git a/js/components/EqualizerWindow/index.js b/js/components/EqualizerWindow/index.js
index 043de46b..a61578b1 100644
--- a/js/components/EqualizerWindow/index.js
+++ b/js/components/EqualizerWindow/index.js
@@ -2,6 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import classnames from "classnames";
+import Volume from "../Volume";
+import Balance from "../Balance";
 
 import { BANDS, WINDOWS } from "../../constants";
 import {
@@ -30,16 +32,21 @@ import "../../../css/equalizer-window.css";
 const bandClassName = band => `band-${band}`;
 
 const EqualizerWindow = props => {
-  const { doubled, selected, closed } = props;
+  const { doubled, selected, closed, volume, balance, shade } = props;
 
   const className = classnames({
     selected,
     closed,
     doubled,
+    shade,
     window: true,
-    draggable: true,
-    shade: props.shade
+    draggable: true
   });
+
+  const v = Math.round(volume);
+  const eqVolumeClassName = v === 50 ? "center" : v > 50 ? "right" : "left";
+  const b = Math.round(balance);
+  const eqBalanceClassName = b === 0 ? "center" : v > 0 ? "right" : "left";
   return (
     <div
       id="equalizer-window"
@@ -53,6 +60,8 @@ const EqualizerWindow = props => {
               onClick={props.toggleEqualizerShadeMode}
             />
             <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
+            <Volume id="equalizer-volume" className={eqVolumeClassName} />
+            <Balance id="equalizer-balance" className={eqBalanceClassName} />
           </div>
         : <div>
             <div className="equalizer-top title-bar draggable">
@@ -118,7 +127,9 @@ const mapStateToProps = state => ({
   selected: state.windows.focused === WINDOWS.EQUALIZER,
   closed: !state.windows.equalizer,
   contextMenuSelected: state.presetsContextMenu.selected,
-  shade: state.display.equalizerShade
+  shade: state.display.equalizerShade,
+  volume: state.media.volume,
+  balance: state.media.balance
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(EqualizerWindow);
diff --git a/js/components/MainWindow/Balance.js b/js/components/MainWindow/Balance.js
deleted file mode 100644
index 571cec9c..00000000
--- a/js/components/MainWindow/Balance.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-
-import { setBalance } from "../../actionCreators";
-import { SET_FOCUS, UNSET_FOCUS } from "../../actionTypes";
-
-const offsetFromBalance = balance => {
-  const percent = Math.abs(balance) / 100;
-  const sprite = Math.round(percent * 28);
-  const offset = (sprite - 1) * 15;
-  return offset;
-};
-
-const Balance = ({ balance, handleChange, showMarquee, hideMarquee }) =>
-  <input
-    id="balance"
-    type="range"
-    min="-100"
-    max="100"
-    step="1"
-    value={balance}
-    style={{ backgroundPosition: `0 -${offsetFromBalance(balance)}px` }}
-    onChange={handleChange}
-    onMouseDown={showMarquee}
-    onMouseUp={hideMarquee}
-  />;
-
-const mapStateToProps = state => state.media;
-
-const mapDispatchToProps = dispatch => ({
-  handleChange: e => dispatch(setBalance(e.target.value)),
-  showMarquee: () => dispatch({ type: SET_FOCUS, input: "balance" }),
-  hideMarquee: () => dispatch({ type: UNSET_FOCUS })
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Balance);
diff --git a/js/components/MainWindow/MainBalance.js b/js/components/MainWindow/MainBalance.js
new file mode 100644
index 00000000..956809a1
--- /dev/null
+++ b/js/components/MainWindow/MainBalance.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import Balance from "../Balance";
+
+const offsetFromBalance = balance => {
+  const percent = Math.abs(balance) / 100;
+  const sprite = Math.round(percent * 28);
+  const offset = (sprite - 1) * 15;
+  return offset;
+};
+
+const MainBalance = props =>
+  <Balance
+    id="balance"
+    style={{ backgroundPosition: `0 -${offsetFromBalance(props.balance)}px` }}
+  />;
+
+const mapStateToProps = state => ({ balance: state.media.balance });
+
+export default connect(mapStateToProps)(MainBalance);
diff --git a/js/components/MainWindow/MainVolume.js b/js/components/MainWindow/MainVolume.js
new file mode 100644
index 00000000..1362859c
--- /dev/null
+++ b/js/components/MainWindow/MainVolume.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import Volume from "../Volume";
+
+const MainVolume = props => {
+  const { volume } = props;
+  const percent = volume / 100;
+  const sprite = Math.round(percent * 28);
+  const offset = (sprite - 1) * 15;
+
+  const style = {
+    backgroundPosition: `0 -${offset}px`
+  };
+  return <Volume style={style} id="volume" />;
+};
+
+const mapStateToProps = state => ({
+  volume: state.media.volume
+});
+
+export default connect(mapStateToProps)(MainVolume);
diff --git a/js/components/MainWindow/Volume.js b/js/components/MainWindow/Volume.js
deleted file mode 100644
index a138fe83..00000000
--- a/js/components/MainWindow/Volume.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { setVolume } from "../../actionCreators";
-
-import { SET_FOCUS, UNSET_FOCUS } from "../../actionTypes";
-
-const Volume = props => {
-  const { volume } = props;
-  const percent = volume / 100;
-  const sprite = Math.round(percent * 28);
-  const offset = (sprite - 1) * 15;
-
-  const style = {
-    backgroundPosition: `0 -${offset}px`
-  };
-
-  return (
-    <input
-      id="volume"
-      type="range"
-      min="0"
-      max="100"
-      step="1"
-      value={volume}
-      style={style}
-      onChange={props.setVolume}
-      onMouseDown={props.showMarquee}
-      onMouseUp={props.hideMarquee}
-    />
-  );
-};
-
-const mapStateToProps = state => state.media;
-
-const mapDispatchToProps = dispatch => ({
-  showMarquee: () => dispatch({ type: SET_FOCUS, input: "volume" }),
-  hideMarquee: () => dispatch({ type: UNSET_FOCUS }),
-  setVolume: e => dispatch(setVolume(e.target.value))
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Volume);
diff --git a/js/components/MainWindow/index.js b/js/components/MainWindow/index.js
index 77996f53..e0689279 100644
--- a/js/components/MainWindow/index.js
+++ b/js/components/MainWindow/index.js
@@ -5,7 +5,7 @@ import classnames from "classnames";
 import { WINDOWS } from "../../constants";
 
 import ActionButtons from "./ActionButtons";
-import Balance from "./Balance";
+import MainBalance from "./MainBalance";
 import Close from "./Close";
 import ClutterBar from "./ClutterBar";
 import MainContextMenu from "./MainContextMenu";
@@ -22,7 +22,7 @@ import ShadeTime from "./ShadeTime";
 import Shuffle from "./Shuffle";
 import Time from "./Time";
 import Visualizer from "./Visualizer";
-import Volume from "./Volume";
+import MainVolume from "./MainVolume";
 
 import { SET_FOCUSED_WINDOW, TOGGLE_CONTEXT_MENU } from "../../actionTypes";
 
@@ -115,8 +115,8 @@ export class MainWindow extends React.Component {
           <Khz />
           <MonoStereo />
         </div>
-        <Volume />
-        <Balance />
+        <MainVolume />
+        <MainBalance />
         <div className="windows">
           <EqToggleButton />
           <div id="playlist-button" />
diff --git a/js/components/Skin.js b/js/components/Skin.js
index 67b2d105..db8fa24c 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -95,7 +95,30 @@ const imageSelectors = {
   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"],
+  EQ_SHADE_VOLUME_SLIDER_LEFT: [
+    "#equalizer-volume.left::-webkit-slider-thumb",
+    "#equalizer-volume.left::-moz-range-thumb"
+  ],
+  EQ_SHADE_VOLUME_SLIDER_CENTER: [
+    "#equalizer-volume.center::-webkit-slider-thumb",
+    "#equalizer-volume.center::-moz-range-thumb"
+  ],
+  EQ_SHADE_VOLUME_SLIDER_RIGHT: [
+    "#equalizer-volume.right::-webkit-slider-thumb",
+    "#equalizer-volume.right::-moz-range-thumb"
+  ],
+  EQ_SHADE_BALANCE_SLIDER_LEFT: [
+    "#equalizer-balance.left::-webkit-slider-thumb",
+    "#equalizer-balance.left::-moz-range-thumb"
+  ],
+  EQ_SHADE_BALANCE_SLIDER_CENTER: [
+    "#equalizer-balance.center::-webkit-slider-thumb",
+    "#equalizer-balance.center::-moz-range-thumb"
+  ],
+  EQ_SHADE_BALANCE_SLIDER_RIGHT: [
+    "#equalizer-balance.right::-webkit-slider-thumb",
+    "#equalizer-balance.right::-moz-range-thumb"
+  ],
   MAIN_POSITION_SLIDER_BACKGROUND: ["#position"],
   MAIN_POSITION_SLIDER_THUMB: [
     "#position::-webkit-slider-thumb",
@@ -159,7 +182,7 @@ const imageSelectors = {
     "#button-v.selected"
   ],
   MAIN_SHADE_BACKGROUND: [".shade #title-bar"],
-  MAIN_SHADE_BACKGROUND_SELECTED: [".shade #title-bar.selected"],
+  MAIN_SHADE_BACKGROUND_SELECTED: [".shade.selected #title-bar"],
   MAIN_SHADE_BUTTON_SELECTED: [".shade #title-bar #shade"],
   MAIN_SHADE_BUTTON_SELECTED_DEPRESSED: [".shade #title-bar #shade:active"],
   MAIN_SHADE_POSITION_BACKGROUND: [".shade #position"],
diff --git a/js/components/Volume.js b/js/components/Volume.js
new file mode 100644
index 00000000..09c6bbc9
--- /dev/null
+++ b/js/components/Volume.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { connect } from "react-redux";
+import { setVolume } from "../actionCreators";
+
+import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
+
+const Volume = props =>
+  <input
+    id={props.id}
+    type="range"
+    min="0"
+    max="100"
+    step="1"
+    value={props.volume}
+    style={props.style}
+    className={props.className}
+    onChange={props.setVolume}
+    onMouseDown={props.showMarquee}
+    onMouseUp={props.hideMarquee}
+  />;
+
+const mapStateToProps = state => state.media;
+
+const mapDispatchToProps = dispatch => ({
+  showMarquee: () => dispatch({ type: SET_FOCUS, input: "volume" }),
+  hideMarquee: () => dispatch({ type: UNSET_FOCUS }),
+  setVolume: e => dispatch(setVolume(e.target.value))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Volume);
diff --git a/js/skinSprites.js b/js/skinSprites.js
index 61824e58..eb675840 100644
--- a/js/skinSprites.js
+++ b/js/skinSprites.js
@@ -226,7 +226,19 @@ export default {
       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 }
+    { name: "EQ_SHADE_VOLUME_SLIDER_LEFT", x: 1, y: 30, width: 2, height: 7 },
+    { name: "EQ_SHADE_VOLUME_SLIDER_CENTER", x: 3, y: 30, width: 5, height: 7 },
+    { name: "EQ_SHADE_VOLUME_SLIDER_RIGHT", x: 8, y: 30, width: 2, height: 7 },
+    // TODO
+    { name: "EQ_SHADE_BALANCE_SLIDER_LEFT", x: 11, y: 30, width: 2, height: 7 },
+    {
+      name: "EQ_SHADE_BALANCE_SLIDER_CENTER",
+      x: 13,
+      y: 30,
+      width: 5,
+      height: 7
+    },
+    { name: "EQ_SHADE_BALANCE_SLIDER_RIGHT", x: 18, y: 30, width: 2, height: 7 }
   ],
   EQMAIN: [
     { name: "EQ_WINDOW_BACKGROUND", x: 0, y: 0, width: 275, height: 116 },