diff --git a/.vscode/settings.json b/.vscode/settings.json
index eb260ed..bfa0aab 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "todo-tree.flat": true,
+  "todo-tree.flat": false,
   "todo-tree.grouped": false,
   "todo-tree.expanded": true
 }
\ No newline at end of file
diff --git a/src/components/RouteDetail.js b/src/components/RouteDetail.js
index 5cf3295..0ddb0ef 100644
--- a/src/components/RouteDetail.js
+++ b/src/components/RouteDetail.js
@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
 import Spinner from './Spinner'
 import { getRoute, polygonUpdate } from '../actions'
 import { getStopTime } from '../actions/stoptime'
+import { getTrip } from '../actions/trip'
 import store from '../store'
 
 const StyledTripDesc = styled.div`
@@ -14,7 +15,6 @@ line-height: 0.85rem;
 margin-left: 10px;
 `
 
-
 const RouteDesc = (props) => (
   <div>
     <span className="panel-block">
@@ -60,7 +60,15 @@ const TripList = (props) => (
         {ele.stoptime.count > 0 && <div>
           <b>Stop</b> #{ele.stoptime.count}
           <br />
-          <b>Time period</b> {ele.stoptime.period[0]} - {ele.stoptime.period[1]}
+          <b>Time period</b>
+          <br />
+          &nbsp;&nbsp;{ele.stoptime.period[0]} - {ele.stoptime.period[1]}
+          <br />
+          {ele.frequency_set.length > 0 && <b>Frequency</b>}
+          {ele.frequency_set.map(freq => (
+            <span key={`freq-${freq.id}`}><br />&nbsp;&nbsp;{freq.start_time} -{freq.end_time}
+            <br />&nbsp;&nbsp;รอบละ {freq.headway_secs/60} นาที</span>
+          ))}
           </div>}
         </StyledTripDesc>
       </span>
@@ -97,6 +105,8 @@ class RouteDetail extends Component {
   componentDidMount() {
     const { updateBreadcrumb, match } = this.props
     updateBreadcrumb(match.params)
+    // fetch related trips
+    store.dispatch(getTrip(`route=${match.params.routeId}`))
   }
 
   componentWillMount() {
@@ -111,7 +121,6 @@ class RouteDetail extends Component {
   componentWillReceiveProps(newProps) {
     if (this.props.route.count < newProps.route.count) {
       this.pushShapeToStore(this.props.match, newProps.route)
-
     }
   }
 
@@ -128,7 +137,7 @@ class RouteDetail extends Component {
   }
 
   render() {
-    const { route, match } = this.props
+    const { route, match, trip } = this.props
     const { routeId, agencyId, routeParams } = match.params
     const tRoute = route.results.filter(ele => ele.route_id === routeId)
     if (tRoute.length === 0) {
@@ -139,7 +148,6 @@ class RouteDetail extends Component {
     }
     const item = tRoute[0]
     const baseUrl = `/map/${agencyId}/route/${routeId}`
-    // TODO: change TripList to use from store.trip (when update will change automatically)
     return (
       <nav className="panel">
         <p className="panel-heading">
@@ -156,7 +164,7 @@ class RouteDetail extends Component {
         <Route exact path={`${baseUrl}/fare`} render={(props) => (
           <FareRuleList farerules={item.farerule_set} {...props} />)} />
         <Route exact path={`${baseUrl}/trip`} render={(props) => (
-          <TripList trips={item.trip_set} routeId={routeId} agencyId={agencyId} {...props} />)} />
+          <TripList trips={trip.results} routeId={routeId} agencyId={agencyId} {...props} />)} />
       </nav>
     )
   }
@@ -164,6 +172,7 @@ class RouteDetail extends Component {
 
 const mapStateToProps = state => ({
   route: state.route,
+  trip: state.trip,
 })
 export default connect(
   mapStateToProps
diff --git a/src/components/TripForm.js b/src/components/TripForm.js
index 81fa8bc..370d836 100644
--- a/src/components/TripForm.js
+++ b/src/components/TripForm.js
@@ -110,7 +110,23 @@ class TripForm extends Component {
     const { agencyId, routeId } = this.props.match.params
     const { fetching } = this.props.route
     const { calendar } = this.props
-
+    const serviceChoices = calendar.results.map(ele => ({
+      ...ele,
+      value: ele.id,
+      label: ele.service_id
+    }))
+    let serviceValue = null
+    if (one.service !== null) {
+      if (isNaN(one.service)) {
+        serviceValue = {
+          ...one.service,
+          value: one.service.id,
+          label: one.service.service_id,
+        }
+      } else {
+        serviceValue = getItemFromList(one.service, serviceChoices)
+      }
+    }
     return (
       <StyledTripForm>
         <h1 className="title">{one.name}&nbsp;&nbsp;</h1>
@@ -140,9 +156,10 @@ class TripForm extends Component {
               label="Service"
               type="text"
               fieldName="service"
-              value={one.service && {...one.service, label: one.service.service_id}}
               handleChange={this.handleChange}
-              choices={calendar.results.map(ele => ({ value: ele.id, label: ele.service_id }))} />}
+              value={serviceValue}
+              choices={serviceChoices}
+            />}
 
           <HorizontalSelect
               label="Direction ID"
diff --git a/src/components/parts/HorizontalSelect.js b/src/components/parts/HorizontalSelect.js
index ab5f0c4..1fd8644 100644
--- a/src/components/parts/HorizontalSelect.js
+++ b/src/components/parts/HorizontalSelect.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import Select from 'react-select'
-// import 'react-select/dist/react-select.css'
 
 
 const HorizontalInput = (props) => (
diff --git a/src/components/parts/Select.js b/src/components/parts/Select.js
index 7628ac4..b851b10 100644
--- a/src/components/parts/Select.js
+++ b/src/components/parts/Select.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import Select from 'react-select'
-// import 'react-select/dist/react-select.css'
 
 
 const NormalSelect = (props) => (
diff --git a/src/container/Geo.js b/src/container/Geo.js
index e7d501b..5206eb5 100644
--- a/src/container/Geo.js
+++ b/src/container/Geo.js
@@ -42,7 +42,6 @@ z-index: 30;
 
 
 // TODO: filter for existing polygons
-// TODO: update mapCenter to recent active route/trip or current location
 
 const stopIcon = L.divIcon({
   className: 'divIcon',