diff --git a/README.md b/README.md
index 2dc0b03..d431658 100644
--- a/README.md
+++ b/README.md
@@ -18,3 +18,45 @@ Inspired by https://github.com/allenwhale/react-redux-boilerplate
 ---
  - npm install
  - npm run build
+
+### Contribution
+---
+ - For latest release please checkout master branch
+ - For contributing developpemnt please checkout dev branch 
+
+# Important
+ - After cloning or forking the repo, go to ```src/js/utils``` and change the ```confing.js.sample``` file into ```config.js``` to prevent critical building error.
+
+### Issue tracking
+---
+ - Strongly suggested using zenhub
+ 	https://www.zenhub.com/
+ - Feel free to open new issue or take on existing issues in the backlog.
+ - New issues will be sorted into backlog or ice box(to be done later).
+ - Beginners may want to solve the issues with "newbies" tags, which is easier and will help you understand the framework.
+
+### Newbie guidelines
+---
+ - Install zenhub
+ - Go to "Board" and pick a newbies issue
+ - Fork repo
+ - Pull from dev branch
+ - Fix the config problem mentioned above
+ - Make your changes(solve the issue)
+ - Send pull request
+ 
+### Note
+ ---
+  - Our work flow is based on git flow but less complicated, more like git flow + github flow.
+  - That is to say, even the PRs are accepted, they won't be released immediately. Your changes will be merged into dev not master, waiting for the next version upgrade to be released.
+  - Good to know:
+  	- git flow
+  		https://datasift.github.io/gitflow/IntroducingGitFlow.html
+  	- github flow
+  		https://guides.github.com/introduction/flow/
+
+### Contact
+ ---
+ - fb group: https://www.facebook.com/groups/internlens
+ - email: internlens.tw@gmail.com
+ - website: https://internlens.com/
\ No newline at end of file
diff --git a/package.json b/package.json
index 452b1f3..b7fbfd3 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react-loading": "0.0.9",
     "react-rater": "^0.3.5",
     "react-redux": "^5.0.3",
+    "react-redux-firebase": "^1.4.0-rc.1",
     "react-router": "^3.0.0",
     "react-router-bootstrap": "^0.23.1",
     "react-router-redux": "^4.0.6",
@@ -78,7 +79,7 @@
     "html-webpack-plugin": "^2.24.0",
     "http-proxy-middleware": "^0.17.2",
     "node-sass": "^3.10.1",
-    "react-redux": "^5.0.2",
+    "react-redux": "^5.0.4",
     "react-transform-catch-errors": "^1.0.2",
     "redbox-react": "^1.3.2",
     "redux": "^3.6.0",
diff --git a/src/index.ejs b/src/index.ejs
index 22ae1e3..a886350 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -30,6 +30,8 @@
         <link rel="apple-touch-icon" href="./img/favicon-128x128.png">
         <link rel="icon" href="favicon.ico" type="image/x-icon" />
         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+        <script src="https://use.typekit.net/kxi8dqi.js"></script>
+        <script>try{Typekit.load({ async: true });}catch(e){}</script>
         <script src='https://www.google.com/recaptcha/api.js'></script>
     </head>
 
