diff --git a/package.json b/package.json
index 3464f7a..90b99cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anyproxy",
-  "version": "3.7.0Beta1",
+  "version": "3.7.0Beta2",
   "description": "A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.",
   "main": "proxy.js",
   "bin": {
diff --git a/web/build/filter.js b/web/build/filter.js
index 3f898f5..f4183f7 100644
--- a/web/build/filter.js
+++ b/web/build/filter.js
@@ -19,11 +19,20 @@ function init(React){
 			var self = this;
 
 			return (
-				React.createElement("div", {className: "filterSection"}, 
+				React.createElement("div", null, 
 					React.createElement("h4", {className: "subTitle"}, "Log Filter"), 
 
-					React.createElement("form", {className: "uk-form"}, 
-						React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "type keywords or /^regExp$/", width: "300"})
+					React.createElement("div", {className: "filterSection"}, 
+						React.createElement("form", {className: "uk-form"}, 
+							React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
+						)
+					), 
+					React.createElement("dl", {class: "uk-description-list-horizontal"}, 
+					    React.createElement("dt", null, "wrap your RegExp between two slashes"), 
+					    React.createElement("dd", null, 
+						    "e.g. ", React.createElement("br", null), 
+						    "type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
+					    )
 					)
 				)
 			);
diff --git a/web/build/index.js b/web/build/index.js
index a0da087..17e2866 100644
--- a/web/build/index.js
+++ b/web/build/index.js
@@ -186,7 +186,7 @@ var recorder;
 			pop.setState({
 				show    : true,
 				content : filter,
-				left:"70%"
+				left:"50%"
 			});
 		}
 
@@ -202,7 +202,7 @@ var recorder;
 			pop.setState({
 				show : true,
 				content : mapPanel,
-				left:"70%"
+				left:"40%"
 
 			})
 		}
diff --git a/web/build/mapForm.js b/web/build/mapForm.js
index 02f21c0..cea093e 100644
--- a/web/build/mapForm.js
+++ b/web/build/mapForm.js
@@ -54,29 +54,30 @@ function init(React){
 			var self = this;
 			return (
 				React.createElement("div", null, 
-					React.createElement("form", {className: "uk-form uk-form-stacked"}, 
+					React.createElement("form", {className: "uk-form uk-form-stacked mapAddNewForm"}, 
 					    React.createElement("fieldset", null, 
-					        React.createElement("legend", null, "add rule"), 
-
 					        React.createElement("div", {className: "uk-form-row"}, 
 				                React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"), 
 				                React.createElement("div", {className: "uk-form-controls"}, 
-				                    React.createElement("input", {type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
+				                    React.createElement("input", {className: "mapConfigInputs", type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
 				                )
 				            ), 
 
 					        React.createElement("div", {className: "uk-form-row"}, 
 				                React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"), 
 				                React.createElement("div", {className: "uk-form-controls"}, 
-				                    React.createElement("input", {type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "keyword"})
-				                )
-				            )
+				                    React.createElement("input", {className: "mapConfigInputs pathInput", type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "local file path"})
+				                ), 
+		            	        React.createElement("div", {ref: "treeWrapper", className: "treeWrapper"})
+				            ), 
+
+	            	        React.createElement("div", {className: "uk-form-row"}, 
+		            	        React.createElement("button", {type: "button", className: "uk-button", onClick: self.submitData}, "Add")
+	                        )
 
 					    )
-					), 
+					)
 
-					React.createElement("div", {ref: "treeWrapper"}), 
-					React.createElement("button", {className: "uk-button", onClick: self.submitData}, "Add")
 				)
 			);
 		},
diff --git a/web/build/mapPanel.js b/web/build/mapPanel.js
index 7b97f5d..00b82af 100644
--- a/web/build/mapPanel.js
+++ b/web/build/mapPanel.js
@@ -19,7 +19,7 @@ function init(React){
 					React.createElement("h4", {className: "subTitle"}, "Current Config"), 
 					React.createElement(MapList, {ref: "list"}), 
 					
-					React.createElement("h4", {className: "subTitle"}, "Map Local"), 
+					React.createElement("h4", {className: "subTitle"}, "Add Map Rule"), 
 					React.createElement(MapForm, {onSubmit: self.appendRecord})
 				)
 			);
diff --git a/web/css/page.css b/web/css/page.css
index fddd734..1509a60 100644
--- a/web/css/page.css
+++ b/web/css/page.css
@@ -287,21 +287,22 @@ body, html {
     z-index:999
 }
 
+/*filter*/
 
-
-.filterSection .filterIcon{
-	font-size: 16px;
+.filterSection{
+	margin: 50px auto 0;
 }
 
 .filterSection form{
-	display: inline-block;
-	margin-right: 5px;
+	text-align: center;
 }
 
 .filterSection input{
 	width: 250px;
 }
 
+/*filter end*/
+
 
 /*map panel*/
 
@@ -328,5 +329,27 @@ body, html {
 	margin-left: 5px;
 }
 
+.mapWrapper .mapConfigInputs{
+	width: 400px;
+}
+
+.mapWrapper .mapConfigInputs.pathInput{
+	border-radius: 4px 4px 0 0 ;
+}
+
+.mapWrapper .treeWrapper{
+	width: 398px;
+	height: 350px;
+	overflow: scroll;
+	border: 1px solid #ddd;
+	border-top: none;
+}
+
+.mapWrapper .mapAddNewForm{
+	margin-left: 10px;
+}
+
+
+
 /*map panel end*/
 
diff --git a/web/page.js b/web/page.js
index b191f58..2c2e7d5 100644
--- a/web/page.js
+++ b/web/page.js
@@ -232,7 +232,7 @@
 				pop.setState({
 					show    : true,
 					content : filter,
-					left:"70%"
+					left:"50%"
 				});
 			}
 
@@ -248,7 +248,7 @@
 				pop.setState({
 					show : true,
 					content : mapPanel,
-					left:"70%"
+					left:"40%"
 
 				})
 			}
