diff --git a/client/src/views/biz-subscription-server.vue b/client/src/views/biz-subscription-server.vue
index e483f91..906746e 100644
--- a/client/src/views/biz-subscription-server.vue
+++ b/client/src/views/biz-subscription-server.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <h2>TODO: prefill datacenters and time zones</h2>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
@@ -45,7 +46,7 @@
             ></gz-date-time-picker>
           </v-col>
 
-          <v-col cols="12" sm="6" lg="4" xl="3">
+          <!-- <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
               ref="dataCenter"
               v-model="obj.dataCenter"
@@ -57,7 +58,21 @@
               :rules="[form().required(this, 'dataCenter')]"
               @input="fieldValueChanged('dataCenter')"
             ></v-text-field>
-          </v-col>
+          </v-col> -->
+
+
+          <v-col cols="12" sm="6" lg="4" xl="3">
+          <v-select
+            ref="dataCenter"
+            v-model="obj.dataCenter"
+            dense
+            :items="selectLists.dataCenters"
+            item-text="name"
+            item-value="id"
+            :label="$sock.t('SubServerDatacenter')"
+              @input="fieldValueChanged('dataCenter')"
+          ></v-select>
+        </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
@@ -282,15 +297,8 @@ export default {
         wiki: null,
         tags: []
       },
-      test: {
-        id: 0,
-        concurrency: 0,
-        name: "string",
-        active: true,
-
-        customerId: 0,
-        wiki: "string",
-        tags: ["string"]
+      selectLists: {
+        dataCenters: [{name:"New York",id:"NY"},{name:"Los Angeles",id:"LA"}]
       },
       formState: {
         ready: false,