diff --git a/css/jquery.tagit.css b/css/jquery.tagit.css
index a790e2dc..9c9ef369 100644
--- a/css/jquery.tagit.css
+++ b/css/jquery.tagit.css
@@ -1,4 +1,4 @@
-.ui-autocomplete {
+/*.ui-autocomplete {
 	background-color: #eee;
 	position: absolute;
 	cursor: default;
@@ -7,79 +7,65 @@
     list-style: none;
 }
 .ui-autocomplete  .ui-menu-item a {
-	display:block;
-	padding:4px 6px;
-	text-decoration:none;
-	line-height:12px;
+	display: block;
+	padding: 4px 6px;
+	text-decoration: none;
+	line-height: 12px;
 }
 .ui-autocomplete .ui-menu-item a.ui-state-hover,
 .ui-autocomplete .ui-menu-item a.ui-state-active {
-	background-color:#78959D;
-	color:#fff;
-	margin:0;
+	background-color: #78959D;
+	color: #fff;
+	margin: 0;
 }
-
+*/
 ul.tagit {
-	padding:1px 5px;
-	border-style:solid;
-	border-width:1px;
-	border-color:#C6C6C6;
-	overflow:auto;
+	padding: 1px 5px;
+	overflow: auto;
 }
 ul.tagit li {
-	-moz-border-radius:5px 5px 5px 5px;
-	border-radius:5px 5px 5px 5px;
-	-webkit-border-radius:5px 5px 5px 5px;
 	display: block;
 	float: left;
-	margin:2px 5px 2px 0;
+	margin: 2px 5px 2px 0;
 }
 ul.tagit li.tagit-choice {
-	background-color:#DEE7F8;
-	border:1px solid #CAD8F3;
-	padding:2px 4px 3px;
-}
-ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
-	background-color:#bbcef1;
-	border-color:#6d95e0;
+	padding: .2em 18px .2em .5em;
+    position: relative;
 }
 ul.tagit li.tagit-new {
-	padding:2px 4px 3px;
-	padding:2px 4px 1px;
-	padding:2px 4px 1px 0;
+	padding: 2px 4px 1px 0;
 }
-
 ul.tagit li.tagit-choice input {
-	display:block;
-	float:left;
-	margin:2px 5px 2px 0;
+	display: block;
+	float: left;
+	margin: 2px 5px 2px 0;
 }
 ul.tagit li.tagit-choice a.tagLabel {
-	cursor:pointer;
-	text-decoration:none;
+	cursor: pointer;
+	text-decoration: none;
 }
 ul.tagit li.tagit-choice a.close {
-	color:#777777;
-	cursor:pointer;
-	font-weight:bold;
-	outline:medium none;
-	padding:2px 0 2px 3px;
-	text-decoration:none;
-}
-ul.tagit li.tagit-choice a.tagLabel:hover
-ul.tagit li.tagit-choice a.close:hover {
-  color:#222;
+	cursor: pointer;
 }
 ul.tagit input[type="text"] {
-  -moz-box-sizing:    border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing:         border-box;
-    border:none;
-	margin:0;
-	padding:0;
-	width:inherit;
-	border-color:#C6C6C6;
-	background-color:#FFFFFF;
-	color:#333333;
+    -moz-box-sizing:    border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing:         border-box;
+
+    border: none;
+	margin: 0;
+	padding: 0;
+	width: inherit;
+	border-color: #C6C6C6;
+	background-color: #FFFFFF;
+	color: #333333;
     outline: none;
 }
+ul.tagit .tagit-choice a.ui-icon {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    margin-top: -8px;
+    right: .1em;
+}
+
diff --git a/css/tagit.ui-zendesk.css b/css/tagit.ui-zendesk.css
new file mode 100644
index 00000000..5699436a
--- /dev/null
+++ b/css/tagit.ui-zendesk.css
@@ -0,0 +1,48 @@
+
+/* Optional scoped theme for tag-it which mimics the zendesk widget. */
+
+
+ul.tagit {
+	border-style: solid;
+	border-width: 1px;
+	border-color: #C6C6C6;
+}
+ul.tagit li.tagit-choice {
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-border-radius: 6px;
+	border: 1px solid #CAD8F3;
+
+    background: none;
+	background-color: #DEE7F8;
+
+    color: #555;
+    font-weight: normal;
+}
+ul.tagit .tagit-choice a.ui-icon {
+    right: .4em;
+}
+ul.tagit li.tagit-choice a.close {
+    text-decoration: none;
+}
+ul.tagit li.tagit-choice a.ui-icon {
+    background-image: none;
+    text-indent: inherit;
+    width: inherit;
+    height: inherit;
+}
+ul.tagit li.tagit-choice a.close:before {
+    content: '×';
+    font-weight: bold;
+    color: #777;
+}
+ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
+    background-color: #bbcef1;
+    border-color: #6d95e0;
+}
+ul.tagit li.tagit-choice a.tagLabel:hover,
+ul.tagit li.tagit-choice a.close:hover:before {
+    color: #222;
+}
+ 
+
diff --git a/example.html b/example.html
index 118e6beb..3eb5c9e1 100644
--- a/example.html
+++ b/example.html
@@ -8,7 +8,10 @@
 	<!--<link href="css/reset.css" rel="stylesheet" type="text/css">-->
 	<link href="css/master.css" rel="stylesheet" type="text/css">
 
