diff --git a/mozilla/webtools/testopia/Bugzilla/Testopia/TestCase.pm b/mozilla/webtools/testopia/Bugzilla/Testopia/TestCase.pm
index 229cbd4e50d..e8c5b65d7a9 100644
--- a/mozilla/webtools/testopia/Bugzilla/Testopia/TestCase.pm
+++ b/mozilla/webtools/testopia/Bugzilla/Testopia/TestCase.pm
@@ -236,6 +236,31 @@ sub get_selectable_components {
     return \@comps;
 }
 
+=head2 get_product_components
+
+Returns a list of components divided by product
+
+=cut
+
+sub get_product_components {
+    my $self = shift;
+    my $dbh = Bugzilla->dbh;
+    my @exclusions;
+    my $products = $dbh->selectall_arrayref(
+            "SELECT id,name FROM products ORDER BY name",{'Slice' => {}});
+    my %prods;
+    foreach my $p (@$products){
+        my $comps = $dbh->selectall_arrayref(
+            "SELECT id,name FROM components 
+             WHERE product_id = ?
+             ORDER BY name",
+             {'Slice' => {}},$p->{'id'});
+        
+        $prods{$p->{'name'}} = $comps;
+    }
+    return \%prods;
+}
+ 
 =head2 get_available_components
 
 Returns a list of all user visible components for use in searches
