diff --git a/source/web/css/yahoo-tree.css b/source/web/css/yahoo-tree.css
index 0250eededb..9993988047 100644
--- a/source/web/css/yahoo-tree.css
+++ b/source/web/css/yahoo-tree.css
@@ -1,99 +1,3 @@
-/* first or middle sibling, no children */
-.ygtvtn 
-{
-   width:16px; height:18px;
-   cursor:pointer ;
-   background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; 
-}
-
-/* first or middle sibling, collapsable */
-.ygtvtm 
-{
-   width:16px; height:18px; 
-   cursor:pointer ;
-   background: url(../images/icons/arrow_open.gif) 0 0 no-repeat; 
-}
-
-/* first or middle sibling, collapsable, hover */
-.ygtvtmh 
-{
-   width:16px; height:18px; 
-   cursor:pointer ;
-   background: url(../images/icons/arrow_open.gif) 0 0 no-repeat; 
-}
-
-/* first or middle sibling, expandable */
-.ygtvtp 
-{
-   width:16px; height:18px; 
-   cursor:pointer ;
-   background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; 
-}
-
-/* first or middle sibling, expandable, hover */
-.ygtvtph 
-{
-   width:16px; height:18px; 
-   cursor:pointer ;
-   background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; 
-}
-
-/* last sibling, no children */
-.ygtvln 
-{
-   width:16px; height:18px; 
-   cursor:pointer ;
-   background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; 
-}
-
-/* Last sibling, collapsable */
-.ygtvlm 
-{
-   width:16px; height:18px;
-   cursor:pointer ;
-   background: url(../images/icons/arrow_open.gif) 0 0 no-repeat; 
-}
-
-/* Last sibling, collapsable, hover */
-.ygtvlmh 
-{
-   width:16px; height:18px; 
-   cursor:pointer ;
-   background: url(../images/icons/arrow_open.gif) 0 0 no-repeat; 
-}
-
-/* Last sibling, expandable */
-.ygtvlp 
-{ 
-   width:16px; height:18px; 
-   cursor:pointer ;
-   background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; 
-}
-
-/* Last sibling, expandable, hover */
-.ygtvlph 
-{ 
-   width:16px; height:18px; cursor:pointer ;
-   background: url(../images/icons/arrow_closed.gif) 0 0 no-repeat; 
-}
-
-/* Loading icon */
-.ygtvloading 
-{ 
-   width:16px; height:18px; 
-   background: url(../scripts/ajax/yahoo/treeview/assets/loading.gif) 0 0 no-repeat; 
-}
-
-/* the style for the empty cells that are used for rendering the depth 
-* of the node */
-.ygtvdepthcell 
-{ 
-   width:16px; height:18px; 
-   background: url() 0 0 no-repeat; 
-}
-
-.ygtvblankdepthcell { width:16px; height:22px; }
-
 /* the style of the div around each node */
 .ygtvitem { }  
 
@@ -101,14 +5,6 @@
 .ygtvchildren {  }  
 * html .ygtvchildren { height:2%; }  
 
-/* the style of the text label in ygTextNode */
-.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover 
-{ 
-   margin-left:2px;
-   text-decoration: none;
-   background-color: white;
-}
-
 .ygtvspacer 
 { 
    height: 10px; 
@@ -116,17 +12,17 @@
    margin: 2px; 
 }
 
-.ygtvhtml
+.treeNode
 {
    cursor: pointer;
 }
 
-.alflabel
+.treeNodeLabel
 {
    white-space: nowrap;
 }
 
-.alflabelselected
+.treeNodeSelected
 {
    background-color: #d3e6fe;
 }
