diff --git a/Layout/default/Order/Productchange.php b/Layout/default/Order/Productchange.php
index ce0b820f8..73c0ba386 100644
--- a/Layout/default/Order/Productchange.php
+++ b/Layout/default/Order/Productchange.php
@@ -55,6 +55,25 @@ $posturl = self::getUrl("Order", "save", $urlfilter);
                                             </select>
 
                                         </div>
+
+                                        <div class="card" id="product-list">
+                                            <div class="card-body">
+                                                <table>
+                                                    <thead>
+                                                        <th>Contract ID</th>
+                                                        <th>Produkt</th>
+                                                        <th>Matchcode</th>
+                                                        <th>Preis p.P.</th>
+                                                        <th>Herstellungskosten</th>
+                                                        <th>Fertigstellung</th>
+                                                        <th>Kündigung</th>
+                                                    </thead>
+                                                    <tbody>
+
+                                                    </tbody>
+                                                </table>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -70,7 +89,8 @@ $posturl = self::getUrl("Order", "save", $urlfilter);
 
 <script type="text/javascript">
 
-    $('#owner_id').autoComplete();
+
+
 
 </script>
 
diff --git a/application/Contract/ContractController.php b/application/Contract/ContractController.php
index ec6cf2ebb..26f6bccda 100644
--- a/application/Contract/ContractController.php
+++ b/application/Contract/ContractController.php
@@ -797,8 +797,15 @@ class ContractController extends mfBaseController
             case "getContract":
                 $return = $this->getContractApi();
                 break;
+            case "findContracts":
+                $return = $this->getContractsApi();
+                break;
             case "findContract":
                 $return = $this->findContractApi();
+                break;
+            case "":
+                $return = "";
+                break;
             default:
                 $return = false;
         }
@@ -834,6 +841,23 @@ class ContractController extends mfBaseController
         return ["contract" => $data, "form_id" => $form_id];
     }
 
+    private function getContractsApi() {
+        $owner_id = $this->request->owner_id;
+        if(!$owner_id) return false;
+
+        $return = [];
+
+        foreach(ContractModel::search(["owner_id" => $owner_id]) as $contract) {
+            $c = get_object_vars($contract->data);
+            $c["id"] = $contract->id;
+            $return[] = $c;
+        }
+
+        header("Content-type: application/json");
+        echo json_encode($return);
+        exit;
+    }
+
     private function findContractApi()
     {
         $search = trim($this->request->q);
diff --git a/application/Order/OrderController.php b/application/Order/OrderController.php
index 954d1aff1..f7d086513 100644
--- a/application/Order/OrderController.php
+++ b/application/Order/OrderController.php
@@ -470,8 +470,10 @@ class OrderController extends mfBaseController {
   }
 
   protected function addUpgrade() {
-      $this->layout()->setTemplate("Order/Productchange");
-
+      //$this->layout()->setTemplate("Order/Productchange");
+      Helper::renderVue($this, "OrderProductchange", $this->mod, ["CONTRACT_API_URL" => $this->getUrl("Contract", "api"),
+          "ADDRESS_API_URL" => $this->getUrl("Address", "api"),
+          "CONTRACT_PRODUCTCHANGE_URL" => $this->getUrl("Contract", "productchange")]);
 
   }
 
diff --git a/public/js/pages/OrderProductchange/OrderProductchange.js b/public/js/pages/OrderProductchange/OrderProductchange.js
new file mode 100644
index 000000000..4dfb315ca
--- /dev/null
+++ b/public/js/pages/OrderProductchange/OrderProductchange.js
@@ -0,0 +1,55 @@
+Vue.component('OrderProductchange', {
+    //language=Vue
+    template: `
+      <tt-card style="min-height:50vh;">
+        
+        <tt-autocomplete :api-url="window['TT_CONFIG']['ADDRESS_API_URL'] + '?do=findAddress'"
+                         v-model="owner_id" sm label="Vertragsinhaber auswählen"></tt-autocomplete>
+
+        <tt-table v-if="owner_id !== ''"
+                  :fetch-url="\`\${window['TT_CONFIG']['CONTRACT_API_URL']}?do=findContracts&owner_id=\${owner_id}\`"
+                  :config="OrderProductchangeTableConfig"
+                  small  ref="contractTable">
+          
+          <template v-slot:actions="{ row }">
+            <a  :href="window['TT_CONFIG']['BASE_URL'] + '/Contract/productchange?contract_id=' + row.id" class="btn btn-primary">Produktwechsel erstellen
+            </a>
+          </template>
+          
+        </tt-table>
+      </tt-card>
+    `, data() {
+        return {
+            window: window,
+            OrderProductchangeTableConfig: {
+                headers: [
+                    {text: "Contract ID", key: "id", filter: false, order: false},
+                    {text: "Produkt", key: "product_id", filter: false, order: false},
+                    {text: "Matchcode", key: "matchcode", filter: false, order: false},
+                    {text: "Preis p.P.", key: "price", filter: false, order: false},
+                    {text: "Herstellungskosten", key: "price_setup", filter: false, order: false},
+                    {text: "Fertigstellung", key: "finish_date", filter: false, order: false},
+                    {text: "Kündigung", key: "cancel_date", filter: false, order: false},
+                    {text: "Aktion", key: "actions", filter: false, order: false}
+                ],
+                tableHeader: 'Aktive Produkte',
+                key: 'OrderProductchange',
+            },
+            owner_id: "",
+        }
+    },
+    methods: {
+
+    },
+    watch: {
+        owner_id: {
+            async handler() {
+                console.log(this.owner_id);
+                //this.$refs.contractTable.$set(this.$refs.contractTable.fetchUrl, `${this.window['TT_CONFIG']['CONTRACT_API_URL']}?do=findContracts&owner_id=${this.owner_id}`);
+                //this.$refs.contractTable.$set(this.$refs.contractTable.filters, 'owner_id', this.owner_id);
+                //await this.$refs.contractTable.fetchData();
+            }
+        }
+    }
+})
+