diff --git a/src/components/FareAttributesForm.js b/src/components/FareAttributesForm.js
index c194738..f695782 100644
--- a/src/components/FareAttributesForm.js
+++ b/src/components/FareAttributesForm.js
@@ -17,23 +17,12 @@ import {
   PaymentMethodChoices, TransferChoices
 } from '../constants/choices'
 import { getItemFromList, getAgencyAsyncSelect } from '../utils'
+import { AgencyOption } from './parts/SelectOptions'
 
 const StyledFareAttributesForm = styled.div`
 padding: 1rem;
 background: #fafafa;
-`;
-
-
-const AgencyOption = (props) => {
-  const { agency_id, name } = props.data
-  return (
-    <components.Option {...props}>
-      <code>{agency_id}</code> {name}
-    </components.Option>
-  )
-}
-
-
+`
 
 class FareAttributesForm extends Component {
 
@@ -159,7 +148,7 @@ class FareAttributesForm extends Component {
                   let evt = {
                     target: {
                       name: 'agency',
-                      value: resp,
+                      value: resp.value,
                     }}
                   this.handleChange(evt)
                 }
diff --git a/src/components/FareList.js b/src/components/FareList.js
index 898f0c9..9ea1687 100644
--- a/src/components/FareList.js
+++ b/src/components/FareList.js
@@ -120,8 +120,8 @@ class FareList extends Component {
             <div className="level-item has-text-centered">
               <div>
                 <p className="heading">Route ID</p>
-                <p className="title">
-                  {farerule.results[i].route_id || '-'}
+                <p>
+                  {farerule.results[i].route && farerule.results[i].route.route_id || '-'}
                 </p>
               </div>
             </div>
diff --git a/src/components/FareRulesForm.js b/src/components/FareRulesForm.js
index f05efe8..bb88530 100644
--- a/src/components/FareRulesForm.js
+++ b/src/components/FareRulesForm.js
@@ -9,55 +9,28 @@ import {
   deleteFareRule
 } from '../actions/fare'
 import store from '../store'
-import Input from './parts/Input'
 import AsyncSelect from 'react-select/lib/Async'
-import { components } from 'react-select'
 import {
   getStopsAsyncSelect,
   getFareAttrAsyncSelect,
   getRouteAsyncSelect
 } from '../utils'
+import {
+  StopOption, FareAttrOption, RouteOption
+} from './parts/SelectOptions'
 
 const StyledFareRulesForm = styled.div`
 padding: 1rem;
 background: #fafafa;
