diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.html b/web/gui/src/main/webapp/_bripc/svg-exercise.html
index 785a3a7..f9c11b8 100644
--- a/web/gui/src/main/webapp/_bripc/svg-exercise.html
+++ b/web/gui/src/main/webapp/_bripc/svg-exercise.html
@@ -38,47 +38,51 @@
             font-family: Arial, Helvetica, sans-serif;
             font-size: 9pt;
             margin: 0;
+            overflow: hidden;
         }
         .button {
             fill: #369;
-            /* TODO: figure out why svg filters are not working */
-            /* is it because there is an invisible rectangle behind it? */
-            /*filter: url(#innerbevel);*/
+            filter: url(#buttonBevel);
         }
         svg text {
             fill: white;
             letter-spacing: .005em;
         }
-        defs {
-            display: none;
-        }
     </style>
 </head>
 
 <body ng-app="svgExercise">
+
 <div id="svgExDiv" ng-controller="svgExCtrl as ctrl">
     <improve-performance></improve-performance>
 </div>
 
-<svg>
-    <defs>
-        <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
-            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
-            <feOffset dy="-1" dx="-1"/>
-            <feComposite in2="SourceAlpha" operator="arithmetic"
-                         k2="-1" k3="1" result="hlDiff"/>
-            <feFlood flood-color="white" flood-opacity=".7"/>
-            <feComposite in2="hlDiff" operator="in"/>
-            <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
-
-            <feOffset in="blur" dy="3" dx="3"/>
-            <feComposite in2="SourceAlpha" operator="arithmetic"
-                         k2="-1" k3="1" result="shadowDiff"/>
-            <feFlood flood-color="black" flood-opacity="1"/>
-            <feComposite in2="shadowDiff" operator="in"/>
-            <feComposite in2="withGlow" operator="over"/>
-        </filter>
-    </defs>
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="-10 -10 110 110"
+     visibility="hidden">
+    <filter id="buttonBevel"
+            filterUnits="objectBoundingBox"
+            x="-10%" y="-10%" width="110%" height="110%">
+        <feGaussianBlur in="SourceAlpha"
+                        stdDeviation="4"
+                        result="blur"/>
+        <feSpecularLighting in="blur"
+                            surfaceScale="7"
+                            specularConstant="0.6"
+                            specularExponent="5"
+                            result="spec"
+                            lighting-color="#4E7199">
+            <fePointLight x="-5000" y="-10000" z="20000"/>
+        </feSpecularLighting>
+        <feComposite in="spec"
+                     in2="SourceAlpha"
+                     operator="in"
+                     result="spec2"/>
+        <feComposite in="SourceGraphic"
+                     in2="spec2"
+                     operator="arithmetic"
+                     k1="0" k2="1" k3="1" k4="0" />
+    </filter>
 </svg>
 
 </body>
diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.js b/web/gui/src/main/webapp/_bripc/svg-exercise.js
index 1595f76..96ed131 100644
--- a/web/gui/src/main/webapp/_bripc/svg-exercise.js
+++ b/web/gui/src/main/webapp/_bripc/svg-exercise.js
@@ -27,9 +27,9 @@
     // constants
     var btnWidth = 175,
         btnHeight = 50,
-        hoverZone = 60,
+        hoverZone = 70,
         sectorDivisions = 3,
-        pageMargin = 10;
+        margin = 10;
 
     // svg elements
     var svg, g;
@@ -46,36 +46,6 @@
         return (axis / 2) - (dim / 2);
     }
 
-    function showSectors() {
-        for (var i = 1; i < 5; i++) {
-            var j;
-            if (i < 3) {
-                j = i;
-                svg.append('line')
-                    .attr({
-                        x1: sectorWidth * j,
-                        x2: sectorWidth * j,
-                        y1: 0,
-                        y2: winHeight,
-                        stroke: 'red',
-                        'stroke-width': '3px'
-                    });
-            }
-            else {
-                j = i - 2;
-                svg.append('line')
-                    .attr({
-                        x1: 0,
-                        x2: winWidth,
-                        y1: sectorHeight * j,
-                        y2: sectorHeight * j,
-                        stroke: 'red',
-                        'stroke-width': '3px'
-                    });
-            }
-        }
-    }
-
     function onMouseMove() {
         mouse = d3.mouse(this);
         moveButton();
@@ -91,22 +61,21 @@
 
     function selectSector() {
         var sector, row, col,
-            currSectorCol = currSector % sectorDivisions;
+            currCol = currSector % sectorDivisions;
 
         do {
             sector = Math.floor((Math.random() * 9));
             col = sector % sectorDivisions;
-        } while (col === currSectorCol);
+        } while (col === currCol);
         currSector = sector;
         row = Math.floor(sector / sectorDivisions);
 
-        // active area is the coordinates of the sector, plus or minus a margin
         return {
-            xmin: (sectorWidth * col) + pageMargin,
-            xmax: ((sectorWidth * col) + sectorWidth) - pageMargin,
-            ymin: (sectorHeight * row) + pageMargin,
-            ymax: ((sectorHeight * row) + sectorHeight) - pageMargin
-        }
+            xmin: (sectorWidth * col) + margin,
+            xmax: ((sectorWidth * col) + sectorWidth) - margin,
+            ymin: (sectorHeight * row) + margin,
+            ymax: ((sectorHeight * row) + sectorHeight) - margin
+        };
     }
 
     function selectXY(sectorCoords) {
@@ -122,7 +91,7 @@
         return {
             x: x,
             y: y
-        }
+        };
     }
 
     function gTranslate(x, y) {
@@ -163,32 +132,33 @@
                             height: winHeight + 'px'
                         });
 
-                    //showSectors();
                     g = svg.append('g');
 
-                    var button = g.append('rect')
+                    g.append('rect')
                             .attr({
                                 width: btnWidth + 'px',
                                 height: btnHeight + 'px',
                                 rx: '10px',
                                 'class': 'button'
-                            }),
-                        text = g.append('text')
-                            .style('text-anchor', 'middle')
-                            .text('Click for better performance.')
-                            .attr({
-                                x: btnWidth / 2,
-                                y: (btnHeight / 2) + 5
-                            }),
-                        rect = g.append('rect')
-                            .attr({
-                                fill: 'none',
-                                'pointer-events': 'all',
-                                width: btnWidth + hoverZone + 'px',
-                                height: btnHeight + hoverZone + 'px',
-                                x: -(hoverZone / 2),
-                                y: -(hoverZone / 2)
                             });
+
+                    g.append('text')
+                        .style('text-anchor', 'middle')
+                        .text('Click for better performance.')
+                        .attr({
+                            x: btnWidth / 2,
+                            y: (btnHeight / 2) + 5
+                        });
+
+                    g.append('rect')
+                        .attr({
+                            fill: 'none',
+                            'pointer-events': 'all',
+                            width: btnWidth + hoverZone + 'px',
+                            height: btnHeight + hoverZone + 'px',
+                            x: -(hoverZone / 2),
+                            y: -(hoverZone / 2)
+                        });
                     g.attr('transform',
                         gTranslate(centeredOnWindow(winWidth, btnWidth),
                                    centeredOnWindow(winHeight, btnHeight)));