diff --git a/public/javascript/ui/panel/ZombieTabs.js b/public/javascript/ui/panel/ZombieTabs.js
index cb5967d41..32c397dff 100644
--- a/public/javascript/ui/panel/ZombieTabs.js
+++ b/public/javascript/ui/panel/ZombieTabs.js
@@ -8,6 +8,49 @@ ZombieTabs = function(zombie_tree_list) {
 		this.tree_items.push(zombie_tree_list[tree]);
 	}
 	
+	/*
+	 * Update each tree with a new configuration and regenerates them.
+	 * @param: {Literal Object} updated configuration for the trees
+	 */
+	function update_trees_configuration(configuration) {
+		var tree_panel = Ext.getCmp("zombie-tree-tabs-panel");
+		var trees = tree_panel.items;
+		
+		Ext.each(trees.items, function(tree) {
+			tree.updateConfiguration(configuration);
+			tree.reload();
+		});
+	};
+	
+	//the bottom bar for that panel
+	this.bottom_bar = new Ext.Toolbar({
+		items: [
+			{
+				xtype: 'tbtext',
+				text: 'View by:'
+			},
+			{
+				//list the hooked browsers by domain
+				text: 'domain',
+				listeners: {
+					click: function(b) {
+						update_trees_configuration({'sub-branch' : 'domain'});
+					}
+				}
+			},
+			'-',
+			{
+				//list the hooked browsers by external ip
+				text: 'external ip',
+				listeners: {
+					click: function() {
+						alert('under construction');
+					}
+				}
+			}
+		]
+	});
+	
 	MainPanel.superclass.constructor.call(this, {
         id: 'zombie-tree-tabs-panel',
 		title: 'Hooked Browsers',
@@ -20,7 +63,8 @@ ZombieTabs = function(zombie_tree_list) {
         minSize: 175,
         maxSize: 400,
 		deferredRender: false,
-		items: this.tree_items
+		items: this.tree_items,
+		bbar: this.bottom_bar
     });
 };
 
diff --git a/public/javascript/ui/panel/zombiesTreeList.js b/public/javascript/ui/panel/zombiesTreeList.js
index 36e4f0041..788837939 100644
--- a/public/javascript/ui/panel/zombiesTreeList.js
+++ b/public/javascript/ui/panel/zombiesTreeList.js
@@ -18,6 +18,7 @@ zombiesTreeList = function(id) {
         collapseFirst:false
 	});
 	
+	//the tree node that contains the list of online hooked browsers
 	this.online_hooked_browsers_treenode = this.root.appendChild(
         new Ext.tree.TreeNode({
             text:'Online Browsers',
@@ -26,6 +27,7 @@ zombiesTreeList = function(id) {
         })
     );
 	
+	//the tree node that contains the list of offline hooked browsers
 	this.offline_hooked_browsers_treenode = this.root.appendChild(
         new Ext.tree.TreeNode({
             text:'Offline Browsers',
@@ -69,13 +71,51 @@ Ext.extend(zombiesTreeList, Ext.tree.TreePanel, {
 		}
 	},
 	
+	/*
+	 * Updates the configuration of the tree.
+	 * @param: {Literal Object} the new configuration.
+	 */
+	updateConfiguration: function(new_configuration) {
+		Ext.apply(this.tree_configuration, new_configuration);
+	},
+	
+	/*
+	 * Reloads the tree. This function is useful after you have updated the configuration
+	 * of the tree.
+	 */
+	reload: function() {
+		//deletes all the nodes in the online hooked browser branch
+		try {this.online_hooked_browsers_treenode.removeAll(true);} catch(e) {};
+		
+		//adds back the hooked browser to the online branch
+		Ext.each(this.online_hooked_browsers_array, function(online_hooked_browser) {
+			this.addZombie(online_hooked_browser, online_hooked_browser["online"], online_hooked_browser["checkbox"]);
+		}, this)
+		
+		//expends the online hooked browser branch
+		if(this.online_hooked_browsers_treenode.childNodes.length > 0)
+			this.online_hooked_browsers_treenode.expand(true);
+		
+		//deletes all the nodes in the offline hooked browser branch
+		try {this.offline_hooked_browsers_treenode.removeAll(true);} catch(e) {};
+		
+		//adds back the hooked browsers to the offline branch
+		Ext.each(this.offline_hooked_browsers_array, function(offline_hooked_browser) {
+			this.addZombie(offline_hooked_browser, offline_hooked_browser["online"], offline_hooked_browser["checkbox"]);
+		}, this)
+		
+		//expends the online hooked browser branch
+		if(this.offline_hooked_browsers_treenode.childNodes.length > 0)
+			this.offline_hooked_browsers_treenode.expand(true);
+	},
+	
 	/*
 	 * Adds a new hooked browser to the tree.
 	 * @param: {Literal Object} the hooked browser object generated by the zombie manager.
 	 * @param: {Boolean} true if the hooked browser is online, false if offline.
 	 * 
 	 */
-    addZombie : function(hooked_browser, online, checkbox) {
+    addZombie: function(hooked_browser, online, checkbox) {
 		var hb_id, mother_node, node;
 		
 		if(online) {
@@ -104,7 +144,9 @@ Ext.extend(zombiesTreeList, Ext.tree.TreePanel, {
             iconCls: 'feed-icon',
             leaf:true,
             id: hb_id,
-			checked: ((checkbox) ? false : null)
+			checked: ((checkbox) ? false : null),
+			online: online,
+			checkbox: checkbox
         });
         
 		//creates a new node for that hooed browser