diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index c3d2facd..ef9b63e3 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -69,7 +69,7 @@ todo: REPORT LIST
 			- If take generic Report option then it opens to another form for choosing the report and whether to print or not etc
 	- SB translated in form as "Report" not "Print" because it's going to be likely that people will want to work with pdf (email, download) instead or just the view of it, print is maybe not a common option.
 
-
+todo: report button's should be disabled on dirty (just like in v7 recent fix)
 todo: SEARCH UI
 
 todo: RECORD HISTORY
diff --git a/ayanova/src/components/report-selector-control.vue b/ayanova/src/components/report-selector-control.vue
index 6cc58856..d21b9f39 100644
--- a/ayanova/src/components/report-selector-control.vue
+++ b/ayanova/src/components/report-selector-control.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="text-center">
+  <v-row justify="center">
+    <!-- :max-width="options.width" -->
     <v-dialog
-      persistent
+      scrollable
+      max-width="400px"
       v-model="isVisible"
-      :max-width="options.width"
       @keydown.esc="cancel"
       :data-cy="!!$ay.dev ? 'reportselector' : false"
     >
@@ -13,7 +14,34 @@
         </v-card-title>
 
         <v-card-text>
-          //list of reports here
+          <v-card-text style="height: 300px;">
+            <v-radio-group v-model="selectedTeportId" column>
+              <v-radio label="Bahamas, The" value="bahamas"></v-radio>
+              <v-radio label="Bahrain" value="bahrain"></v-radio>
+              <v-radio label="Bangladesh" value="bangladesh"></v-radio>
+              <v-radio label="Barbados" value="barbados"></v-radio>
+              <v-radio label="Belarus" value="belarus"></v-radio>
+              <v-radio label="Belgium" value="belgium"></v-radio>
+              <v-radio label="Belize" value="belize"></v-radio>
+              <v-radio label="Benin" value="benin"></v-radio>
+              <v-radio label="Bhutan" value="bhutan"></v-radio>
+              <v-radio label="Bolivia" value="bolivia"></v-radio>
+              <v-radio label="Bosnia and Herzegovina" value="bosnia"></v-radio>
+              <v-radio label="Botswana" value="botswana"></v-radio>
+              <v-radio label="Brazil" value="brazil"></v-radio>
+              <v-radio label="Brunei" value="brunei"></v-radio>
+              <v-radio label="Bulgaria" value="bulgaria"></v-radio>
+              <v-radio label="Burkina Faso" value="burkina"></v-radio>
+              <v-radio label="Burma" value="burma"></v-radio>
+              <v-radio label="Burundi" value="burundi"></v-radio>
+            </v-radio-group>
+          </v-card-text>
+          <!-- <v-select
+            :items="reportList"
+            v-model="selectedTeportId"
+            item-text="name"
+            item-value="id"
+          ></v-select> -->
         </v-card-text>
 
         <!-- <v-divider></v-divider> v-bind:class="options.type" -->
@@ -32,12 +60,12 @@
             text
             @click.native="ok"
             :data-cy="!!$ay.dev ? 'reportselector:ok' : false"
-            >{{ $ay.t("Ok") }}</v-btn
+            >{{ $ay.t("OK") }}</v-btn
           >
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </div>
+  </v-row>
 </template>
 <script>
 export default {
@@ -49,6 +77,7 @@ export default {
       width: 290,
       zIndex: 200
     },
+    reportList: [],
     selectedReportId: null
   }),
   props: {
@@ -59,6 +88,18 @@ export default {
   },
   methods: {
     open() {
+      //debugger;
+      //get report list from server
+      //for now we'll fake it
+      let fakeReportList = [];
+      for (let i = 0; i < 255; i++) {
+        fakeReportList.push({
+          name: "Fake report with the number " + i,
+          id: i
+        });
+      }
+      this.reportList = fakeReportList;
+
       this.isVisible = true;
       return new Promise((resolve, reject) => {
         this.resolve = resolve;
@@ -66,11 +107,11 @@ export default {
       });
     },
     ok() {
-      this.resolve(true);
+      this.resolve(this.selectedReportId);
       this.isVisible = false;
     },
     cancel() {
-      this.resolve(false);
+      this.resolve(null);
       this.isVisible = false;
     }
   }
diff --git a/ayanova/src/views/widget.vue b/ayanova/src/views/widget.vue
index 0d832ad1..d9d114d7 100644
--- a/ayanova/src/views/widget.vue
+++ b/ayanova/src/views/widget.vue
@@ -1,8 +1,10 @@
 <template>
   <v-container>
     <v-row v-if="formState.ready">
-      <gz-report-selector ref="reportSelector"></gz-report-selector>
       <v-col>
+        <v-col cols="12" sm="6" lg="4" xl="3">
+          <gz-report-selector ref="reportSelector"></gz-report-selector>
+        </v-col>
         <v-form ref="form">
           <v-row>
             <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>