diff --git a/source/web/images/icons/arrow_closed.gif b/source/web/images/icons/arrow_closed.gif
index 655a4d6a08..4bdc6b6fa1 100644
Binary files a/source/web/images/icons/arrow_closed.gif and b/source/web/images/icons/arrow_closed.gif differ
diff --git a/source/web/images/icons/arrow_open.gif b/source/web/images/icons/arrow_open.gif
index 85853aa6cf..ba2da48d67 100644
Binary files a/source/web/images/icons/arrow_open.gif and b/source/web/images/icons/arrow_open.gif differ
diff --git a/source/web/scripts/ajax/yahoo-tree.js b/source/web/scripts/ajax/yahoo-tree.js
index 6f552265f4..f1054b9d3d 100644
--- a/source/web/scripts/ajax/yahoo-tree.js
+++ b/source/web/scripts/ajax/yahoo-tree.js
@@ -96,26 +96,8 @@ function parseChildData(parentNode, data)
  */
 function createYahooTreeNode(parentNode, nodeRef, name, icon, expanded, selected)
 {
-	var nodeHtml = "<table><tr";
-	
-	// add the node selected handler is provided
-	if (nodeSelectedHandler != null)
-	{
-		nodeHtml += " onclick=" + nodeSelectedHandler + "('" + nodeRef + "');"
-	}
-	
-	nodeHtml += "><td><img src='" + WEBAPP_CONTEXT + "/images/icons/" + icon + 
-	            "-16.gif'/></td><td class='alflabel";
-	
-	// add selected class to label if node is selected
-	if (selected)
-	{
-		nodeHtml += " alflabelselected";
-	}
-	
-	nodeHtml += "'>" + name + "</td></tr></table>";
-
-   return new YAHOO.widget.HTMLNode({ html: nodeHtml, nodeRef: nodeRef, icon: icon }, parentNode, expanded, 1);
+	var nodeData = { label: name, nodeRef: nodeRef, icon: icon, selectedHandler: nodeSelectedHandler};
+   return new YAHOO.widget.AlfrescoNode(nodeData, parentNode, expanded, selected);
 }
 
 /**
@@ -155,4 +137,206 @@ function informOfCollapse(node)
    , null);
 }
 
+/**
+ * Extension of the default Node object. This node always shows the 
+ * expand/collapse arrow and an icon for the node and 
+ *
+ * @namespace YAHOO.widget
+ * @class AlfrescoNode
+ * @extends YAHOO.widget.Node
+ * @constructor
+ * @param oData {object} an object containing the data that will
+ * be used to render this node
+ * @param oParent {YAHOO.widget.Node} this node's parent node
+ * @param expanded {boolean} the initial expanded/collapsed state
+ * @param selected {boolean} the initial selected state
+ */
+YAHOO.widget.AlfrescoNode = function(oData, oParent, expanded, selected) 
+{
+   if (oData) 
+   { 
+      this.init(oData, oParent, expanded);
+      this.initContent(oData, selected);
+   }
+};
+
+YAHOO.extend(YAHOO.widget.AlfrescoNode, YAHOO.widget.Node, 
+{
+   /**
+    * The label for the node
+    * @property label
+    * @type string
+    */
+   label: null,
+   
+   /**
+    * The nodeRef of the item this node is representing
+    * @property nodeRef
+    * @type string
+    */
+   nodeRef: null,
+   
+   /**
+    * The name of the icon to use for the node, defaults to 'space-icon-default'.
+    * @property icon
+    * @type string
+    */
+   icon: "space-icon-default",
+   
+   /**
+    * The number of pixels to indent a child node from it's parent.
+    * @property indentSize
+    * @type int
+    */
+   indentSize: 14,
+   
+   /**
+    * The name of the function to call when this node is clicked.
+    * @property selectedHandler
+    * @type string
+    */
+   selectedHandler: null,
+   
+   /**
+    * The node's selected state
+    * @property selected
+    * @type boolean
+    */
+   selected: false,
+    
+   /**
+    * The generated id that will contain the data passed in by the implementer.
+    * @property contentElId
+    * @type string
+    */
+   contentElId: null,
+
+   /**
+    * Sets up the node label
+    * @property initContent
+    * @param {object} An object containing the nodeRef of the item, it's icon,
+    *                 the selectedHandler and the ident size to use for child nodes
+    */
+   initContent: function(oData, selected) 
+   {
+      this.label = oData.label;
+      this.nodeRef = oData.nodeRef;
+      this.selected = selected;
+      this.contentElId = "ygtvcontentel" + this.index;
+      
+      if (oData.icon != null)
+      {
+         this.icon = oData.icon;
+      }
+      
+      if (oData.indentSize != null)
+      {
+         this.indentSize = oData.indentSize;
+      }
+      
+      if (oData.selectedHandler != null)
+      {
+         this.selectedHandler = oData.selectedHandler;
+      }
+   },
+   
+   /**
+    * Returns the outer html element for this node's content
+    * @method getContentEl
+    * @return {HTMLElement} the element
+    */
+   getContentEl: function() 
+   { 
+      return document.getElementById(this.contentElId);
+   },
+
+   // overrides YAHOO.widget.Node
+   getNodeHtml: function() 
+   { 
+      var sb = [];
+
+      sb[sb.length] = '<div class="treeNode"';
+
+      // calculate the margin required depending on the depth of this node
+      if (this.depth > 0)
+      {
+         var depthSize = this.indentSize * this.depth;
+         sb[sb.length] = ' style="margin-left: ' + depthSize + 'px;"';
+      }
+
+      sb[sb.length] = '>';
+      sb[sb.length] = '<table cellpadding="0" cellspacing="0" border="0"><tr>';
+      
+      // render the toggle image (take into account this.expanded)
+      sb[sb.length] = '<td><img';
+      sb[sb.length] = ' id="' + this.getToggleElId() + '"';
+      sb[sb.length] = ' class="' + this.getStyle() + '"';
+      sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '"';
+      sb[sb.length] = ' src="' + WEBAPP_CONTEXT + "/images/icons/arrow_";
+      if (this.expanded)
+      {
+         sb[sb.length] = 'open';
+      }
+      else
+      {
+         sb[sb.length] = 'closed';
+      }
+      sb[sb.length] = '.gif"></td>';
+      
+      // render the icon (with node selected handler)   
+      sb[sb.length] = '<td';
+      if (this.selectedHandler != null)
+      {
+         sb[sb.length] = ' onclick=' + this.selectedHandler + '("' + this.nodeRef + '");';
+      }
+      sb[sb.length] = '><img src="' + WEBAPP_CONTEXT + '/images/icons/' + this.icon + '-16.gif"';
+      sb[sb.length] = ' class="treeNodeIcon"></td>';
+      
+      // render the label (with node selected handler) (apply selected css class if approp.) (add contentElId)
+      sb[sb.length] = '<td id="' + this.contentElId + '"';
+      if (this.selectedHandler != null)
+      {
+         sb[sb.length] = ' onclick=' + this.selectedHandler + '("' + this.nodeRef + '");';
+      }
+      sb[sb.length] = '><span class="treeNodeLabel';
+      if (this.selected)
+      {
+         sb[sb.length] = ' treeNodeSelected';
+      }
+      sb[sb.length] = '">&nbsp;' + this.label + '</span></td>';
+
+      // close off the containing row, table and div
+      sb[sb.length] = '</tr></table></div>';
+      
+      return sb.join("");
+   },
+
+   updateIcon: function()
+   {
+      var el = this.getToggleEl();
+      if (el)
+      {
+         if (this.isLoading)
+         {
+            el.src = WEBAPP_CONTEXT + '/scripts/ajax/yahoo/treeview/assets/loading.gif';
+         }
+         else if (this.expanded)
+         {
+            el.src = WEBAPP_CONTEXT + '/images/icons/arrow_open.gif';
+         }
+         else
+         {
+            el.src = WEBAPP_CONTEXT + '/images/icons/arrow_closed.gif';
+         }
+      }
+   },
+    
+   toString: function() 
+   { 
+      return "AlfrescoNode (" + this.index + ")";
+   }
+});
+
+
+