diff --git a/src/index.html b/src/index.html
index 0eff63b..4c06ab2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,6 @@
     </div>
     <div class="container">
       <img src="img/compass.png" id="compass"/>
-      <h1 id="heading"></h1>
     </div>
     <footer>
       <a class="btn btn-success btn-lg">Continue</a>
diff --git a/src/js/app.js b/src/js/app.js
index 2be6b18..a2c66c9 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,18 +1,9 @@
-jQuery.fn.rotate = function(degrees) {
-  $(this).css({
-    '-webkit-transform' : 'rotate('+ degrees +'deg)',
-    '-moz-transform' : 'rotate('+ degrees +'deg)',
-    '-ms-transform' : 'rotate('+ degrees +'deg)',
-    'transform' : 'rotate('+ degrees +'deg)'
-  });
-  return $(this);
-};
+import './utils';
 
 
 document.addEventListener("deviceready", function () {
   function onSuccess(heading) {
-    $('#compass').rotate(-heading.magneticHeading.toFixed(0));
-    $('#heading')[0].innerHTML = -heading.magneticHeading.toFixed(0);
+    $('#compass').rotate(-heading.magneticHeading.toFixed(2));
   };
 
   function onError(compassError) {
@@ -20,8 +11,9 @@ document.addEventListener("deviceready", function () {
   };
 
   const options = {
-    frequency: 1
+    frequency: 100
   };
 
-var watchID = navigator.compass.watchHeading(onSuccess, onError, options);
+  var watchID = navigator.compass.watchHeading(onSuccess, onError, options);
+
 }, false);
diff --git a/src/less/style.less b/src/less/style.less
index 25f9c5f..5e69ecf 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -2,7 +2,7 @@
 @import "node_modules/bootstrap/less/theme";
 @import "node_modules/ionicons/less/ionicons";
 @import "node_modules/less-mixins/index";
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700);
+// @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700);
 @import (inline) "node_modules/animate.css/animate.css";
 
 * {