diff --git a/README.md b/README.md
index 7434550..b873709 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@
 - 基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发
 - 基于Antd UI 设计语言，提供后台管理系统常见使用场景
 - 基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由，按需加载
+- 浅度响应式设计
 
 ## To do list
 - [x] 登录页面
@@ -20,6 +21,7 @@
   - [ ] 交互动效
 - [x] 扩展UI组件
  - [x] Ico
+ - [x] Search
 - [ ] 可视化图表
 
 ## 开发及构建
diff --git a/src/components/ui/index.js b/src/components/ui/index.js
index 09e29fd..aeda1d2 100644
--- a/src/components/ui/index.js
+++ b/src/components/ui/index.js
@@ -1,3 +1,4 @@
 import Ico from './ico.js'
+import Search from './search.js'
 
-export {Ico}
+export { Ico, Search }
diff --git a/src/components/ui/search.js b/src/components/ui/search.js
index e89db88..f2cdddf 100644
--- a/src/components/ui/search.js
+++ b/src/components/ui/search.js
@@ -6,7 +6,7 @@ import { Input, Select, Button, Icon } from 'antd'
 class Search extends React.Component {
   state = {
     clearVisible: false,
-    selectValue: this.props.selectProps.defaultValue || ''
+    selectValue: (this.props.select && this.props.selectProps) ? this.props.selectProps.defaultValue : ''
   }
   handleSearch = () => {
     const data = {
@@ -15,7 +15,7 @@ class Search extends React.Component {
     if (this.props.select) {
       data.field = this.state.selectValue
     }
-    this.props.onSearch(data)
+    this.props.onSearch && this.props.onSearch(data)
   }
   handleInputChange = e => {
     this.setState({
@@ -37,12 +37,12 @@ class Search extends React.Component {
     this.handleSearch()
   }
   render () {
-    const {size, select, selectOptions, selectProps} = this.props
+    const {size, select, selectOptions, selectProps, style} = this.props
     const {clearVisible} = this.state
     return (
-      <Input.Group compact size={size} className={styles.search} >
+      <Input.Group compact size={size} className={styles.search} style={style}>
         {select && <Select ref='searchSelect' onChange={this.handeleSelectChange} size={size} {...selectProps}>
-          {selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
+          {selectOptions && selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
         </Select>}
         <Input ref='searchInput' size={size} onChange={this.handleInputChange} />
         <Button size={size} type='primary' onClick={this.handleSearch}>搜索</Button>
diff --git a/src/router.js b/src/router.js
index 4f5a6ae..8c7b6e9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -40,6 +40,14 @@ export default function ({history, app}) {
               cb(null, require('./routes/ui/ico'))
             })
           }
+        }, {
+          path: 'ui/search',
+          name: 'ui/search',
+          getComponent (nextState, cb) {
+            require.ensure([], require => {
+              cb(null, require('./routes/ui/search'))
+            })
+          }
         }, {
           path: '*',
           name: 'error',
diff --git a/src/routes/ui/ico.js b/src/routes/ui/ico.js
index 4d6eaa0..8e685b8 100644
--- a/src/routes/ui/ico.js
+++ b/src/routes/ui/ico.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Ico } from '../../components/ui'
-import { Table } from 'antd'
+import { Table, Row, Col } from 'antd'
 import styles from './ico.less'
 
 const iconlist = ['Cherry', 'Cheese', 'Bread', 'Beer', 'Beet', 'Bacon', 'Banana', 'Asparagus', 'Apple']
@@ -10,34 +10,38 @@ const IcoPage = () => <div className='content-inner'>
     {iconlist.map(item => <li key={item}><Ico className={styles.icon} type={item} /><span className={styles.name}>{item}</span></li>)}
   </ul>
   <h2 style={{margin: '16px 0'}}>Props</h2>
-  <Table rowKey={(record, key) => key}
-    pagination={false}
-    bordered
-    columns={[
-      {
-        title: '参数',
-        dataIndex: 'props'
-      },
-      {
-        title: '说明',
-        dataIndex: 'desciption'
-      },
-      {
-        title: '类型',
-        dataIndex: 'type'
-      },
-      {
-        title: '默认值',
-        dataIndex: 'default'
-      }
-    ]}
-    dataSource={[
-      {
-        props: 'type',
-        desciption: '图标类型',
-        type: 'string',
-        default: '-'
-      }]} />
+  <Row>
+    <Col lg={18} md={24}>
+      <Table rowKey={(record, key) => key}
+        pagination={false}
+        bordered
+        columns={[
+          {
+            title: '参数',
+            dataIndex: 'props'
+          },
+          {
+            title: '说明',
+            dataIndex: 'desciption'
+          },
+          {
+            title: '类型',
+            dataIndex: 'type'
+          },
+          {
+            title: '默认值',
+            dataIndex: 'default'
+          }
+        ]}
+        dataSource={[
+          {
+            props: 'type',
+            desciption: '图标类型',
+            type: 'String',
+            default: '-'
+          }]} />
+    </Col>
+  </Row>
 </div>
 
 export default IcoPage
diff --git a/src/routes/ui/search.js b/src/routes/ui/search.js
new file mode 100644
index 0000000..55617f9
--- /dev/null
+++ b/src/routes/ui/search.js
@@ -0,0 +1,89 @@
+import React from 'react'
+import { Search } from '../../components/ui'
+import { Table, Row, Col, Card } from 'antd'
+
+const SearchPage = () => <div className='content-inner'>
+  <Row gutter={32}>
+    <Col lg={8} md={12}>
+      <Card title='默认'>
+        <Search />
+      </Card>
+    </Col>
+    <Col lg={8} md={12}>
+      <Card title='附带选择'>
+        <Search {...{
+          select: true,
+          selectOptions: [{ value: 'components', name: '组件' }, { value: 'page', name: '页面' }],
+          selectProps: {
+            defaultValue: 'components'
+          }
+        }} />
+      </Card>
+    </Col>
+    <Col lg={8} md={12}>
+      <Card title='大小'>
+        <Search size='large' style={{marginBottom: 16}} />
+        <Search size='small' />
+      </Card>
+    </Col>
+  </Row>
+  <h2 style={{margin: '16px 0'}}>Props</h2>
+  <Row>
+    <Col lg={18} md={24}>
+      <Table rowKey={(record, key) => key}
+        pagination={false}
+        bordered
+        columns={[
+          {
+            title: '参数',
+            dataIndex: 'props'
+          },
+          {
+            title: '说明',
+            dataIndex: 'desciption'
+          },
+          {
+            title: '类型',
+            dataIndex: 'type'
+          },
+          {
+            title: '默认值',
+            dataIndex: 'default'
+          }
+        ]}
+        dataSource={[
+          {
+            props: 'size',
+            desciption: '设置Search大小，可选值为 【small】 【large】 或者不设',
+            type: 'String',
+            default: '-'
+          },
+          {
+            props: 'select',
+            desciption: '设置是否有选择器',
+            type: 'Boolean',
+            default: 'false'
+          },
+          {
+            props: 'selectOptions',
+            desciption: '选择器的选项，格式为[{name:"",value:""}]或者[{value:""}]',
+            type: 'Array',
+            default: '-'
+          },
+          {
+            props: 'selectProps',
+            desciption: '选择器的属性，可参考antd的【Select】组件',
+            type: 'Object',
+            default: '-'
+          },
+          {
+            props: 'onSearch',
+            desciption: '点击搜索按钮或者点击清除时的回调',
+            type: 'Function({keyword:string,field:string})',
+            default: '-'
+          }]} />
+    </Col>
+  </Row>
+</div>
+
+export default SearchPage
diff --git a/src/routes/ui/search.less b/src/routes/ui/search.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/theme.js b/src/theme.js
index 29b28bf..82ec455 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -7,7 +7,7 @@ module.exports = () => {
     '@border-color-split': '#f4f4f4',
     '@border-color-base': '#e5e5e5',
     '@menu-dark-bg': '#3e3e3e',
-    '@text-color':'#666',
+    '@text-color': '#666',
     '@font-family': 'monospace,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif'
   }
 }
diff --git a/src/utils/menu.js b/src/utils/menu.js
index 28b5787..c00ed96 100644
--- a/src/utils/menu.js
+++ b/src/utils/menu.js
@@ -17,7 +17,11 @@ module.exports = [
     child: [
       {
         key: 'ico',
-        name: '业务图标'
+        name: 'Ico 图标'
+      },
+      {
+        key: 'search',
+        name: 'Search 搜索'
       }
     ]
   },