diff --git a/lang/id.json b/lang/id.json
index ff61d8d..5f3a3b7 100644
--- a/lang/id.json
+++ b/lang/id.json
@@ -94,5 +94,6 @@
     "mac 10.15": "Mac 10.15",
     "are you want to try again": "are you want to try again",
     "referenceerror: ccount is not defined": "ReferenceError: ccount is not defined",
-    "referenceerror: currency_code is not defined": "ReferenceError: currency_code is not defined"
+    "referenceerror: currency_code is not defined": "ReferenceError: currency_code is not defined",
+    "referenceerror: assignment to undeclared variable acntry": "ReferenceError: assignment to undeclared variable aCntry"
 }
\ No newline at end of file
diff --git a/resources/js/Pages/IkeaRoot.vue b/resources/js/Pages/IkeaRoot.vue
index 373e89d..5c86293 100644
--- a/resources/js/Pages/IkeaRoot.vue
+++ b/resources/js/Pages/IkeaRoot.vue
@@ -17,39 +17,33 @@ import axios from 'axios';
 import IkeaLogo from './Ikea/IkeaLogo.vue';
 const type = 'GeoChart';
 
-
 const ccountry = ref([]);
-const ccountry_filter = ref([ [ 'Country' ], ]);
+const ccountry_filter = ref([['Country'],]);
 const ccountry_list = ref(['TEST']);
 const selected = ref(null);
 
-const data = [
-  ['Country', 'Popularity'],
-  ['Germany', 200],
-  ['France', 600],
-  ['RU', 700],
-];
-
 const options = {
   region: 150,
-  
+
   width: 700,
   height: 500,
 };
 
-const chart_settings={
-          packages: ['geochart', 'map'],
-          mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
+const chart_settings = {
+  packages: ['geochart', 'map'],
+  mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
 };
 
 const fetch = async () => {
   try {
     const response = await axios.get(route('ccountry.active'))
     ccountry.value = response.data
-    ccountry_filter.value = ccountry.value.map((country) => [ country.country_name ]);
-    ccountry_list.value = ccountry.value.map((country) => country.country_name );
+    let aCntry = ccountry.value.map((country) => [country.country_name]);
+    ccountry_filter.value.push(...aCntry);
     
-    console.log("TEST=",ccountry_filter.value, ccountry_list.value);
+    ccountry_list.value = ccountry.value.map((country) => country.country_name);
+
+    console.log("TEST=", ccountry_filter.value, ccountry_list.value);
   } catch (e) {
     const response = await Swal.fire({
       title: __('are you want to try again') + '?',
@@ -62,48 +56,50 @@ const fetch = async () => {
     response.isConfirmed && fetch()
   }
 }
-
+function selectCountry(item,id) {
+  let cCntry = [ ['Country'], ];
+  let aCntry = selected.value.map((country) => [country]);
+  
+  ccountry_filter.value = cCntry;
+  ccountry_filter.value.push(...aCntry);
+}
 onMounted(fetch);
 </script>
 
 <template>
-
-    <fwb-navbar>
-      <template #logo>
-        <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#">
-          IKEA Price Craweler
-        </fwb-navbar-logo>
-      </template>
-      <template #default="{isShowMenu}">
-        <fwb-navbar-collapse :is-show-menu="isShowMenu">
-          <fwb-navbar-link is-active link="#">
-            Home
-          </fwb-navbar-link>
-          <fwb-navbar-link link="#">
-            Services
-          </fwb-navbar-link>
-          <fwb-navbar-link link="#">
-            Pricing
-          </fwb-navbar-link>
-          <fwb-navbar-link link="#">
-            Contact
-          </fwb-navbar-link>
-        </fwb-navbar-collapse>
-      </template>
-    </fwb-navbar>
-  
-  <GChart
-    :type="type"
-    :data="ccountry_filter"
-    :options="options"
-    :settings="chart_settings"
-  />
-
-   <multiselect
-      :multiple="true"
-      v-model="selected"
-      :options="ccountry_list">
-  </multiselect>
-
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#">
+        IKEA Price Craweler
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{ isShowMenu }">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+  </fwb-navbar>
+  <div class="m-3">
+  <div class="grid gap-2">
+    <div class="justify-center rounded-md border-black border-8 max-w-fit">
+      <GChart :type="type" :data="ccountry_filter" :options="options" :settings="chart_settings" />
+    </div>
+    <div class="max-">
+      <multiselect :multiple="true" v-model="selected" :options="ccountry_list" @select="selectCountry">
+      </multiselect>
+    </div>
+  </div>
+  </div>
 </template>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>