@@ -514,7 +539,8 @@ sub add_component {
     my $dbh = Bugzilla->dbh;
     #TODO: Check for existing component
     $dbh->do("INSERT INTO test_case_components (case_id, component_id)
-              VALUES (?,?)",undef,  $self->{'case_id'}, $comp_id);    
+              VALUES (?,?)",undef,  $self->{'case_id'}, $comp_id);
+    delete $self->{'components'};          
 }
 
 =head2 remove_component
diff --git a/mozilla/webtools/testopia/template/en/default/testopia/case/show.html.tmpl b/mozilla/webtools/testopia/template/en/default/testopia/case/show.html.tmpl
index b036ccdd4fc..2db28f6d634 100644
--- a/mozilla/webtools/testopia/template/en/default/testopia/case/show.html.tmpl
+++ b/mozilla/webtools/testopia/template/en/default/testopia/case/show.html.tmpl
@@ -50,32 +50,6 @@
 <script src="testopia/dojo/dojo.js" type="text/javascript"></script>
 <script type="text/javascript">
 
-    function fillSelects (data){
-        var xmldocroot = data.documentElement;
-        var selected = xmldocroot.getElementsByTagName('selected');
-        var comps = document.getElementById("components");
-        comps.options.length = 0;
-        for (i=0; i< selected.length; i++){
-          var id = selected[i].childNodes[0].firstChild.nodeValue;
-          var name = selected[i].childNodes[1].firstChild.nodeValue;
-          var myOp = new Option(name, id);
-          addOption(comps,myOp);
-        }
-        
-        var nonselected = xmldocroot.getElementsByTagName('nonselected');
-        var pick = document.getElementById("comp_pick");
-        pick.options.length = 0;
-        for (i=0; i< nonselected.length; i++){
-          var id = nonselected[i].childNodes[0].firstChild.nodeValue;
-          var name = nonselected[i].childNodes[1].firstChild.nodeValue;
-          var myOp = new Option(name, id);
-          addOption(pick,myOp);
-        }
-
-        document.getElementById("addComp").disabled = false;
-        document.getElementById("deleteComp").disabled = false;
-
-    }
     function updateComponent(comp_id, action){
         if (comp_id == 0)
           return;
@@ -85,9 +59,41 @@
         dojo.io.bind({
             url:     "tr_show_case.cgi",
             content: {  component_id: comp_id, case_id: [% case.id FILTER none %], action: action },
-            load:    function(type, data, evt){ fillSelects(data);},
+            load:    function(type, data, evt){ 
+                var comps = document.getElementById("components");
+                comps.options.length = 0;
+                for (i in data){
+                  var myOp = new Option(data[i].name, data[i].id);
+                  addOption(comps,myOp);
+                }
+                
+                document.getElementById("addComp").disabled = false;
+                document.getElementById("deleteComp").disabled = false;
+                },
             error:   function(type, error){ alert("ERROR");},
-            mimetype: "text/xml"
+            mimetype: "text/json"
+        });
+    }
+    function getProdComps(product){
+        document.getElementById("comp_pick").disabled = true;
+        document.getElementById("addComp").disabled = true;
+        document.getElementById("deleteComp").disabled = true;
+        dojo.io.bind({
+            url:   "tr_show_case.cgi",
+            content: {  product_id: product, case_id: [% case.id FILTER none %], action: "getcomps" },
+            load:  function(type, data, evt){
+                     var comps = document.getElementById("comp_pick");
+                     comps.options.length = 0;
+                     for (i in data){
+                       var myOp = new Option(data[i].name, data[i].id);
+                       addOption(comps, myOp);
+                     }
+                     document.getElementById("comp_pick").disabled = false;
+                     document.getElementById("addComp").disabled = false;
+                     document.getElementById("deleteComp").disabled = false;
+                   },
+            error: function(type, error){ alert("ERROR");},
+            mimetype: "text/json"
         });
     }
     
@@ -189,13 +195,27 @@
   <tr>
     <td align="left">
     <table>
-      <tr><td>
+      <tr><th align="right">Product</th>
+      <td>
+      [% PROCESS select sel = { name      => 'prod_pick',
+                                list      => user.get_selectable_products,
+                                default   => case.get_product_ids.0,
+                                events    => 'onChange="getProdComps(this.value)"',
+                                accesskey => 'p' } %]
+      </td>
+    </tr>
+    <tr>
+      <th align="right">Component</th>
+      <td>
       [% PROCESS select sel = { name      => 'comp_pick',
                                 list      => case.get_selectable_components
                                 accesskey => 'p' } %]
       <input type="button" id="addComp" value="Add" onClick="updateComponent(document.getElementById('comp_pick').value, 'addcomponent')">
-      </td></tr>
-      <tr><td>
+      </td>
+    </tr>
+    <tr>
+      <td>&nbsp;</td>
+      <td>
     [% SET components = case.components %]
    
       [% PROCESS select sel = { name      => 'components',
diff --git a/mozilla/webtools/testopia/tr_show_case.cgi b/mozilla/webtools/testopia/tr_show_case.cgi
index e652909f94e..03d49b0179b 100755
--- a/mozilla/webtools/testopia/tr_show_case.cgi
+++ b/mozilla/webtools/testopia/tr_show_case.cgi
@@ -34,6 +34,8 @@ use Bugzilla::Testopia::TestTag;
 use Bugzilla::Testopia::Attachment;
 use Bugzilla::Testopia::Search;
 use Bugzilla::Testopia::Table;
+use Bugzilla::Testopia::Product;
+use JSON;
 
 use vars qw($template $vars);
 my $template = Bugzilla->template;
@@ -252,14 +254,36 @@ elsif ($action eq 'addcomponent' || $action eq 'removecomponent'){
     validate_selection($comp, 'id', 'components');
     
     if ($action eq 'addcomponent'){
+        foreach my $c (@{$case->components}){
+            if ($c->id == $comp){
+                print "{ignore:1}";
+                exit;
+            }   
+        }
         $case->add_component($comp);
     }
     else {
         $case->remove_component($comp);
     }
-
-    my $xml = get_components_xml($case);
-    print $xml;   
+    my @comps;
+    foreach my $c (@{$case->components}){
+        push @comps, {'id' => $c->id, 'name' => $c->name};
+    }
+    my $json = new JSON;
+    print $json->objToJson(\@comps);   
+}
+elsif ($action eq 'getcomps'){
+    Bugzilla->login;
+    my $product_id = $cgi->param('product_id');
+    detaint_natural($product_id);
+    my $product = Bugzilla::Testopia::Product->new($product_id);
+    my @comps;
+    foreach my $c (@{$product->components}){
+        push @comps, {'id' => $c->id, 'name' => $c->name};
+    }
+    my $json = new JSON;
+    print $json->objToJson(\@comps);
+    exit;
 }
 
 #TODO: Clean up styles and put them in skins
@@ -273,27 +297,6 @@ else{
 ### Helper Routines ###
 #######################
 
-sub get_components_xml {
-    my ($case) = @_;
-    my $ret = "<components>";
-    foreach my $c (@{$case->components}){
-        $ret .= "<selected>";
-        $ret .= "<id>". $c->{'id'} ."</id>";
-        $ret .= "<name>". xml_quote($c->{'name'}) ."</name>";
-        $ret .= "</selected>";
-    }
-
-    foreach my $c (@{$case->get_selectable_components}){
-        $ret .= "<nonselected>";
-        $ret .= "<id>". $c->{'id'} ."</id>";
-        $ret .= "<name>". xml_quote($c->{'name'}) ."</name>";
-        $ret .= "</nonselected>";
-    }
-  
-    $ret .= "</components>";
-    return $ret;
-}
-
 sub do_update{
     my ($case) = @_;
     my $newtcaction = $cgi->param("tcaction");
@@ -395,6 +398,7 @@ sub display {
     ThrowUserError('testopia-query-too-large', {'limit' => $query_limit}) if $table->list_count > $query_limit;
     $vars->{'case'} = $case;
     $vars->{'table'} = $table;
+    $vars->{'user'} = Bugzilla->user;
     $template->process("testopia/case/show.html.tmpl", $vars) ||
         ThrowTemplateError($template->error());
 }
\ No newline at end of file