diff --git a/Gulpfile.js b/Gulpfile.js
index 33ccfd6..3ed5c29 100644
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -72,7 +72,10 @@ gulp.task('dist-node-modules', function () {
     'node_modules/ngstorage/ngStorage.js',
     'node_modules/node-uuid/uuid.js',
     'node_modules/rangy/lib/rangy-core.js',
-    'node_modules/rangy/lib/rangy-serializer.js'
+    'node_modules/rangy/lib/rangy-textrange.js',
+    'node_modules/rangy/lib/rangy-serializer.js',
+    'node_modules/rangy/lib/rangy-classapplier.js',
+    'node_modules/rangy/lib/rangy-highlighter.js'
     ], {base: 'node_modules'})
   .pipe($.sourcemaps.init())
   .pipe($.concat('vendor.js'))
diff --git a/src/menu/menu.controller.ts b/src/menu/menu.controller.ts
index ecdb5a3..709c0c5 100644
--- a/src/menu/menu.controller.ts
+++ b/src/menu/menu.controller.ts
@@ -33,17 +33,14 @@ module tagIt {
 
       // Reload existing tags
       var tagsToLoad = this.tagStorageService.loadTags();
-
       this.$log.debug('these tags were found in storage');
       this.$log.debug(tagsToLoad);
-
       this.webPageService.readdTagsToPage(tagsToLoad);
     }
 
