diff --git a/public/index.html b/public/index.html
index 8d35520..3273a61 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="zh">
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, shrink-to-fit=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <title>P大树洞（非官方）</title>
 </head>
 <body>
diff --git a/src/Flows.css b/src/Flows.css
index f58bed7..d3ecabc 100644
--- a/src/Flows.css
+++ b/src/Flows.css
@@ -1,18 +1,56 @@
 .box {
-    background-color: #fff;
+    background-color: hsl(0,0%,95%);
     border-radius: 5px;
     margin: 1em 0;
     padding: .5em;
-    box-shadow: 0 5px 20px rgba(0,0,0,.4);
+    box-shadow: 0 5px 20px rgba(0,0,0,.5);
 }
 
-.flow-item {
-    flex: 0 0 600px;
+.left-container .flow-item {
+    display: inline-block;
+    width: 600px;
+    float: left;
 }
+
+.flow-reply-row {
+    display: inline-flex;
+    align-items: flex-start;
+    width: calc(100% - 625px);
+    margin-left: -25px;
+    padding-left: 20px;
+    overflow-x: hidden;
+}
+.flow-reply-row:empty {
+    margin: 0 !important;
+}
+
+.flow-item-row::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+@media screen and (max-width: 900px) {
+    .left-container .flow-item {
+        display: block;
+        width: calc(100vw - 20px);
+        max-width: 600px;
+        float: none;
+    }
+
+    .flow-reply-row {
+        display: flex;
+        width: calc(100% - 10px) !important;
+        margin-left: 10px;
+        padding-left: 20px;
+        margin-top: -2.5em;
+    }
+}
+
 .left-container .flow-reply {
     flex: 0 0 300px;
     max-height: 15em;
-    margin-left: -5px;
+    margin-right: -5px;
     overflow-y: hidden;
 }
 
@@ -32,6 +70,10 @@
     .aux-margin {
         width: calc(100% - 2 * 10px);
     }
+
+    .flow-reply-row {
+        width: calc(100% - 585px);
+    }
 }
 
 .left-container .flow-item-row {
@@ -42,22 +84,10 @@
     margin-left: -10px;
 }
 
-.left-container .flow-item-row {
-    display: flex;
-    overflow-x: hidden;
-    align-items: flex-start;
-}
-
 .flow-item-row img {
     max-width: 100%;
 }
 
-.flow-item-row pre {
-    white-space: pre-wrap;
-    font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
-    word-wrap: break-word;
-}
-
 .box-header-badge {
     float: right;
     margin: 0 .5em;
diff --git a/src/Flows.js b/src/Flows.js
index deff205..d656abb 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -14,9 +14,9 @@ const CLICKABLE_TAGS={a: true, audio: true};
 
 function Reply(props) {
     return (
-        <div className={'flow-reply box'} style={{
+        <div className={'flow-reply box'} style={props.info._display_color ? {
             backgroundColor: props.info._display_color,
-        }}>
+        } : null}>
             <div className="box-header">
                 <span className="box-id">#{props.info.cid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
@@ -39,7 +39,7 @@ function FlowItem(props) {
         <div className="flow-item box">
             <div className="box-header">
                 {!!parseInt(props.info.likenum, 10) && <span className="box-header-badge">{props.info.likenum}★</span>}
-                {!!parseInt(props.info.reply, 10) && <span className="box-header-badge">{props.info.reply} 回复</span>}
+                {!!parseInt(props.info.reply, 10) && <span className="box-header-badge">{props.info.reply}回复</span>}
                 <span className="box-id">#{props.info.pid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
@@ -79,7 +79,7 @@ class FlowItemRow extends Component {
                     throw new Error(json.code);
                 this.setState({
                     replies: json.data.map((info)=>{
-                        info._display_color=info.islz ? '#fff' : this.color_picker.get(info.name)
+                        info._display_color=info.islz ? null : this.color_picker.get(info.name)
                         return info;
                     }),
                     reply_loading: false,
@@ -101,8 +101,10 @@ class FlowItemRow extends Component {
                     );
             }}>
                 <FlowItem info={this.info} />
-                {!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
-                {this.state.replies.slice(0,10).map((reply)=><Reply info={reply} key={reply.cid} />)}
+                <div className="flow-reply-row">
+                    {!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
+                    {this.state.replies.slice(0,10).map((reply)=><Reply info={reply} key={reply.cid} />)}
+                </div>
             </div>
         );
     }
diff --git a/src/Sidebar.css b/src/Sidebar.css
index e57fd08..47bacd0 100644
--- a/src/Sidebar.css
+++ b/src/Sidebar.css
@@ -39,11 +39,18 @@
         left: calc(100% - 550px);
     }
 }
+@media screen and (max-width: 600px) {
+    .sidebar {
+        width: calc(100% - 50px);
+    }
+    .sidebar-on .sidebar {
+        left: 50px;
+    }
+}
 
 .sidebar-flow-item {
     display: block;
 }
 .sidebar-flow-item .box {
-    margin: 1em;
-    width: calc(100% - 2em);
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/Title.js b/src/Title.js
index b154f5a..7d678f6 100644
--- a/src/Title.js
+++ b/src/Title.js
@@ -65,7 +65,7 @@ class ControlBar extends Component {
 
     on_keypress(event) {
         if(event.key==='Enter')
-            this.set_search_text(this.state.search_text);
+            this.set_search_text(this.state.search_text||null);
     }
 
     do_refresh() {
@@ -90,7 +90,6 @@ class ControlBar extends Component {
                     '关于 P大树洞（非官方） 网页版',
                     HELP_TEXT
                 )}}>Help</a>
-                <a href="https://github.com/xmcp/ashole" target="_blank">GitHub</a>
             </div>
         )
     }
diff --git a/src/color_picker.js b/src/color_picker.js
index 6608a51..2c53b20 100644
--- a/src/color_picker.js
+++ b/src/color_picker.js
@@ -12,7 +12,7 @@ export class ColorPicker {
         if(!this.names[name]) {
             this.current_h+=golden_ratio_conjugate;
             this.current_h%=1;
-            this.names[name]=`hsl(${this.current_h*360}, 40%, 80%)`;
+            this.names[name]=`hsl(${this.current_h*360}, 40%, 85%)`;
         }
         return this.names[name];
     }
diff --git a/src/index.css b/src/index.css
index d4a0670..ccf653a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,9 @@
 body {
-    min-width: 620px;
     margin: 0;
     padding: 0;
     font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
     background-size: cover;
+    overflow-x: hidden;
 }
 
 body::-webkit-scrollbar {
@@ -12,6 +12,8 @@ body::-webkit-scrollbar {
 
 * {
     box-sizing: border-box;
+    word-wrap: break-word;
+    -webkit-overflow-scrolling: touch;
 }
 
 p {
@@ -33,4 +35,9 @@ input {
 
 audio {
     vertical-align: middle;
+}
+
+pre {
+    white-space: pre-wrap;
+    font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
 }
\ No newline at end of file
