diff --git a/public/static/css/color.css b/public/static/css/color.css
index 9f1022e..bf595b1 100644
--- a/public/static/css/color.css
+++ b/public/static/css/color.css
@@ -78,6 +78,14 @@
     color: #7f8c8d;
 }
 
+.grey2-font {
+    color: #ecf0f6;
+}
+
+.grey3-font {
+    color: #697384;
+}
+
 .black-font {
     color: #000;
 }
@@ -178,6 +186,13 @@
 .grey1-bg {
     background-color: #7f8c8d;
 }
+.grey2-bg {
+    background-color: #ecf0f6;
+}
+
+.grey3-bg {
+    color: #697384;
+}
 
 .black-bg {
     background-color: #000;
diff --git a/public/static/css/style.css b/public/static/css/style.css
index ea538d6..129f395 100644
--- a/public/static/css/style.css
+++ b/public/static/css/style.css
@@ -1,3 +1,7 @@
+body button {
+  font-size: 1.2rem;
+}
+
 #bg {
   position: fixed;
   top: 0;
@@ -669,4 +673,46 @@ div.hr {
 
 .user {
   font-weight: bold;
+}
+
+.title-m {
+  font-size: 1.4rem;
+  /* font-weight: bold; */
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.desc-m {
+  font-size: 1.2rem;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.title-l {
+  font-size: 1.8rem;
+  font-weight: bold;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.desc-l {
+  font-size: 1.2rem;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
 }
\ No newline at end of file
diff --git a/src/client/web/package.json b/src/client/web/package.json
index f166c79..1639ca1 100644
--- a/src/client/web/package.json
+++ b/src/client/web/package.json
@@ -49,6 +49,7 @@
     "worker-loader": "^3.0.7"
   },
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "@types/axios": "^0.14.0",
     "@types/immutable": "^3.8.7",
     "@types/react": "^16.8.13",
diff --git a/src/client/web/src/components/browser.tsx b/src/client/web/src/components/browser.tsx
index 2266460..d54eca4 100644
--- a/src/client/web/src/components/browser.tsx
+++ b/src/client/web/src/components/browser.tsx
@@ -2,6 +2,9 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { List, Map } from "immutable";
 import FileSize from "filesize";
+import { RiFolder2Fill } from "@react-icons/all-files/ri/RiFolder2Fill";
+import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill";
+import { RiFile2Fill } from "@react-icons/all-files/ri/RiFile2Fill";
 
 import { alertMsg, comfirmMsg } from "../common/env";
 import { updater } from "./state_updater";
@@ -404,65 +407,91 @@ export class Browser extends React.Component<Props, State, {}> {
         : `${dirPath}/${item.name}`;
 
       return item.isDir ? (
-        <div key={item.name} className="flex-list-container">
-          <span className="flex-list-item-l">
-            <span className="vbar yellow2-bg"></span>
-            <span className={nameCellClass}>
-              <span className="bold" onClick={() => this.gotoChild(item.name)}>
-                {item.name}
-              </span>
-              <div className="grey1-font">
-                <span>{item.modTime.slice(0, item.modTime.indexOf("T"))}</span>
-              </div>
-            </span>
-          </span>
-          <span className="flex-list-item-r padding-r-m">
-            <span className="item-op">
+        <Flexbox
+          key={item.name}
+          children={List([
+            <span className="padding-m">
+              <Flexbox
+                children={List([
+                  <RiFolder2Fill size="3rem" className="yellow0-font margin-r-m" />,
+
+                  <span className="">
+                    <span className={nameCellClass}>
+                      <span
+                        className="title-m"
+                        onClick={() => this.gotoChild(item.name)}
+                      >
+                        {item.name}
+                      </span>
+                      <div className="desc-m grey0-font">
+                        <span>
+                          {item.modTime.slice(0, item.modTime.indexOf("T"))}
+                        </span>
+                      </div>
+                    </span>
+                  </span>,
+                ])}
+              />
+            </span>,
+
+            <span className="padding-m">
               <button
                 onClick={() => this.select(item.name)}
-                className={`white-font ${isSelected ? "blue0-bg" : "grey1-bg"}`}
+                className={`${isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"}`}
                 style={{ width: "8rem", display: "inline-block" }}
               >
                 {isSelected
                   ? this.props.msg.pkg.get("browser.deselect")
                   : this.props.msg.pkg.get("browser.select")}
               </button>
-            </span>
-          </span>
-        </div>
+            </span>,
+          ])}
+          childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+        />
       ) : (
-        <div key={item.name} className="flex-list-container">
-          <span className="flex-list-item-l">
-            <span className="vbar green2-bg"></span>
-            <span className={nameCellClass}>
-              <a
-                className="bold"
-                href={`/v1/fs/files?fp=${itemPath}`}
-                target="_blank"
-              >
-                {item.name}
-              </a>
-              <div className="grey1-font">
-                <span>{FileSize(item.size, { round: 0 })}</span>&nbsp;/&nbsp;
-                <span>{item.modTime.slice(0, item.modTime.indexOf("T"))}</span>
-              </div>
-            </span>
-          </span>
-          <span className="flex-list-item-r padding-r-m">
-            <span className="item-op">
+        <Flexbox
+          key={item.name}
+          children={List([
+            <span className="padding-m">
+              <Flexbox
+                children={List([
+                  <RiFile2Fill size="3rem" className="cyan0-font margin-r-m" />,
+
+                  <span className={`${nameCellClass}`}>
+                    <a
+                      className="title-m"
+                      href={`/v1/fs/files?fp=${itemPath}`}
+                      target="_blank"
+                    >
+                      {item.name}
+                    </a>
+                    <div className="desc-m grey0-font">
+                      <span>
+                        {item.modTime.slice(0, item.modTime.indexOf("T"))}
+                      </span>
+                      &nbsp;/&nbsp;
+                      <span>{FileSize(item.size, { round: 0 })}</span>
+                    </div>
+                  </span>,
+                ])}
+              />
+            </span>,
+
+            <span className="item-op padding-m">
               <button
                 type="button"
                 onClick={() => this.select(item.name)}
-                className={`white-font ${isSelected ? "blue0-bg" : "grey1-bg"}`}
+                className={`${isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"}`}
                 style={{ width: "8rem", display: "inline-block" }}
               >
                 {isSelected
                   ? this.props.msg.pkg.get("browser.deselect")
                   : this.props.msg.pkg.get("browser.select")}
               </button>
-            </span>
-          </span>
-        </div>
+            </span>,
+          ])}
+          childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+        />
       );
     });
 
@@ -565,6 +594,7 @@ export class Browser extends React.Component<Props, State, {}> {
                       {this.props.msg.pkg.get("browser.upload.title")}
                     </span>
                   </span>,
+
                   <span></span>,
                 ])}
               />
@@ -575,33 +605,59 @@ export class Browser extends React.Component<Props, State, {}> {
 
           {this.props.browser.sharings.size === 0 ? null : (
             <div className="container">
-              <div className="flex-list-container bold">
-                <span className="flex-list-item-l">
-                  <span className="dot black-bg"></span>
-                  <span>{this.props.msg.pkg.get("browser.share.title")}</span>
-                </span>
-                <span className="flex-list-item-r padding-r-m"></span>
-              </div>
+              <Flexbox
+                children={List([
+                  <span>
+                    <span className="dot black-bg"></span>
+                    <span className="bold">
+                      {this.props.msg.pkg.get("browser.share.title")}
+                    </span>
+                  </span>,
+
+                  <span></span>,
+                ])}
+              />
+
               {sharingList}
             </div>
           )}
 
           <div className="container">
-            <div className="flex-list-container bold">
-              <span className="flex-list-item-l">
-                <span className="dot black-bg"></span>
-                <span>{this.props.msg.pkg.get("browser.item.title")}</span>
-              </span>
-              <span className="flex-list-item-r padding-r-m">
-                <button
-                  onClick={() => this.selectAll()}
-                  className={`grey1-bg white-font`}
-                  style={{ width: "8rem", display: "inline-block" }}
-                >
-                  {this.props.msg.pkg.get("browser.selectAll")}
-                </button>
-              </span>
-            </div>
+            <Flexbox
+              children={List([
+                <span className="padding-m">
+                  <Flexbox
+                    children={List([
+                      <RiFileList2Fill
+                        size="4rem"
+                        className="margin-r-m black-font"
+                      />,
+
+                      <span>
+                        <span className="title-l">
+                          {this.props.msg.pkg.get("browser.item.title")}
+                        </span>
+                        <span className="desc-l grey0-font">
+                          Files and folders in current path
+                        </span>
+                      </span>,
+                    ])}
+                  />
+                </span>,
+
+                <span className="padding-m">
+                  <button
+                    onClick={() => this.selectAll()}
+                    className={`grey1-bg white-font`}
+                    style={{ width: "8rem", display: "inline-block" }}
+                  >
+                    {this.props.msg.pkg.get("browser.selectAll")}
+                  </button>
+                </span>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+
             {itemList}
           </div>
         </div>
diff --git a/src/client/web/src/components/layout/flexbox.tsx b/src/client/web/src/components/layout/flexbox.tsx
index 709f693..959efce 100644
--- a/src/client/web/src/components/layout/flexbox.tsx
+++ b/src/client/web/src/components/layout/flexbox.tsx
@@ -10,17 +10,16 @@ export interface Props {
 
 const containerStyle = {
   display: "flex",
-  "flex-direction": "row",
-  "flex-wrap": "nowrap",
-  "align-items": "center",
-  "justify-content": "flex-start",
+  flex: "row nowrap",
+  alignItems: "center",
+  justifyContent: "flex-start",
 };
 
 const childrenStyle = {
   flex: "50%",
   display: "flex",
-  "align-items": "flex-start",
-  "justify-content": "flex-start",
+  alignItems: "flex-start",
+  justifyContent: "flex-start",
 };
 
 export const Flexbox = (props: Props) => {
diff --git a/yarn.lock b/yarn.lock
index 889c565..faa62cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1165,6 +1165,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.17.tgz#25fdbdfd282c2f86ddf3fcefbd98be99cd2627e2"
   integrity sha512-0p1rCgM3LLbAdwBnc7gqgnvjHg9KpbhcSphergHShlkWz8EdPawoMJ3/VbezI0mGC5eKCDzMaPgF9Yca6cKvrg==
 
+"@react-icons/all-files@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@react-icons/all-files/-/all-files-4.1.0.tgz#477284873a0821928224b6fc84c62d2534d6650b"
+  integrity sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"