@@ -20182,7 +20182,7 @@
 						React.createElement("h4", {className: "subTitle"}, "Current Config"), 
 						React.createElement(MapList, {ref: "list"}), 
 						
-						React.createElement("h4", {className: "subTitle"}, "Map Local"), 
+						React.createElement("h4", {className: "subTitle"}, "Add Map Rule"), 
 						React.createElement(MapForm, {onSubmit: self.appendRecord})
 					)
 				);
@@ -20395,11 +20395,20 @@
 				var self = this;
 
 				return (
-					React.createElement("div", {className: "filterSection"}, 
+					React.createElement("div", null, 
 						React.createElement("h4", {className: "subTitle"}, "Log Filter"), 
 
-						React.createElement("form", {className: "uk-form"}, 
-							React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "type keywords or /^regExp$/", width: "300"})
+						React.createElement("div", {className: "filterSection"}, 
+							React.createElement("form", {className: "uk-form"}, 
+								React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
+							)
+						), 
+						React.createElement("dl", {class: "uk-description-list-horizontal"}, 
+						    React.createElement("dt", null, "wrap your RegExp between two slashes"), 
+						    React.createElement("dd", null, 
+							    "e.g. ", React.createElement("br", null), 
+							    "type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
+						    )
 						)
 					)
 				);