-    onSenseSelect (sense: ISense) {
+    onSenseSelected (sense: ISense) {
       var senseTag = this.webPageService.addNewTagToPage(sense);
-      this.tagStorageService.saveTag(senseTag)
-      this.backendService.sendTaggedDataToServer(senseTag);
+      this.tagStorageService.saveTag(senseTag);
       this.clearMenuVariables();
     }
 
diff --git a/src/menu/menu.tpl.html b/src/menu/menu.tpl.html
index f0f2c70..c274684 100644
--- a/src/menu/menu.tpl.html
+++ b/src/menu/menu.tpl.html
@@ -18,7 +18,7 @@
   <input type="text" ng-model="wordToFilterBy" class="form-control" placeholder="Filter tags" />
 
   <ul id="senses">
-    <li ng-click="vm.onSenseSelect(sense)" id="sense.senseid" ng-repeat="sense in vm.senses | filter:wordToFilterBy" class="list-unstyled">
+    <li ng-click="vm.onSenseSelected(sense)" id="sense.senseid" ng-repeat="sense in vm.senses | filter:wordToFilterBy" class="list-unstyled">
       <strong>{{sense.word}}</strong> {{sense.explanation}}
     </li>
   </ul>
diff --git a/src/services/tagStorage.service.ts b/src/services/tagStorage.service.ts
index 1bad22c..cfd816c 100644
--- a/src/services/tagStorage.service.ts
+++ b/src/services/tagStorage.service.ts
@@ -11,14 +11,16 @@ module tagIt {
     $http : ng.IHttpService;
     $log : ng.ILogService;
     $localStorage : any;
+    backendService : BackendService;
 
     /* @ngInject */
     constructor($http: ng.IHttpService, $log: ng.ILogService,
-      $localStorage: any) {
+      $localStorage: any, BackendService: BackendService) {
       this.$http = $http;
       this.$log = $log;
       this.$localStorage = $localStorage;
-      // this.deleteTags(); // reset tag storage
+      this.backendService = BackendService;
+      this.deleteTags(); // reset tag storage
     }
 
     deleteTagById (uuid: string) {
@@ -44,6 +46,7 @@ module tagIt {
        this.$log.debug('saving tag in localstorage:');
        this.$log.debug(tagToSave);
        this.$localStorage.tagStorage.push(tagToSave);
+       this.backendService.sendTaggedDataToServer(tagToSave);
     }
 
     loadTags () {
diff --git a/src/services/webpage.service.ts b/src/services/webpage.service.ts
index ee88fd2..be021d8 100644
--- a/src/services/webpage.service.ts
+++ b/src/services/webpage.service.ts
@@ -3,7 +3,8 @@
 module tagIt {
   /**
    * Takes care of figuring out what word
-   * is selected.
+   * is selected on the web page as well as
+   * performing page edits.
    */
 
   declare var rangy: any;
@@ -16,11 +17,37 @@ module tagIt {
     // we need to remember what the currently selected word was
     currentSelectionRange : any;
     tagStorageService: TagStorageService;
+    highlighter: any;
 
     /* @ngInject */
     constructor($log: ng.ILogService, TagStorageService: TagStorageService) {
       this.$log = $log;
       this.tagStorageService = TagStorageService;
+      this.initializeRangy();
+    }
+
+    initializeRangy () {
+      rangy.init();
+      this.highlighter = rangy.createHighlighter();
+      this.highlighter.addClassApplier(rangy.createClassApplier("tagit-tag", {
+        ignoreWhiteSpace: true,
+        tagNames: ["span", "a"]
+      }));
+
+      // this.highlighter.addClassApplier(rangy.createClassApplier("note", {
+      //   ignoreWhiteSpace: true,
+      //   elementTagName: "a",
+      //   elementProperties: {
+      //     href: "#",
+      //     onclick: function() {
+      //       var highlight = this.highlighter.getHighlightForElement(this);
+      //       if (window.confirm("Delete this note (ID " + highlight.id + ")?")) {
+      //           this.highlighter.removeHighlights( [highlight] );
+      //       }
+      //       return false;
+      //     }
+      //   }
+      // }));
     }
 
     wireUpListener (callbackOnSelectFunc : (result : Object) => void,
@@ -37,7 +64,8 @@ module tagIt {
           this.tagStorageService.deleteTagById(evt.target.parentElement.id);
         }
         else if(this.findSelectedText()) {
-          this.currentSelectionRange = this.getClonedSelectionRange();
+          // this.currentSelectionRange = this.getClonedSelectionRange();
+          this.currentSelectionRange = rangy.getSelection().getRangeAt(0);
           callbackOnSelectFunc(joinLongWords(this.findSelectedText()));
         } else {
           callbackOnDeSelectFunc();
@@ -79,8 +107,8 @@ module tagIt {
     addNewTagToPage = (sense : ISense) : ISenseTag => {
       this.$log.debug('addNewTagToPage');
       var range = this.currentSelectionRange;
-      var serializedRange = rangy.serializeRange(
-        range, false, document.getElementById('tagit-body'));
+      // var serializedRange = rangy.serializeRange(
+      //   range, false, document.getElementById('tagit-body'));
       var generatedUuid : string = uuid.v4();
       this.surroundRangeWithSpan(sense, range, generatedUuid);
 
@@ -89,7 +117,7 @@ module tagIt {
         userEmail: 'testEmail',
         sense: sense,
         context: range.commonAncestorContainer.innerText,
-        serializedSelectionRange: serializedRange
+        serializedSelectionRange: null
       }
     };
 
@@ -129,23 +157,29 @@ module tagIt {
         selection.getRangeAt(0).cloneRange(), tagToLoad.id);
     }
 
-    private surroundRangeWithSpan (sense: ISense, range: Range, uuid: string) {
-      // add span around content
-      var span : HTMLSpanElement = document.createElement('span');
-      span.id = uuid;
-      span.title = sense.explanation;
-      span.className = 'tagit-tag';
-      range.surroundContents(span);
+    private surroundRangeWithSpan (sense: ISense, range: any, uuid: string) {
+      debugger;
+      this.highlighter.highlightSelection('tagit-tag', {
+        selection: range,
+        containerElementId: 'tagit-body'
+      });
 
-      // add a button for removing the tag.
-      var btn = document.createElement("BUTTON");
-      btn.className = 'js-tagit-remove-tag';
-      btn.appendChild(document.createTextNode("X"));
-      span.appendChild(btn);
+      // // add span around content
+      // var span : HTMLSpanElement = document.createElement('span');
+      // span.id = uuid;
+      // span.title = sense.explanation;
+      // span.className = 'tagit-tag';
+      // range.surroundContents(span);
 
-      //unselect everything
-      window.getSelection()
-      .removeAllRanges();
+      // // add a button for removing the tag.
+      // var btn = document.createElement("BUTTON");
+      // btn.className = 'js-tagit-remove-tag';
+      // btn.appendChild(document.createTextNode("X"));
+      // span.appendChild(btn);
+
+      // //unselect everything
+      // window.getSelection()
+      // .removeAllRanges();
     }
 
   }