diff --git a/public/static/css/default.css b/public/static/css/default.css
new file mode 100644
index 0000000..bad8d88
--- /dev/null
+++ b/public/static/css/default.css
@@ -0,0 +1,481 @@
+.hidden {
+  display: none;
+}
+
+.txt-cap {
+  text-transform: capitalize;
+}
+
+.font-xs {
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+}
+
+.font-s {
+  font-size: 1.4rem;
+  line-height: 2.1rem;
+}
+
+.font-m {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+.font-l {
+  font-size: 1.8rem;
+  line-height: 2.7rem;
+}
+
+.font-xl {
+  font-size: 2rem;
+  line-height: 3rem;
+}
+
+.padding-xs {
+  padding: 0.25rem;
+}
+
+.padding-s {
+  padding: 0.5rem;
+}
+
+.padding-m {
+  padding: 1rem;
+}
+
+.padding-l {
+  padding: 2rem;
+}
+
+.padding-xl {
+  padding: 4rem;
+}
+
+.padding-l-xs {
+  padding-left: 0.25rem;
+}
+
+.padding-l-s {
+  padding-left: 0.5rem;
+}
+
+.padding-l-m {
+  padding-left: 1rem;
+}
+
+.padding-l-l {
+  padding-left: 2rem;
+}
+
+.padding-l-xl {
+  padding-left: 4rem;
+}
+
+.padding-r-xs {
+  padding-right: 0.25rem;
+}
+
+.padding-r-s {
+  padding-right: 0.5rem;
+}
+
+.padding-r-m {
+  padding-right: 1rem;
+}
+
+.padding-r-l {
+  padding-right: 2rem;
+}
+
+.padding-r-xl {
+  padding-right: 4rem;
+}
+
+.padding-t-xs {
+  padding-top: 0.25rem;
+}
+
+.padding-t-s {
+  padding-top: 0.5rem;
+}
+
+.padding-t-m {
+  padding-top: 1rem;
+}
+
+.padding-t-l {
+  padding-top: 2rem;
+}
+
+.padding-t-xl {
+  padding-top: 4rem;
+}
+
+.padding-b-xs {
+  padding-bottom: 0.25rem;
+}
+
+.padding-b-s {
+  padding-bottom: 0.5rem;
+}
+
+.padding-b-m {
+  padding-bottom: 1rem;
+}
+
+.padding-b-l {
+  padding-bottom: 2rem;
+}
+
+.padding-b-xl {
+  padding-bottom: 4rem;
+}
+
+.margin-xs {
+  margin: 0.25rem;
+}
+
+.margin-s {
+  margin: 0.5rem;
+}
+
+.margin-m {
+  margin: 1rem;
+}
+
+.margin-l {
+  margin: 2rem;
+}
+
+.margin-xl {
+  margin: 4rem;
+}
+
+.margin-l-xs {
+  margin-left: 0.25rem;
+}
+
+.margin-l-s {
+  margin-left: 0.5rem;
+}
+
+.margin-l-m {
+  margin-left: 1rem;
+}
+
+.margin-l-l {
+  margin-left: 2rem;
+}
+
+.margin-l-xl {
+  margin-left: 4rem;
+}
+
+.margin-r-xs {
+  margin-right: 0.25rem;
+}
+
+.margin-r-s {
+  margin-right: 0.5rem;
+}
+
+.margin-r-m {
+  margin-right: 1rem;
+}
+
+.margin-r-l {
+  margin-right: 2rem;
+}
+
+.margin-r-xl {
+  margin-right: 4rem;
+}
+
+.margin-t-xs {
+  margin-top: 0.25rem;
+}
+
+.margin-t-s {
+  margin-top: 0.5rem;
+}
+
+.margin-t-m {
+  margin-top: 1rem;
+}
+
+.margin-t-l {
+  margin-top: 2rem;
+}
+
+.margin-t-xl {
+  margin-top: 4rem;
+}
+
+.margin-b-xs {
+  margin-bottom: 0.25rem;
+}
+
+.margin-b-s {
+  margin-bottom: 0.5rem;
+}
+
+.margin-b-m {
+  margin-bottom: 1rem;
+}
+
+.margin-b-l {
+  margin-bottom: 2rem;
+}
+
+.margin-b-xl {
+  margin-bottom: 4rem;
+}
+
+.blue0-font {
+  color: #3498db;
+}
+
+.blue1-font {
+  color: #2980b9;
+}
+
+.cyan0-font {
+  color: #1abc9c;
+}
+
+.cyan1-font {
+  color: #16a085;
+}
+
+.purple0-font {
+  color: #9b59b6;
+}
+
+.purple1-font {
+  color: #8e44ad;
+}
+
+.red0-font {
+  color: #e74c3c;
+}
+
+.red1-font {
+  color: #c0392b;
+}
+
+.yellow0-font {
+  color: #f1c40f;
+}
+
+.yellow1-font {
+  color: #f39c12;
+}
+
+.yellow2-font {
+  color: #e67e22;
+}
+
+.yellow3-font {
+  color: #d35400;
+}
+
+.green0-font {
+  color: #2ecc71;
+}
+
+.green1-font {
+  color: #27ae60;
+}
+
+.green2-font {
+  color: #15cd3d;
+}
+
+.white-font {
+  color: #fff;
+}
+
+.white0-font {
+  color: #ecf0f1;
+}
+
+.white1-font {
+  color: #bdc3c7;
+}
+
+.grey0-font {
+  color: #95a5a6;
+}
+
+.grey1-font {
+  color: #7f8c8d;
+}
+
+.grey2-font {
+  color: #ecf0f6;
+}
+
+.grey3-font {
+  color: #697384;
+}
+
+.black-font {
+  color: #000;
+}
+
+.black0-font {
+  color: #34495e;
+}
+
+.black1-font {
+  color: #2c3e50;
+}
+
+.blue0-bg {
+  background-color: #3498db;
+}
+
+.blue1-bg {
+  background-color: #2980b9;
+}
+
+.blue2-bg {
+  background-color: #2f45c5;
+}
+
+.cyan0-bg {
+  background-color: #1abc9c;
+}
+
+.cyan1-bg {
+  background-color: #16a085;
+}
+
+.purple0-bg {
+  background-color: #9b59b6;
+}
+
+.purple1-bg {
+  background-color: #8e44ad;
+}
+
+.red0-bg {
+  background-color: #e74c3c;
+}
+
+.red1-bg {
+  background-color: #c0392b;
+}
+
+.yellow0-bg {
+  background-color: #f1c40f;
+}
+
+.yellow1-bg {
+  background-color: #f39c12;
+}
+
+.yellow2-bg {
+  background-color: #e67e22;
+}
+
+.yellow3-bg {
+  background-color: #15cd3d;
+}
+
+.yellow3-bg {
+  background-color: #d35400;
+}
+
+.green0-bg {
+  background-color: #2ecc71;
+}
+
+.green1-bg {
+  background-color: #27ae60;
+}
+
+.green2-bg {
+  background-color: #15cd3d;
+}
+
+.white-bg {
+  background-color: #fff;
+}
+
+.white0-bg {
+  background-color: #ecf0f1;
+}
+
+.white1-bg {
+  background-color: #bdc3c7;
+}
+
+.grey0-bg {
+  background-color: #95a5a6;
+}
+
+.grey1-bg {
+  background-color: #7f8c8d;
+}
+.grey2-bg {
+  background-color: #ecf0f6;
+}
+
+.grey3-bg {
+  color: #697384;
+}
+
+.black-bg {
+  background-color: #000;
+}
+
+.black0-bg {
+  background-color: #34495e;
+}
+
+.black1-bg {
+  background-color: #2c3e50;
+}
+
+.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;
+}
+
+.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;
+}
diff --git a/public/static/css/white.css b/public/static/css/white.css
index e67e99e..92e3404 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -3,6 +3,9 @@
 
 .theme-default #bg {
   background: url("/static/img/textured_paper.png") repeat fixed center;