-`;
-
-const StopOption = (props) => {
-  const { stop_id, name } = props.data
-  return (
-    <components.Option {...props}>
-      <code>{stop_id}</code> {name}
-    </components.Option>
-  )
-}
-
-const FareAttrOption = (props) => {
-  const { fare_id, price, currency_type } = props.data
-  return (
-    <components.Option {...props}>
-      <code>{fare_id}</code> {price} {currency_type}
-    </components.Option>
-  )
-}
-
-const RouteOption = (props) => {
-  const { route_id, short_name, long_name} = props.data
-  return (
-    <components.Option {...props}>
-      <code>{route_id}</code> {short_name}
-      <br/>{long_name}
-    </components.Option>
-  )
-}
+`
 
 
 class FareRulesForm extends Component {
 
   state = {
     id: null,
-    fare_id: "",
-    route_id: "", // optinal
+    fare: null,
+    route: null, // optinal
     origin_id: "",
     destination_id: "",
     contains_id: "",
@@ -127,7 +100,7 @@ class FareRulesForm extends Component {
                   let evt = {
                     target: {
                       name: 'fare',
-                      value: resp,
+                      value: resp.value,
                     }}
                   this.handleChange(evt)
                 }
@@ -136,19 +109,19 @@ class FareRulesForm extends Component {
           </div>
 
           <div className="field">
-            <label className="label">Route</label>
+            <label className="label">Route <i>optional</i></label>
             <AsyncSelect
               cacheOptions={true}
               defaultOptions
-              defaultValue={one.route_id && {value: one.route_id, label: one.route_id}}
+              defaultValue={one.route && {value: one.route, label: one.route.route_id}}
               loadOptions={getRouteAsyncSelect}
               components={{ Option: RouteOption }}
               onChange={(resp, evt) => {
                 if (evt.action === 'select-option') {
                   let evt = {
                     target: {
-                      name: 'route_id',
-                      value: resp.route_id,
+                      name: 'route',
+                      value: resp.value,
                     }}
                   this.handleChange(evt)
                 }
@@ -169,7 +142,7 @@ class FareRulesForm extends Component {
                   let evt = {
                     target: {
                       name: 'origin_id',
-                      value: resp.stop_id,
+                      value: resp.value.stop_id,
                     }}
                   this.handleChange(evt)
                 }
@@ -178,9 +151,10 @@ class FareRulesForm extends Component {
           </div>
 
           <div className="field">
-            <label className="label">Destination ID</label>
+            <label className="label">Destination ID (or IDs)</label>
             <AsyncSelect
-              cacheOptions={true}
+              isMulti
+              cacheOptions
               defaultOptions
               defaultValue={one.destination_id && {value: one.destination_id, label: one.destination_id}}
               loadOptions={getStopsAsyncSelect}
@@ -190,7 +164,7 @@ class FareRulesForm extends Component {
                   let evt = {
                     target: {
                       name: 'destination_id',
-                      value: resp.stop_id,
+                      value: resp.map(el => el.value.stop_id),
                     }}
                   this.handleChange(evt)
                 }
@@ -199,8 +173,9 @@ class FareRulesForm extends Component {
           </div>
 
           <div className="field">
-            <label className="label">Contains ID</label>
+            <label className="label">Contains ID (or IDs)</label>
             <AsyncSelect
+              isMulti
               cacheOptions={true}
               defaultOptions
               defaultValue={one.contains_id && {value: one.contains_id, label: one.contains_id}}
@@ -211,13 +186,15 @@ class FareRulesForm extends Component {
                   let evt = {
                     target: {
                       name: 'contains_id',
-                      value: resp.stop_id,
+                      value: resp.map(el => el.value.stop_id),
                     }}
                   this.handleChange(evt)
                 }
               }}
               />
           </div>
+
+          <p>When having multiple destinations or contains, multiple fare rule records will be created automatically. Nothing differs from adding multiple records manually, it only saves time. !! only works with CREATE, UPDATE will throw 500</p>
         </div>
 
         <div className="field is-grouped">
diff --git a/src/components/StopForm.js b/src/components/StopForm.js
index ea4041c..f7d49f2 100644
--- a/src/components/StopForm.js
+++ b/src/components/StopForm.js
@@ -16,21 +16,13 @@ import {
   StopLocationTypes, StopWheelChairInfo
 } from '../constants/choices'
 import { getItemFromList, getStopsAsyncSelect } from '../utils'
+import { StopOption } from './parts/SelectOptions'
 
 const StyledStopForm = styled.div`
 padding: 1rem;
 background: #fafafa;
 `
 
-const Option = (props) => {
-  const { stop_id, name, stop_desc } = props.data
-  return (
-    <components.Option {...props}>
-      <code>{stop_id}</code> {name}
-      {stop_desc.length > 0 && <small><br />{stop_desc}</small>}
-    </components.Option>
-  )
-}
 
 // TODO: need to deal with shapes
 
@@ -278,13 +270,13 @@ class StopForm extends Component {
               defaultOptions
               defaultValue={null}
               loadOptions={getStopsAsyncSelect}
-              components={{ Option }}
-              onChange={(item, evt) => {
+              components={{ Option: StopOption }}
+              onChange={(resp, evt) => {
                 if (evt.action === 'select-option') {
                   let evt = {
                     target: {
                       name: 'mergeWith',
-                      value: item,
+                      value: resp.value,
                     }}
                   this.handleChange(evt)
                 }
diff --git a/src/components/parts/SelectOptions.js b/src/components/parts/SelectOptions.js
new file mode 100644
index 0000000..0fd903a
--- /dev/null
+++ b/src/components/parts/SelectOptions.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { components } from 'react-select'
+
+
+export const StopOption = (props) => {
+  const { stop_id, name, stop_desc } = props.data.value
+  return (
+    <components.Option {...props}>
+      <code>{stop_id}</code> {name}
+      {stop_desc.length > 0 && <small><br />{stop_desc}</small>}
+    </components.Option>
+  )
+}
+
+export const FareAttrOption = (props) => {
+  const { fare_id, price, currency_type } = props.data.value
+  return (
+    <components.Option {...props}>
+      <code>{fare_id}</code> {price} {currency_type}
+    </components.Option>
+  )
+}
+
+export const RouteOption = (props) => {
+  const { route_id, short_name, long_name} = props.data.value
+  return (
+    <components.Option {...props}>
+      <code>{route_id}</code> {short_name}
+      <br/>{long_name}
+    </components.Option>
+  )
+}
+
+export const AgencyOption = (props) => {
+  const { agency_id, name } = props.data.value
+  return (
+    <components.Option {...props}>
+      <code>{agency_id}</code> {name}
+    </components.Option>
+  )
+}
diff --git a/src/constants/Api.js b/src/constants/Api.js
index 4c9787b..a8ddabe 100644
--- a/src/constants/Api.js
+++ b/src/constants/Api.js
@@ -1,6 +1,6 @@
 
-// export const URL = process.env.API_URL || '//localhost:8000'
-export const URL = process.env.API_URL || 'https://api.goth.app'
+export const URL = process.env.API_URL || '//localhost:8000'
+// export const URL = process.env.API_URL || 'https://api.goth.app'
 export const API_PREFIX = process.env.API_PREFIX || '/v1'
 export const API_URL = `${URL}${API_PREFIX}`
 export const LOGIN = '/api-token-auth/'
diff --git a/src/reducers/farerule.js b/src/reducers/farerule.js
index 7421eee..187219b 100644
--- a/src/reducers/farerule.js
+++ b/src/reducers/farerule.js
@@ -45,14 +45,21 @@ const fareRule = (state = fareRuleInitState, action) => {
         ]
       }
     case FARERULE_CREATE:
+      let r
+      /* check if it's array by
+        - action.payload instanceof Array
+        - Array.isArray(action.payload)
+      */
+      if (Array.isArray(action.payload)) {
+        r = [...state.results, ...action.payload]
+      } else {
+        r = [...state.results, action.payload]
+      }
       return {
         ...state,
         fetching: false,
         count: state.count + 1,
-        results: [
-          ...state.results,
-          action.payload,
-        ]
+        results: r,
       }
     case FARERULE_DELETE:
       const deleteInd = state.results.findIndex(ele => ele.id === action.meta.id)
diff --git a/src/utils/index.js b/src/utils/index.js
index 8e811cc..dd7ef70 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -2,6 +2,7 @@ import { CancelToken } from 'axios'
 import { apiClient } from './ApiClient'
 import polyUtil from 'polyline-encoded'
 
+
 export const decodeGeoJson = (encodedOne) => {
   if (typeof encodedOne.coordinates === "string")
     encodedOne.coordinates = polyUtil.decode(encodedOne.coordinates)
@@ -34,8 +35,8 @@ export const getStopsAsyncSelect = (inputValue, callback) => {
   apiClient(`/stop/?search=${inputValue}`, { cancelToken })
     .then((resp) => {
       callback(resp.data.results.map(i => ({
-        ...i,
-        label: i.name
+        value: {...i},
+        label: `${i.stop_id}-${i.name}`
       })))
     })
 }
@@ -52,7 +53,7 @@ export const getFareAttrAsyncSelect = (inputValue, callback) => {
   apiClient(`/fare-attribute/?search=${inputValue}`, { cancelToken })
     .then((resp) => {
       callback(resp.data.results.map(i => ({
-        ...i,
+        value: {...i},
         label: i.fare_id
       })))
     })
@@ -70,7 +71,7 @@ export const getRouteAsyncSelect = (inputValue, callback) => {
   apiClient(`/route/?search=${inputValue}`, { cancelToken })
     .then((resp) => {
       callback(resp.data.results.map(i => ({
-        ...i,
+        value: {...i},
         label: i.route_id
       })))
     })
@@ -88,7 +89,7 @@ export const getAgencyAsyncSelect = (inputValue, callback) => {
   apiClient(`/agency/?search=${inputValue}`, { cancelToken })
     .then((resp) => {
       callback(resp.data.results.map(i => ({
-        ...i,
+        value: {...i},
         label: i.name
       })))
     })