-	<link href="css/jquery-ui/jquery.ui.autocomplete.custom.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
+	<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">
+	<!--<link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">-->
+
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
 
diff --git a/js/tag-it.js b/js/tag-it.js
index 3281cdf3..337ba0b8 100644
--- a/js/tag-it.js
+++ b/js/tag-it.js
@@ -1,7 +1,3 @@
-        /*if (options_or_action == 'clear') {
-            // Resets the widget, removing all tags
-            return this; // for chainability
-        } else {*/
 
 (function($) {
 
@@ -40,7 +36,7 @@
             var self = this;
 
             this.tagList = this.element;
-            this._tagInput  = $('<input class="tagit-input" type="text" ' + (this.options.tabIndex ? 'tabindex="' + this.options.tabIndex + '"' : '') + '>');
+            this._tagInput = $('<input class="tagit-input" type="text" ' + (this.options.tabIndex ? 'tabindex="' + this.options.tabIndex + '"' : '') + '>');
 
             var BACKSPACE = 8,
                 ENTER     = 13,
@@ -59,31 +55,32 @@
             };
 
             this.tagList
-                // add the tagit CSS class.
                 .addClass('tagit')
+                .addClass('ui-widget ui-widget-content ui-corner-all')
                 // create the input field.
                 .append($('<li class="tagit-new"></li>\n').append(this._tagInput))
                 .click(function(e) {
-                    if (e.target.className == 'close') {
+                    var target = $(e.target);
+                    if (target.hasClass('close')) {
                         // Removes a tag when the little 'x' is clicked.
                         // Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
-                        self.removeTag($(e.target).parent());
-                    } else if (e.target.className == 'tagit-label' && self.options.onTagClicked) {
-                        self.options.onTagClicked($(e.target).parent());
+                        self.removeTag(target.parent());
+                    } else if (target.hasClass('tagit-label') && self.options.onTagClicked) {
+                        self.options.onTagClicked(target.parent());
                     } else {
                         // Sets the focus() to the input field, if the user clicks anywhere inside the UL.
                         // This is needed because the input field needs to be of a small size.
                         self._tagInput.focus();
                     }
-                })
-                // add existing tags
-                .children('li')
-                    .each(function() {
-                        if (!$(this).hasClass('tagit-new')) {
-                            self.createTag($(this).html(), $(this).attr('class'));
-                            $(this).remove();
-                        }
-                    });
+                });
+
+            // Add existing tags.
+            this.tagList.children('li').each(function() {
+                if (!$(this).hasClass('tagit-new')) {
+                    self.createTag($(this).html(), $(this).attr('class'));
+                    $(this).remove();
+                }
+            });
 
             if (this.options.singleField) {
                 if (this.options.singleFieldNode) {
@@ -134,7 +131,6 @@
                             )
                         )
                     ) {
-
                         event.preventDefault();
                         self.createTag(self._cleanedInput());
                     }
@@ -158,7 +154,7 @@
                         // on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
                         // and is changed to the autocompleted text upon mouseup.
                         if (self._tagInput.val() === '') {
-                            self.removeTag(self.tagList.children('.tagit-choice:last'));
+                            self.removeTag(self.tagList.children('.tagit-choice:last'), false);
                         }
                         self.createTag(ui.item.value);
                         // Preventing the tag input to be updated with the chosen value.
@@ -246,12 +242,14 @@
 
             var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(value);
 
-            // create tag
+            // Create tag.
             var tag = $('<li></li>')
-                .addClass('tagit-choice')
+                .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
                 .addClass(additionalClass)
-                .append(label)
-                .append('<a class="close">x</a>');
+                .append(label);
+            var removeTag = $('<a></a>')
+                .addClass('ui-icon ui-icon-close close');
+            tag.append(removeTag);
 
             if (this.options.singleField) {
                 var tags = this.assignedTags();
@@ -270,8 +268,11 @@
             this._tagInput.parent().before(tag);
         },
         
-        removeTag: function(tag) {
+        removeTag: function(tag, animate) {
+            if (typeof animate === 'undefined') { animate = true; }
+
             tag = $(tag);
+
             if (this.options.onTagRemoved) {
                 this.options.onTagRemoved(tag);
             }
@@ -283,7 +284,14 @@
                 });
                 this._updateSingleTagsField(tags);
             }
-            tag.remove();
+            // Animate the removal.
+            if (animate) {
+                tag.fadeOut('fast').hide('blind', {direction: 'horizontal'}, 'fast', function(){
+                    tag.remove();
+                }).dequeue();
+            } else {
+                tag.remove();
+            }
         },
 
         removeAll: function() {