+  width: 100%;
+  height: 100%;
+  padding: 0 0 2rem 0;
 }
 
 .theme-default #top-bar {
@@ -116,6 +119,7 @@
 .theme-default #browser .item-op {
   line-height: 4rem;
   padding: 1rem;
+  text-align: right;
 }
 
 .theme-default #browser .error {
@@ -144,13 +148,6 @@
   padding: 1rem;
 }
 
-/* .theme-default .op-bar {
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
-  backdrop-filter: blur(9.5px);
-  -webkit-backdrop-filter: blur(9.5px);
-} */
-
 .theme-default .red-btn {
   background-color: #e74c3c;
   color: #fff;
@@ -307,3 +304,11 @@
   font-size: 1.2rem;
   background-color: #ecf0f6;
 }
+
+#item-list .item-name-vertical {
+  width: 14rem;
+}
+
+#item-list .item-name-horizontal {
+  width: 48rem;
+}
diff --git a/src/client/web/src/components/browser.tsx b/src/client/web/src/components/browser.tsx
index 956d5dc..8d4be7d 100644
--- a/src/client/web/src/components/browser.tsx
+++ b/src/client/web/src/components/browser.tsx
@@ -373,7 +373,7 @@ export class Browser extends React.Component<Props, State, {}> {
       }
     );
 
