diff --git a/js/components/MainWindow/MainBalance.js b/js/components/MainWindow/MainBalance.js
index 9c67a951..d11899dc 100644
--- a/js/components/MainWindow/MainBalance.js
+++ b/js/components/MainWindow/MainBalance.js
@@ -3,10 +3,10 @@ import { connect } from "react-redux";
 
 import Balance from "../Balance";
 
-const offsetFromBalance = balance => {
+export const offsetFromBalance = balance => {
   const percent = Math.abs(balance) / 100;
-  const sprite = Math.round(percent * 28);
-  const offset = (sprite - 1) * 15;
+  const sprite = Math.floor(percent * 27);
+  const offset = sprite * 15;
   return offset;
 };
 
diff --git a/js/components/MainWindow/MainBalance.test.js b/js/components/MainWindow/MainBalance.test.js
new file mode 100644
index 00000000..34414a2e
--- /dev/null
+++ b/js/components/MainWindow/MainBalance.test.js
@@ -0,0 +1,14 @@
+import { offsetFromBalance } from "./MainBalance";
+
+describe("offsetFromBalance", () => {
+  it("works for positive numbers", () => {
+    expect(offsetFromBalance(0)).toBe(0);
+    expect(offsetFromBalance(50)).toBe(195);
+    expect(offsetFromBalance(100)).toBe(405);
+  });
+  it("works for negative numbers", () => {
+    expect(offsetFromBalance(-0)).toBe(0);
+    expect(offsetFromBalance(-50)).toBe(195);
+    expect(offsetFromBalance(-100)).toBe(405);
+  });
+});
diff --git a/js/components/MainWindow/__snapshots__/index.test.js.snap b/js/components/MainWindow/__snapshots__/index.test.js.snap
index 93bd3601..91a270b0 100644
--- a/js/components/MainWindow/__snapshots__/index.test.js.snap
+++ b/js/components/MainWindow/__snapshots__/index.test.js.snap
@@ -287,7 +287,7 @@ exports[`MainWindow renders to snapshot 1`] = `
     step="1"
     style={
       Object {
-        "backgroundPosition": "0 --15px",
+        "backgroundPosition": "0 -0px",
       }
     }
     title="Panning Bar"