diff --git a/src/js/components/App.jsx b/src/js/components/App.jsx
index 45945f3..1afefa7 100644
--- a/src/js/components/App.jsx
+++ b/src/js/components/App.jsx
@@ -14,7 +14,8 @@ export default CSSModules(class extends Component {
             <StyleRoot>
                 <App style={{
                     maxWidth: '100%',
-                    background: 'white'
+                    background: 'white',
+                    maxHeight: 'none'
                 }}>
                     <Box justify='start'
                       align='center'
@@ -26,7 +27,10 @@ export default CSSModules(class extends Component {
                       full={true}
                       colorIndex='light-2'
                       style={{
-                          background: 'white'
+                          background: 'white',
+                          maxHeight: 'none',
+                          height: 'auto',
+                          overflow: 'none'
                       }}>
                     <Containers.common.Navbar {...this.props}/>
                       <Box direction='row'
@@ -40,11 +44,15 @@ export default CSSModules(class extends Component {
                         full='horizontal'
                         colorIndex='light-1'
                         style={{
-                            marginTop: '150px',
-                            background: 'white'
+                            marginTop: '100px',
+                            background: 'white',
+                            Height: 'auto',
+                            minHeight: 'auto',
+                            maxHeight: 'none',
+                            overflow: 'none'
                         }}>
                         {this.props.children}
-                      </Box>
+                    </Box>
                       <Box direction='row'
                         justify='start'
                         align='center'
diff --git a/src/js/components/pages/dashboard/Base.jsx b/src/js/components/pages/dashboard/Base.jsx
index cd9a34c..57b8397 100644
--- a/src/js/components/pages/dashboard/Base.jsx
+++ b/src/js/components/pages/dashboard/Base.jsx
@@ -33,6 +33,7 @@ export default CSSModules(class extends Component {
         this.showSearchModal = this.showSearchModal.bind(this)
         this.handleOk = this.handleOk.bind(this)
         this.handleCancel = this.handleCancel.bind(this)
+        this.toggleFilter = this.toggleFilter.bind(this)
         this.state = {
             copyInternList: {},
             renderInternList: {},
@@ -45,7 +46,9 @@ export default CSSModules(class extends Component {
             isListEnd: false,
             catagoryVisible: false,
             SearchVisible: false,
-            targetCatagory: ''
+            targetCatagory: '',
+            filterBtnSelect: 'keyWordSearch',  // should be : 'keyWordSearch' or 'catagory'
+            ifMobile: false
         }
     }
     showCatagoryModal () {
@@ -70,6 +73,31 @@ export default CSSModules(class extends Component {
             SearchVisible: false
         })
     }
+    toggleFilter (action) {
+        if (this.state.ifMobile) {
+            switch (action) {
+                case 'keyWordSearch':
+                    console.log('!!!')
+                    this.setState({
+                        filterBtnSelect: '',
+                        SearchVisible: true
+                    })
+                    break
+                case 'catagory':
+                    this.setState({
+                        filterBtnSelect: '',
+                        catagoryVisible: true
+                    })
+                    break
+            }
+        } else {
+            this.setState({
+                filterBtnSelect: action,
+                SearchVisible: false,
+                catagoryVisible: false
+            })
+        }
+    }
     changeFilterInput (event) {
         console.log(event.target)
         this.setState({filterInput: event.target.value})
@@ -84,6 +112,8 @@ export default CSSModules(class extends Component {
         this.setState({currentIndex: 0})
         this.setState({isListEnd: false})
         this.setState({SearchVisible: false})
+        this.setState({targetCatagory: ''})
+        this.setState({filterBtnSelect: 'keyWordSearch'})
         let rowData = _.reverse(_.values(this.props.Intern.list))
         console.log('row', this.state.filterInput)
         let filterData = {}
@@ -146,6 +176,7 @@ export default CSSModules(class extends Component {
         this.setState({isWindowClose: !this.state.isWindowClose})
     }
     getMoreIntern () {
+        console.log('trigger load')
         if (this.state.isListEnd === true) {
             return
         }
@@ -179,6 +210,13 @@ export default CSSModules(class extends Component {
         .then(() => {
             return this.props.getInternList(0, 500)
         })
+        .then(() => {
+            if (window.innerWidth) {
+                if (window.innerWidth <= 768) {
+                    this.setState({ifMobile: true})
+                }
+            }
+        })
         .then(() => {
             return this.props.getAllFavorite()
         })
@@ -213,6 +251,62 @@ export default CSSModules(class extends Component {
         })
     }
     render () {
+        var filterTab = ''
+        var keyWordClass = 'searchBtn '
+        var catagoryClass = 'searchBtn '
+
+        switch (this.state.filterBtnSelect) {
+            case 'keyWordSearch':
+                if (!this.state.ifMobile) {
+                    keyWordClass += 'searchBtn-select'
+                }
+                filterTab = (
+                    <div title="關鍵字搜尋 text Search">
+                            <div className="loginContain"></div>
+                            <div style={{
+                                margin: '20px 0 0',
+                                display: 'flex',
+                                justifyContent: 'flex-end'
+                            }}>
+                                <input
+                                    type="text"
+                                    value={this.state.filterInput}
+                                    onChange={this.changeFilterInput}
+                                    onKeyPress={this.handleKeyPress}
+                                />
+                                <div className="searchBtn"
+                                    onClick={this.startFilter}>搜尋
+                                </div>
+                            </div>
+                        </div>)
+                break
+            case 'catagory':
+                if (!this.state.ifMobile) {
+                    catagoryClass += 'searchBtn-select'
+                }
+                filterTab = (
+                    <div title="類別搜尋 catagory">
+                            <div className="loginContain"></div>
+                            <div style={{
+                                margin: '20px 0 0',
+                                display: 'flex',
+                                justifyContent: 'flex-end'
+                            }}>
+                                <ul className="catagoryList">
+                                    {
+                                        catagoryList.map((el, id) =>
+                                            <li className={this.state.targetCatagory === el ? 'active' : null}
+                                                key={id}
+                                                onClick={() => { this.startCatagoryFilter(el) }}>
+                                                {el}
+                                            </li>
+                                        )
+                                    }
+                                </ul>
+                            </div>
+                          </div>)
+                break
+        }
         return (
             <div style={{
                 width: '100%',
@@ -234,7 +328,6 @@ export default CSSModules(class extends Component {
                         margin: '0',
                         width: '100%'
                     }}>
-
                     <Modal title="類別搜尋 catagory" visible={this.state.catagoryVisible}
                       onOk={this.handleOk} onCancel={this.handleCancel}
                       footer={[]}>
@@ -260,7 +353,11 @@ export default CSSModules(class extends Component {
                     </Modal>
                     <Modal title="關鍵字搜尋 text Search" visible={this.state.SearchVisible}
                       onOk={this.handleOk} onCancel={this.handleCancel}
-                      footer={[]}>
+                      footer={
+                          <div className="searchBtn searchBtn-select"
+                              onClick={this.startFilter}>搜尋
+                          </div>
+                      }>
                         <div className="loginContain">
                         </div>
                         <div style={{
@@ -273,10 +370,10 @@ export default CSSModules(class extends Component {
                             value={this.state.filterInput}
                             onChange={this.changeFilterInput}
                             onKeyPress={this.handleKeyPress}
+                            style ={{
+                                margin: '0 0 20px 0'
+                            }}
                         />
-                          <div className="searchBtn"
-                              onClick={this.startFilter}>搜尋
-                          </div>
                         </div>
                     </Modal>
                     <div
@@ -286,7 +383,7 @@ export default CSSModules(class extends Component {
                             height: '100%',
                             top: '0',
                             left: '0',
-                            opacity: '0.35',
+                            opacity: '0.2',
                             backgroundImage: 'url("http://i.imgur.com/LnL7Cgr.png")',
                             backgroundSize: 'cover',
                             backgroundPosition: 'center'
@@ -306,10 +403,14 @@ export default CSSModules(class extends Component {
                       tag='h4'
                       margin='none'
                       style={{
+                          fontSize: '24px',
+                          fontWeight: 'initial',
+                          letterSpacing: '0.2em',
+                          lineHeight: 'normal',
                           marginBottom: '10px',
                           zIndex: '1'
                       }}>
-                      全台灣最透明的實習經驗分享平台。
+                      最透明的實習經驗分享平台
                     </Heading>
                       <div className="submitNewPost--contain">
                           <a className="submitNewPost" target='_blank' href='https://goo.gl/forms/T4qXfrm2rhFC64cB2'>
@@ -319,7 +420,7 @@ export default CSSModules(class extends Component {
                           </a>
                         </div>
                     </Box>
-                    <div className="resultCounter">目前有 {_.size(this.state.copyInternList)} 筆搜尋</div>
+                    <div className="resultCounter">{this.state.targetCatagory ? <b>{this.state.targetCatagory}類別</b> : null }有 {_.size(this.state.copyInternList)} 筆搜尋</div>
                     <Box flex={true}
                       justify='center'
                       direction='row'
@@ -331,13 +432,26 @@ export default CSSModules(class extends Component {
                           width: '100%',
                           maxWidth: '1024px'
                       }}>
-                        <div className="searchBtn"
-                            onClick={this.showSearchModal}>關鍵字搜尋
+                        <div className= {keyWordClass}
+                            onClick={this.toggleFilter.bind(this, 'keyWordSearch')}>關鍵字搜尋
                         </div>
-                        <div className="searchBtn"
-                            onClick={this.showCatagoryModal}>類別搜尋
+                        <div className= {catagoryClass}
+                            onClick={this.toggleFilter.bind(this, 'catagory')}>類別搜尋
                         </div>
                     </Box>
+                    <Box flex={true}
+                      justify='center'
+                      direction='row'
+                      responsive={false}
+                      style={{
+                          margin: '0',
+                          padding: '0 15px',
+                          position: 'relative',
+                          width: '100%',
+                          maxWidth: '1024px'
+                      }}>
+                            {filterTab}
+                        </Box>
                 </Header>
                 <InfiniteScroll
                     pageStart={0}
@@ -356,7 +470,8 @@ export default CSSModules(class extends Component {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
-                            margin: '10vh 0'
+                            margin: '10vh 0',
+                            fontSize: '1.5em'
                         }}>搜尋無相關結果，試著換換關鍵字吧</div>
                         : _.map(this.state.renderInternList, (intern, id) =>
                             intern === undefined
diff --git a/src/js/components/pages/dashboard/Base.styl b/src/js/components/pages/dashboard/Base.styl
index 05a01ff..acee416 100644
--- a/src/js/components/pages/dashboard/Base.styl
+++ b/src/js/components/pages/dashboard/Base.styl
@@ -12,29 +12,42 @@ $brand_blue = darken(#58A0FC, 5%)
         z-index: 99
         padding: 0px
         cursor: pointer
-        button
-            color: #EEE !important
-            width: 250px
-            margin: 0 !important
-            padding: 10px !important
-            border-radius: 5px !important
-            border-color: $brand_blue !important
-            background: $brand_blue !important
+        color: #FFF
+    .submitNewPost:hover
+        text-decoration: none !important
+    button
+        color: #EEE !important
+        width: 250px
+        margin: 0 !important
+        padding: 10px !important
+        border-radius: 5px !important
+        border-color: $brand_blue !important
+        background: $brand_blue !important
+    button:hover
+        border-color: #00BFFF !important
+        background: #00BFFF !important
+        text-decoration: none !important
 
 .searchBtn
     min-width: 80px
     // background: $brand_blue_light !important
-    background: transparent !important
+    background: transparent
     border: 2px solid $brand_blue_light
-    color: $brand_blue_light !important
+    color: $brand_blue_light
     border-radius: 5px
     margin-left: 5px
-    color: white
     padding: 5px 15px
     display: flex
     align-items: center
     justify-content: center
     cursor: pointer
+    font-size: 1.2em
+
+.searchBtn-select
+    color: white
+    background: $brand_blue_light
+    border: 2px solid $brand_blue_light
+
 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: black !important;
 }
@@ -50,12 +63,12 @@ $brand_blue = darken(#58A0FC, 5%)
 
 .catagoryList
     margin: 0
-    padding: 10px 15px
+    /*padding: 10px 15px*/
     width: 100%
     display: flex
     flex-direction: row
     flex-wrap: wrap
-    height: 35vh
+    /*height: 35vh*/
     min-height: 100px
     overflow-y: scroll
     align-items: center
diff --git a/src/js/components/pages/dashboard/InternBox.styl b/src/js/components/pages/dashboard/InternBox.styl
index ad41a24..9b08d4f 100644
--- a/src/js/components/pages/dashboard/InternBox.styl
+++ b/src/js/components/pages/dashboard/InternBox.styl
@@ -11,6 +11,8 @@
             margin: 0 3px
         span
             margin-right: 10px
+    span
+        font-size: 1.15em
 
     .InternBox
         @media screen and (max-width: 768px)
@@ -30,6 +32,7 @@
             transition: all 0.25s ease
             box-shadow: 0px 1px 10px #999
         .internBoxLink
+            font-size: 1.2em
             color: #58A0FC !important
             text-decoration: none !important
         a
diff --git a/src/scss/index.scss b/src/scss/index.scss
index a7f1c0d..b0136ee 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1 +1,32 @@
 @import '~grommet/scss/hpinc/index';
+
+.grommet, .brand-font {
+    font-family: "source-han-sans-traditional", Arial, sans-serif;
+}
+
+.grommetux-heading--strong {
+    font-family: "source-han-serif-tc",serif;
+}
+
+h1.grommetux-heading{
+    font-weight: 800;
+}
+
+h2.grommetux-heading{
+    font-weight: 600;
+}
+
+
+h3.grommetux-heading--strong {
+    font-size: 26px;
+    font-weight: 700;
+}
+
+h4.grommetux-heading{
+    line-height: 1.7em;
+}
+
+h4.grommetux-heading--strong {
+    font-size: 22px;
+    font-weight: 700;
+}