-    const nameCellClass = `item-name item-name-${
+    const nameWidthClass = `item-name item-name-${
       this.props.ui.isVertical ? "vertical" : "horizontal"
     } pointer`;
 
@@ -438,26 +438,28 @@ export class Browser extends React.Component<Props, State, {}> {
                     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 className={`${nameWidthClass}`}>
+                    <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>,
                 ])}
+                childrenStyles={List([
+                  { flex: "0 0 auto" },
+                  { flex: "0 0 auto" },
+                ])}
               />
             </span>,
 
-            <span className={`padding-m ${showOp}`}>
+            <span className={`item-op padding-m ${showOp}`}>
               <button
                 onClick={() => this.select(item.name)}
                 className={`${
@@ -471,45 +473,51 @@ export class Browser extends React.Component<Props, State, {}> {
               </button>
             </span>,
           ])}
-          childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          childrenStyles={List([
+            { flex: "0 0 auto", width: "60%" },
+            { flex: "0 0 auto", justifyContent: "flex-end", width: "40%" },
+          ])}
         />
       ) : (
         <div key={item.name}>
           <Flexbox
+            key={item.name}
             children={List([
-              <span className="padding-m">
-                <Flexbox
-                  children={List([
-                    <RiFile2Fill
-                      size="3rem"
-                      className="cyan0-font margin-r-m"
-                    />,
+              <Flexbox
+                children={List([
+                  <RiFile2Fill
+                    size="3rem"
+                    className="cyan0-font margin-l-m 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={`${nameWidthClass}`}>
+                    <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>,
+                ])}
+                childrenStyles={List([
+                  { flex: "0 0 auto" },
+                  { flex: "0 0 auto" },
+                ])}
+              />,
 
               <span className={`item-op padding-m ${showOp}`}>
                 <button
                   onClick={() => this.toggleDetail(item.name)}
-                  className="grey2-bg grey3-font margin-r-m"
-                  style={{ width: "8rem", display: "inline-block" }}
+                  style={{ width: "8rem" }}
+                  className="float-input"
                 >
                   {this.props.msg.pkg.get("detail")}
                 </button>
@@ -517,10 +525,10 @@ export class Browser extends React.Component<Props, State, {}> {
                 <button
                   type="button"
                   onClick={() => this.select(item.name)}
-                  className={`${
-                    isSelected ? "cyan0-bg white-font" : "grey2-bg grey3-font"
+                  className={`float-input ${
+                    isSelected ? "cyan0-bg white-font " : "grey2-bg grey3-font "
                   }`}
-                  style={{ width: "8rem", display: "inline-block" }}
+                  style={{ width: "8rem" }}
                 >
                   {isSelected
                     ? this.props.msg.pkg.get("browser.deselect")
@@ -528,8 +536,12 @@ export class Browser extends React.Component<Props, State, {}> {
                 </button>
               </span>,
             ])}
-            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            childrenStyles={List([
+              { flex: "0 0 auto", width: "60%" },
+              { flex: "0 0 auto", justifyContent: "flex-end", width: "40%" },
+            ])}
           />
+
           <div
             className={`${
               this.state.showDetail.has(item.name) ? "" : "hidden"
@@ -685,7 +697,7 @@ export class Browser extends React.Component<Props, State, {}> {
                         className="margin-r-m blue0-font"
                       />,
 
-                      <div className={`${nameCellClass}`}>
+                      <div className={`${nameWidthClass}`}>
                         <span className="title-m">{fileName}</span>
                         <div className="desc-m grey0-font">
                           {FileSize(uploading.uploaded, { round: 0 })}