@@ -27959,29 +27968,30 @@
 				var self = this;
 				return (
 					React.createElement("div", null, 
-						React.createElement("form", {className: "uk-form uk-form-stacked"}, 
+						React.createElement("form", {className: "uk-form uk-form-stacked mapAddNewForm"}, 
 						    React.createElement("fieldset", null, 
-						        React.createElement("legend", null, "add rule"), 
-
 						        React.createElement("div", {className: "uk-form-row"}, 
 					                React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"), 
 					                React.createElement("div", {className: "uk-form-controls"}, 
-					                    React.createElement("input", {type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
+					                    React.createElement("input", {className: "mapConfigInputs", type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
 					                )
 					            ), 
 
 						        React.createElement("div", {className: "uk-form-row"}, 
 					                React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"), 
 					                React.createElement("div", {className: "uk-form-controls"}, 
-					                    React.createElement("input", {type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "keyword"})
-					                )
-					            )
+					                    React.createElement("input", {className: "mapConfigInputs pathInput", type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "local file path"})
+					                ), 
+			            	        React.createElement("div", {ref: "treeWrapper", className: "treeWrapper"})
+					            ), 
+
+		            	        React.createElement("div", {className: "uk-form-row"}, 
+			            	        React.createElement("button", {type: "button", className: "uk-button", onClick: self.submitData}, "Add")
+		                        )
 
 						    )
-						), 
+						)
 
-						React.createElement("div", {ref: "treeWrapper"}), 
-						React.createElement("button", {className: "uk-button", onClick: self.submitData}, "Add")
 					)
 				);
 			},
diff --git a/web/src/filter.js b/web/src/filter.js
index 00e2f99..4930d8b 100644
--- a/web/src/filter.js
+++ b/web/src/filter.js
@@ -19,12 +19,21 @@ function init(React){
 			var self = this;
 
 			return (
-				<div className="filterSection">
+				<div>
 					<h4 className="subTitle">Log Filter</h4>
 
-					<form className="uk-form">
-						<input className="uk-form-large" ref="keywordInput" onChange={self.dealChange} type="text" placeholder="type keywords or /^regExp$/" width="300"/>
-					</form>
+					<div className="filterSection">
+						<form className="uk-form">
+							<input className="uk-form-large" ref="keywordInput" onChange={self.dealChange} type="text" placeholder="keywords or /^regExp$/" width="300"/>
+						</form>
+					</div>
+					<dl class="uk-description-list-horizontal">
+					    <dt>wrap your RegExp between two slashes</dt>
+					    <dd>
+						    e.g. <br />
+						    type <strong>/id=\d{3}/</strong> will give you all the logs containing <strong>id=123</strong>
+					    </dd>
+					</dl>
 				</div>
 			);
 		},
diff --git a/web/src/index.js b/web/src/index.js
index 0fc420c..5b94387 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -186,7 +186,7 @@ var recorder;
 			pop.setState({
 				show    : true,
 				content : filter,
-				left:"70%"
+				left:"50%"
 			});
 		}
 
@@ -202,7 +202,7 @@ var recorder;
 			pop.setState({
 				show : true,
 				content : mapPanel,
-				left:"70%"
+				left:"40%"
 
 			})
 		}
diff --git a/web/src/mapForm.js b/web/src/mapForm.js
index e2e3910..d6f10df 100644
--- a/web/src/mapForm.js
+++ b/web/src/mapForm.js
@@ -54,29 +54,30 @@ function init(React){
 			var self = this;
 			return (
 				<div>
-					<form className="uk-form uk-form-stacked">
+					<form className="uk-form uk-form-stacked mapAddNewForm">
 					    <fieldset>
-					        <legend>add rule</legend>
-
 					        <div className="uk-form-row">
 				                <label className="uk-form-label" htmlFor="map_keywordInput">keyword</label>
 				                <div className="uk-form-controls">
-				                    <input type="text" id="map_keywordInput" ref="keywordInput" placeholder="keyword" />
+				                    <input className="mapConfigInputs" type="text" id="map_keywordInput" ref="keywordInput" placeholder="keyword" />
 				                </div>
 				            </div>
 
 					        <div className="uk-form-row">
 				                <label className="uk-form-label" htmlFor="map_localFilePath">local file</label>
 				                <div className="uk-form-controls">
-				                    <input type="text" id="map_localFilePath" ref="localFilePath" placeholder="keyword" />
+				                    <input className="mapConfigInputs pathInput" type="text" id="map_localFilePath" ref="localFilePath" placeholder="local file path" />
 				                </div>
+		            	        <div ref="treeWrapper" className="treeWrapper"></div>
 				            </div>
 
+	            	        <div className="uk-form-row">
+		            	        <button type="button" className="uk-button" onClick={self.submitData}>Add</button>
+	                        </div>
+
 					    </fieldset>
 					</form>
 
-					<div ref="treeWrapper"></div>
-					<button className="uk-button" onClick={self.submitData}>Add</button>
 				</div>
 			);
 		},
diff --git a/web/src/mapPanel.js b/web/src/mapPanel.js
index 8192981..d367511 100644
--- a/web/src/mapPanel.js
+++ b/web/src/mapPanel.js
@@ -19,7 +19,7 @@ function init(React){
 					<h4 className="subTitle">Current Config</h4>
 					<MapList ref="list"/>
 					
-					<h4 className="subTitle">Map Local</h4>
+					<h4 className="subTitle">Add Map Rule</h4>
 					<MapForm onSubmit={self.appendRecord}/>
 				</div>
 			);