diff --git a/README.md b/README.md
index 5f9ee34..511729f 100644
--- a/README.md
+++ b/README.md
@@ -103,3 +103,8 @@
 ## Firfox Plugin
 
 ## Web 
+
+
+## Trouble
+
+- fetch 不能在 header 裡面用中文
\ No newline at end of file
diff --git a/front-end/app/API/fetchJob.js b/front-end/app/API/fetchJob.js
index 1e17c4a..26ff50c 100644
--- a/front-end/app/API/fetchJob.js
+++ b/front-end/app/API/fetchJob.js
@@ -13,16 +13,14 @@ export default function fetchJob({
     const {
         backend
     } = config
+
     const options = {
         method: 'GET',
-        headers: {
-            "X-Company-Name": company_name,
-            "X-Job-Name": job_name,
-            "X-E04-Job-No": e04_job_no
-        },
         mode: 'cors'
     }
-    return fetch(`${backend}/jobs`, options)
+
+    const url = `${backend}/jobs?company_name=${company_name}&job_name=${job_name}&e04_job_no=${e04_job_no}`
+    return fetch(url, options)
         .then(checkStatus)
         .then(parseJSON)
 }
\ No newline at end of file
diff --git a/front-end/app/containers/App.js b/front-end/app/containers/App.js
index 83b3d02..7998528 100644
--- a/front-end/app/containers/App.js
+++ b/front-end/app/containers/App.js
@@ -1,3 +1,8 @@
+import getProvider, {
+    getProviderName,
+    getJobQuery
+} from '../providers'
+
 import {
     connect
 } from 'react-redux'
@@ -84,6 +89,7 @@ class App extends React.Component {
         const {
             dispatch
         } = this.props
+
         chrome.storage.sync.get('access_token', (item) => {
             console.log('item ==>', item);
             if (!!item['access_token']) {
@@ -92,6 +98,12 @@ class App extends React.Component {
                 console.log('access token not found');
             }
         })
+
+        const provider = getProvider()
+        const query = getJobQuery(provider)
+        dispatch(requestFetchJob(query))
+                
+
     }
 
     render() {
@@ -104,7 +116,7 @@ class App extends React.Component {
         const {
             access_token
         } = user
-        console.log('job==>',job);
+        console.log('job==>', job);
         return (
             <div>
                 test app container
diff --git a/front-end/app/containers/Root.js b/front-end/app/containers/Root.js
index 0b82e3d..dab8b51 100644
--- a/front-end/app/containers/Root.js
+++ b/front-end/app/containers/Root.js
@@ -1,16 +1,12 @@
 import { Provider } from 'react-redux'
 import App from './App'
 
-class Root extends React.Component {
-    render() {
-        const {store} = this.props
-        return (
-              <Provider store={store}>
-                  <App/>
-              </Provider>
-            )
-    }
-}
+
+const Root = ({store}) => (
+          <Provider store={store}>
+              <App/>
+          </Provider>
+    )
 
 Root.propTypes = {
   store: React.PropTypes.object.isRequired
diff --git a/front-end/app/index.js b/front-end/app/index.js
index 7018639..ca73bb7 100644
--- a/front-end/app/index.js
+++ b/front-end/app/index.js
@@ -3,6 +3,10 @@ import Root from './containers/Root'
 import store from './store.js'
 
 
-export default function main(containerId) {
-    ReactDOM.render(<Root store={store}/>, document.getElementById(containerId))
+export default function main(containerId, {
+    job_name,
+    company_name
+}) {
+    ReactDOM.render(<Root store={store} company_name={company_name}/>,
+        document.getElementById(containerId))
 }
\ No newline at end of file
diff --git a/front-end/app/providers/104.js b/front-end/app/providers/104.js
index 572b6a7..80f664a 100644
--- a/front-end/app/providers/104.js
+++ b/front-end/app/providers/104.js
@@ -1,13 +1,15 @@
-const getJobTitile = () => document.querySelector('#job h1')
+const get_job_name = () => document.querySelector('#job h1')
     .firstChild
     .textContent.trim()
-const getCompanyName = () => document.querySelector('#job .company a')
+const get_company_name = () => document.querySelector('#job .company a')
     .firstChild
     .textContent.trim()
+const get_e04_job_no = () => location.search.match(/\?jobno=([^\&]+)/)[1]
 
 const provider = {
-    getJobTitile,
-    getCompanyName
+    get_job_name,
+    get_company_name,
+    get_e04_job_no
 }
 
 export default provider
\ No newline at end of file
diff --git a/front-end/app/providers/index.js b/front-end/app/providers/index.js
index f84fd60..456de54 100644
--- a/front-end/app/providers/index.js
+++ b/front-end/app/providers/index.js
@@ -4,4 +4,21 @@ const rootProvider = {
     ["104"]: p104
 }
 
-export default rootProvider
\ No newline at end of file
+export function getProviderName() {
+    const matcher = location.host.match(/([^w\.]+)\.com/)
+    if (matcher) {
+        return matcher[1]
+    }
+}
+
+export function getJobQuery(provider) {
+    const jobQuery = {}
+    Object.keys(provider).forEach(key => {
+        jobQuery[key.substring(4)] = provider[key]()
+    })
+    return jobQuery
+}
+
+export default function getProvider () {
+    return rootProvider[getProviderName()]
+}
\ No newline at end of file
diff --git a/front-end/app/sagas/fetchJob.js b/front-end/app/sagas/fetchJob.js
index b2130a1..1013ce3 100644
--- a/front-end/app/sagas/fetchJob.js
+++ b/front-end/app/sagas/fetchJob.js
@@ -13,6 +13,14 @@ import {
     SUCCESS_FETCH_JOB
 } from '../actions/fetchJob.js'
 
+import {
+    REQUEST_CREATE_JOB
+} from '../actions/createJob.js'
+
+import {
+    REQUEST_FETCH_COMMENTS
+} from '../actions/fetchComments.js'
+
 import fetchJob from '../API/fetchJob.js'
 
 export function* watchRequestFetchJob() {
@@ -21,15 +29,29 @@ export function* watchRequestFetchJob() {
 
 export function* fetchJobFlow(action) {
     try {
+        
         const job = yield call(fetchJob, action.query)
-        yield put({
-            type: SUCCESS_FETCH_JOB,
-            job
-        })
+        yield call(jobHandler, job, action)
+
     } catch (error) {
         yield put({
             type: FAIL_TO_FETCH_JOB,
             error
         })
     }
-}
\ No newline at end of file
+}
+
+export function* jobHandler(job, action) {
+    if (job === null) {
+        yield put({
+            type: REQUEST_CREATE_JOB,
+            params: action.query
+        })
+    } else {
+        yield put({
+            type: SUCCESS_FETCH_JOB,
+            job
+        })
+    }
+}
+
diff --git a/front-end/app/sagas/index.js b/front-end/app/sagas/index.js
index c91ba6d..46fc8d7 100644
--- a/front-end/app/sagas/index.js
+++ b/front-end/app/sagas/index.js
@@ -3,12 +3,17 @@ import {watchRequestLeaveComment} from './leaveComment.js'
 import {watchRequestFetchComments} from './fetchComments.js'
 import {watchRequestFetchJob} from './fetchJob.js'
 import {watchRequestCreateJob} from './createJob.js'
+import {
+    transactionOfJobAndComments
+} from './transactionFlows.js'
+
 export default function* rootSaga() {
     yield [
         watchRequestLogin(),
         watchRequestLeaveComment(),
         watchRequestFetchComments(),
         watchRequestFetchJob(),
-        watchRequestCreateJob()
+        watchRequestCreateJob(),
+        transactionOfJobAndComments()
     ]
 }
diff --git a/front-end/app/sagas/leaveComment.js b/front-end/app/sagas/leaveComment.js
index c5a8808..00b1626 100644
--- a/front-end/app/sagas/leaveComment.js
+++ b/front-end/app/sagas/leaveComment.js
@@ -11,10 +11,6 @@ import {
 import checkAccessToken from '../API/checkAccessToken.js'
 import createComment from '../API/createComment.js'
 
-import {
-
-} from '../actions/fetchComments.js'
-
 import {
     REQUEST_LEAVE_COMMENT,
     FAIL_TO_LEAVE_COMMENT,
diff --git a/front-end/app/sagas/transactionFlows.js b/front-end/app/sagas/transactionFlows.js
new file mode 100644
index 0000000..3da6976
--- /dev/null
+++ b/front-end/app/sagas/transactionFlows.js
@@ -0,0 +1,28 @@
+import {
+    takeEvery
+} from 'redux-saga'
+
+import {
+    put,
+    call
+} from 'redux-saga/effects'
+
+import {
+    SUCCESS_CREATE_JOB
+} from '../actions/createJob.js'
+
+import {
+    SUCCESS_FETCH_JOB
+} from '../actions/fetchJob.js'
+
+import {
+    requestFetchComments
+} from '../actions/fetchComments.js'
+
+export function* transactionOfJobAndComments() {
+    yield call(takeEvery, [SUCCESS_CREATE_JOB, SUCCESS_FETCH_JOB], sendRequestToFetchComments)
+}
+
+export function* sendRequestToFetchComments(action) {
+    yield put(requestFetchComments(action.job.id))
+}
\ No newline at end of file
diff --git a/front-end/content.js b/front-end/content.js
index 89ccd97..ac337e2 100644
--- a/front-end/content.js
+++ b/front-end/content.js
@@ -1,16 +1,26 @@
-import providers from './app/providers'
+import getProvider, {
+    getProviderName,
+    getJobQuery
+} from './app/providers'
 import renderApp from './app'
 
-console.log('load content script');
 
-const jobTitle = providers['104'].getJobTitile()
-const companyName = providers['104'].getCompanyName()
+const providerName = getProviderName()
+console.log('providerName:', providerName);
+const provider = getProvider()
+console.log('provider:', provider);
+const jobObject = getJobQuery(provider)
+console.log('jobObject:',jobObject);
+const {job_name,company_name} = jobObject
 
 const node = document.createElement('div')
-const nodeId = `${jobTitle}Cla`
+const nodeId = `${job_name}Cla`
 
-console.log(jobTitle,companyName);
+console.log(job_name, company_name);
 node.id = nodeId
 document.body.appendChild(node)
 
-renderApp(nodeId)
+renderApp(nodeId, {
+    job_name,
+    company_name
+})
\ No newline at end of file
diff --git a/front-end/dev.js b/front-end/dev.js
index 9031b78..434803e 100644
--- a/front-end/dev.js
+++ b/front-end/dev.js
@@ -1,3 +1,23 @@
 import Loading from './app/components/Loading'
+import fetchJob from './app/API/fetchJob.js'
+import createJob from './app/API/createJob.js'
+const handler = (e) => {
+    const company_name = '中文'
+    const job_name = 'test'
+    const e04_job_no = 'e0444'
 
-ReactDOM.render(<Loading/>, document.querySelector('#container'))
\ No newline at end of file
+    fetchJob({
+        company_name,
+        job_name,
+        e04_job_no
+    }).then(result => {
+        console.log('result=>',result);
+    })
+}
+const App = () => (
+    <div>
+        <Loading/>
+        <button onClick={handler}>fetch job</button>
+    </div>
+)
+ReactDOM.render(<App/>, document.querySelector('#container'))
\ No newline at end of file
diff --git a/tests/front-end/sagas/fetchJob.spec.js b/tests/front-end/sagas/fetchJob.spec.js
index f193c67..64697bb 100644
--- a/tests/front-end/sagas/fetchJob.spec.js
+++ b/tests/front-end/sagas/fetchJob.spec.js
@@ -17,9 +17,14 @@ import {
     SUCCESS_FETCH_JOB
 } from 'actions/fetchJob.js'
 
+import {
+    REQUEST_CREATE_JOB
+} from 'actions/createJob.js'
+
 import {
     watchRequestFetchJob,
-    fetchJobFlow
+    fetchJobFlow,
+    jobHandler
 } from 'sagas/fetchJob.js'
 
 import fetchJob from 'API/fetchJob.js'
@@ -52,26 +57,64 @@ describe('Sagas/ fetchJob', () => {
             assert.deepEqual(expected, actual)
         })
 
-        it('should put success fetch job effect', () => {
+        it('should call jobHandler', () => {
             const job = {
                 id: '123123',
                 e04_job_no: '123$3#',
                 company_name: 'goo',
                 job_name: 'work'
             }
-            const expected = put({
-                type: SUCCESS_FETCH_JOB,
-                job
-            })
+            const expected = call(jobHandler, job, action)
             const actual = iterator.next(job).value
             assert.deepEqual(expected, actual)
         })
 
         it('should handle error', () => {
             const error = new Error('mock')
-            const expected = put({type: FAIL_TO_FETCH_JOB, error})
+            const expected = put({
+                type: FAIL_TO_FETCH_JOB,
+                error
+            })
             const actual = iterator.throw(error).value
             assert.deepEqual(expected, actual)
+        })
+        describe('jobHandler', () => {
+            describe('if job is null', () => {
+                const iterator = jobHandler(null, action)
+                it('should put request create job effect, if the job is null', () => {
+                    const expected = put({
+                        type: REQUEST_CREATE_JOB,
+                        params: action.query
+                    })
+                    const actual = iterator.next().value
+                    assert.deepEqual(expected, actual)
+                })
+            })
+
+            describe('if job is found', () => {
+                const job = {
+                    id: '123123',
+                    e04_job_no: '123$3#',
+                    company_name: 'goo',
+                    job_name: 'work'
+                }
+                const iterator = jobHandler(job, action)
+
+                it('should put success fetched job effect, if the job is found', () => {
+                    const expected = put({
+                        type: SUCCESS_FETCH_JOB,
+                        job
+                    })
+                    const actual = iterator.next().value
+                    assert.deepEqual(expected, actual)
+                })
+            })
+
+
+
+            
         })
     })
+
+
 })
\ No newline at end of file
diff --git a/tests/front-end/sagas/transactionFlows.spec.js b/tests/front-end/sagas/transactionFlows.spec.js
new file mode 100644
index 0000000..93a9910
--- /dev/null
+++ b/tests/front-end/sagas/transactionFlows.spec.js
@@ -0,0 +1,43 @@
+import 'babel-polyfill'
+
+import {
+    assert
+} from 'chai'
+
+import {
+    takeEvery
+} from 'redux-saga'
+
+import {
+    put,
+    call
+} from 'redux-saga/effects'
+
+import {
+    SUCCESS_CREATE_JOB
+} from 'actions/createJob.js'
+
+import {
+    SUCCESS_FETCH_JOB
+} from 'actions/fetchJob.js'
+
+import {
+    requestFetchComments
+} from 'actions/fetchComments.js'
+
+import {
+    transactionOfJobAndComments,
+    sendRequestToFetchComments
+} from 'sagas/transactionFlows'
+
+describe('Sagas/ Transaction flows', () => {
+    describe('transactionOfJobAndComments', () => {
+        const iterator = transactionOfJobAndComments()
+
+        it('should watch success effect of fetching and creating job, and call sendRequestToFetchComments', () => {
+            const expected = call(takeEvery, [SUCCESS_CREATE_JOB, SUCCESS_FETCH_JOB], sendRequestToFetchComments)
+            const actual = iterator.next().value
+            assert.deepEqual(expected, actual)
+        })
+    })
+})
\ No newline at end of file