diff --git a/public/static/css/white.css b/public/static/css/white.css
index fe1b3d9..107e1e6 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -339,16 +339,6 @@ input:focus {
   overflow-wrap: break-word;
 }
 
-.theme-default .error-inline {
-  font-size: 1.4rem;
-  padding: 1rem;
-  color: #f1c40f;
-  margin: 1rem 0 0 0;
-  background-color: #2c3e50;
-  white-space: nowrap;
-  overflow: auto;
-}
-
 .theme-default #sharing-list .info {
   float: left;
   width: 70%;
@@ -434,10 +424,6 @@ input:focus {
   /* padding: 2rem; */
 }
 
-.theme-default #pane-settings #profile .desc-m {
-  color: #95a5a6;
-}
-
 .theme-default .user-form {
   font-size: 1.4rem;
   padding: 1rem 0;
diff --git a/public/static/css/white_compact.css b/public/static/css/white_compact.css
index de66cea..5097730 100644
--- a/public/static/css/white_compact.css
+++ b/public/static/css/white_compact.css
@@ -9,23 +9,17 @@
   float: left;
 }
 
-.theme-default #browser .info {
+.theme-default .info {
   border: dashed 1px #95a5a6;
   font-size: 1.4rem;
   padding: 1rem;
   color: #697384;
   margin: 1rem 0 0 0;
-  background-color: #ecf0f1;
+  background-color: #f6f6f6;
   white-space: nowrap;
   overflow: auto;
 }
 
-.theme-default .pane-title {
-  color: black;
-  font-size: 1.6rem;
-  line-height: 1.6rem;
-}
-
 .theme-default #breadcrumb {
   width: 100%;
 }
@@ -51,9 +45,8 @@
   display: block;
 }
 
-.theme-default .inline-blocks {
+.theme-default .inline-block {
   display: inline-block;
-  margin: auto 1rem auto auto;
 }
 
 .theme-default .select-btn {
@@ -89,12 +82,12 @@
   transition: width 300ms;
 }
 
-.theme-default #upload-list .info {
+.theme-default .l-col {
   display: inline-block;
   width: 70%;
 }
 
-.theme-default #upload-list .op {
+.theme-default .r-col {
   display: inline-block;
   width: 30%;
   text-align: right;
@@ -115,5 +108,21 @@
 .theme-default #item-rows .desc {
   display: block;
   word-break: break-all;
-  border-radius: 0.8rem;
+}
+
+.theme-default .error-inline {
+  font-size: 1.4rem;
+  padding: 1rem;
+  color: #f1c40f;
+  margin: 1rem 0 0 0;
+  background-color: #2c3e50;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.theme-default .label {
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: #7f8c8d;
+  padding-left: 0.5rem;
 }
diff --git a/src/client/web/src/components/dialog_settings.tsx b/src/client/web/src/components/dialog_settings.tsx
index 7aa3bd5..0147770 100644
--- a/src/client/web/src/components/dialog_settings.tsx
+++ b/src/client/web/src/components/dialog_settings.tsx
@@ -12,6 +12,7 @@ import { Container } from "./layout/container";
 import { LoginProps } from "./pane_login";
 import { roleAdmin } from "../client";
 import { settingsTabsCtrl } from "../common/controls";
+import { Title } from "./visual/title";
 
 export interface Props {
   admin: AdminProps;
diff --git a/src/client/web/src/components/layers.tsx b/src/client/web/src/components/layers.tsx
index b8989dd..aa7c3a8 100644
--- a/src/client/web/src/components/layers.tsx
+++ b/src/client/web/src/components/layers.tsx
@@ -19,6 +19,7 @@ import {
   ctrlHidden,
 } from "../common/controls";
 import { LoadingIcon } from "./visual/loading";
+import { Title } from "./visual/title";
 import { HotkeyHandler } from "../common/hotkeys";
 
 export interface Props {
@@ -98,7 +99,11 @@ export class Layers extends React.Component<Props, State, {}> {
             <Container>
               <Flexbox
                 children={List([
-                  <h4 id="title">{this.props.msg.pkg.get("pane.settings")}</h4>,
+                  <Title
+                    title={this.props.msg.pkg.get("pane.settings")}
+                    iconColor="black"
+                    iconName="RiListSettingsFill"
+                  />,
                   <button
                     className="button-default"
                     onClick={() => {
diff --git a/src/client/web/src/components/pane_admin.tsx b/src/client/web/src/components/pane_admin.tsx
index 3174b49..2352056 100644
--- a/src/client/web/src/components/pane_admin.tsx
+++ b/src/client/web/src/components/pane_admin.tsx
@@ -11,7 +11,8 @@ import { updater } from "./state_updater";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
 import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
-// import { getItemPath } from "./panel_files";
+import { iconSize } from "./visual/icons";
+import { Columns } from "./layout/columns";
 
 export interface AdminProps {
   users: Map<string, User>;
@@ -204,49 +205,49 @@ export class UserForm extends React.Component<
 
   render() {
     const foldedClass = this.state.folded ? "hidden" : "";
-    const foldIconColor = this.state.folded ? "black-font" : "cyan1-font";
+    const foldIconColor = this.state.folded ? "black-font" : "highlight-font";
     const resetUsedSpace = () => {
       this.resetUsedSpace(this.props.id);
     };
 
     return (
       <div className="user-form">
-        <Flexbox
-          children={List([
-            <div>
-              <span className="bold">{`${this.props.msg.pkg.get(
-                "user.name"
-              )}: `}</span>
-              <span className="margin-r-m">{this.props.name}</span>
-              <span className="bold">{`${this.props.msg.pkg.get(
-                "user.id"
-              )}: `}</span>
-              <span>{this.props.id}</span>
-            </div>,
+        <Columns
+          rows={List([
+            List([
+              <div className="title-m-wrap">
+                <span className="bold">{`${this.props.msg.pkg.get(
+                  "user.name"
+                )}: `}</span>
+                <span className="margin-r-m">{this.props.name}</span>
+                <span className="bold">{`${this.props.msg.pkg.get(
+                  "user.id"
+                )}: `}</span>
+                <span>{this.props.id}</span>
+              </div>,
 
-            <span>
-              <RiMenuUnfoldFill
-                size="1.2rem"
-                className={`margin-r-m ${foldIconColor}`}
-                onClick={this.toggle}
-              />
+              <div className="txt-align-r">
+                <div className="icon-s inline-block">
+                  <RiMenuUnfoldFill
+                    size={iconSize("s")}
+                    className={`margin-r-m ${foldIconColor}`}
+                    onClick={this.toggle}
+                  />
+                </div>
+              </div>,
 
               <button className="button-default" onClick={this.delUser}>
                 {this.props.msg.pkg.get("delete")}
-              </button>
-            </span>,
-          ])}
-          childrenStyles={List([
-            { alignItems: "flex-start", flexBasis: "70%" },
-            {
-              justifyContent: "flex-end",
-            },
+              </button>,
+            ]),
           ])}
+          widths={List(["calc(100% - 10rem)", "3rem", "7rem"])}
+          childrenClassNames={List(["", "txt-align-r", "txt-align-r"])}
         />
 
-        <div className={foldedClass}>
-          <div className="hr"></div>
+        <div></div>
 
+        <div className={`info ${foldedClass}`}>
           <div>
             <Flexbox
               children={List([
@@ -270,7 +271,7 @@ export class UserForm extends React.Component<
             className="margin-t-m"
             children={List([
               <div>
-                <span className="float-input">
+                <span className="inline-block margin-r-m">
                   <div className="label">
                     {this.props.msg.pkg.get("user.role")}
                   </div>
@@ -283,7 +284,7 @@ export class UserForm extends React.Component<
                   />
                 </span>
 
-                <span className="float-input">
+                <span className="inline-block margin-r-m">
                   <div className="label">
                     {`${this.props.msg.pkg.get("spaceLimit")} (${FileSize(
                       parseInt(this.state.quota.spaceLimit, 10),
@@ -299,7 +300,7 @@ export class UserForm extends React.Component<
                   />
                 </span>
 
-                <span className="float-input">
+                <span className="inline-block margin-r-m">
                   <div className="label">
                     {`${this.props.msg.pkg.get("uploadLimit")} (${FileSize(
                       this.state.quota.uploadSpeedLimit,
@@ -315,7 +316,7 @@ export class UserForm extends React.Component<
                   />
                 </span>
 
-                <span className="float-input">
+                <span className="inline-block margin-r-m">
                   <div className="label">
                     {`${this.props.msg.pkg.get("downloadLimit")} (${FileSize(
                       this.state.quota.downloadSpeedLimit,
@@ -353,7 +354,7 @@ export class UserForm extends React.Component<
             className="margin-t-m"
             children={List([
               <div>
-                <div className="float-input">
+                <div className="inline-block margin-r-m">
                   <div className="label">
                     {this.props.msg.pkg.get("settings.pwd.new1")}
                   </div>
@@ -367,7 +368,7 @@ export class UserForm extends React.Component<
                   />
                 </div>
 
-                <div className="float-input">
+                <div className="inline-block">
                   <div className="label">
                     {this.props.msg.pkg.get("settings.pwd.new2")}
                   </div>
@@ -582,9 +583,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="pane-title">
-                {this.props.msg.pkg.get("user.add")}
-              </h5>,
+              <h5 className="title-m">{this.props.msg.pkg.get("user.add")}</h5>,
               <button onClick={this.addUser} className="button-default">
                 {this.props.msg.pkg.get("add")}
               </button>,
@@ -594,7 +593,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
 
           <div className="hr"></div>
 
-          <span className="float-input">
+          <span className="inline-block margin-r-m">
             <div className="label">{this.props.msg.pkg.get("user.name")}</div>
             <input
               type="text"
@@ -604,7 +603,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
             />
           </span>
 
-          <span className="float-input">
+          <span className="inline-block margin-r-m">
             <div className="label">{this.props.msg.pkg.get("user.role")}</div>
             <input
               type="text"
@@ -614,7 +613,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
             />
           </span>
 
-          <span className="float-input">
+          <span className="inline-block margin-r-m">
             <div className="label">
               {this.props.msg.pkg.get("settings.pwd.new1")}
             </div>
@@ -626,7 +625,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
             />
           </span>
 
-          <span className="float-input">
+          <span className="inline-block margin-r-m">
             <div className="label">
               {this.props.msg.pkg.get("settings.pwd.new2")}
             </div>
@@ -642,7 +641,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="pane-title">
+              <h5 className="title-m">
                 {this.props.msg.pkg.get("admin.users")}
               </h5>,
               <span></span>,
@@ -658,7 +657,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
           <div>
             <Flexbox
               children={List([
-                <h5 className="pane-title">
+                <h5 className="title-m">
                   {this.props.msg.pkg.get("role.add")}
                 </h5>,
                 <span></span>,
@@ -687,7 +686,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="pane-title">
+              <h5 className="title-m">
                 {this.props.msg.pkg.get("admin.roles")}
               </h5>,
               <span></span>,
@@ -839,16 +838,19 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
       <div>
         <Flexbox
           children={List([
-            <h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
+            <h5 className="title-m">{this.props.msg.pkg.get("cfg.bg")}</h5>,
 
             <span>
               <button
                 onClick={this.resetClientCfg}
-                className="margin-r-m button-default"
+                className="inline-block margin-r-m button-default"
               >
                 {this.props.msg.pkg.get("reset")}
               </button>
-              <button className="button-default" onClick={this.setClientCfg}>
+              <button
+                className="inline-block button-default"
+                onClick={this.setClientCfg}
+              >
                 {this.props.msg.pkg.get("update")}
               </button>
             </span>,
@@ -859,7 +861,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
         <div className="hr"></div>
 
         <div>
-          <div className="float-input">
+          <div className="inline-block margin-r-m">
             <div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div>
             <input
               name="bg_url"
@@ -871,7 +873,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
             />
           </div>
 
-          <div className="float-input">
+          <div className="inline-block margin-r-m">
             <div className="label">
               {this.props.msg.pkg.get("cfg.bg.repeat")}
             </div>
@@ -884,7 +886,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
             />
           </div>
 
-          <div className="float-input">
+          <div className="inline-block margin-r-m">
             <div className="label">{this.props.msg.pkg.get("cfg.bg.pos")}</div>
             <input
               name="bg_pos"
@@ -895,7 +897,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
             />
           </div>
 
-          <div className="float-input">
+          <div className="inline-block">
             <div className="label">
               {this.props.msg.pkg.get("cfg.bg.align")}
             </div>
diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx
index 3cebfca..dd1425b 100644
--- a/src/client/web/src/components/pane_settings.tsx
+++ b/src/client/web/src/components/pane_settings.tsx
@@ -9,7 +9,7 @@ import { updater } from "./state_updater";
 import { alertMsg, confirmMsg } from "../common/env";
 import { Container } from "./layout/container";
 import { Card } from "./layout/card";
-import { Rows, Row } from "./layout/rows";
+import { Rows } from "./layout/rows";
 import { ClientErrorV001, ErrorLogger } from "../common/log_error";
 import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
 export interface Props {
@@ -194,7 +194,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="pane-title">
+              <h5 className="title-m">
                 {this.props.msg.pkg.get("error.report.title")}
               </h5>,
 
@@ -226,7 +226,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
       <div id="pane-settings">
         <Container>
           <div id="profile">
-            <h5 className="pane-title">
+            <h5 className="title-m">
               {this.props.msg.pkg.get("user.profile")}
             </h5>
 
@@ -270,7 +270,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="pane-title">
+              <h5 className="title-m">
                 {this.props.msg.pkg.get("settings.pwd.update")}
               </h5>,
               <button className="button-default" onClick={this.setPwd}>
@@ -282,7 +282,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
 
           <div className="hr"></div>
 
-          <span className="float-input">
+          <span className="inline-block margin-r-m">
             <div className="label">
               {this.props.msg.pkg.get("settings.pwd.old")}
             </div>
@@ -295,7 +295,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
             />
           </span>
 
-          <span className="float-input">
+          <span className="inline-block margin-r-m">
             <div className="label">
               {this.props.msg.pkg.get("settings.pwd.new1")}
             </div>
@@ -308,7 +308,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
             />
           </span>
 
-          <span className="float-input">
+          <span className="inline-block margin-r-m">
             <div className="label">
               {this.props.msg.pkg.get("settings.pwd.new2")}
             </div>
@@ -325,7 +325,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="pane-title">
+              <h5 className="title-m">
                 {this.props.msg.pkg.get("settings.chooseLan")}
               </h5>,
             ])}
@@ -339,7 +339,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               onClick={() => {
                 this.setLan("en_US");
               }}
-              className="button-default float-input"
+              className="button-default inline-block margin-r-m"
             >
               {this.props.msg.pkg.get("enUS")}
             </button>
@@ -347,17 +347,18 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               onClick={() => {
                 this.setLan("zh_CN");
               }}
-              className="button-default float-input"
+              className="button-default inline-block margin-r-m"
             >
               {this.props.msg.pkg.get("zhCN")}
             </button>
           </div>
         </Container>
 
-        <Container>
+        {/* disabled */}
+        {/* <Container>
           <Flexbox
             children={List([
-              <h5 className="pane-title">
+              <h5 className="title-m">
                 {this.props.msg.pkg.get("settings.customLan")}
               </h5>,
 
@@ -375,7 +376,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
 
           <div className="hr"></div>
 
-          <div className="float-input">
+          <div className="inline-block margin-r-m">
             <div className="label">
               {this.props.msg.pkg.get("settings.lanPackURL")}
             </div>
@@ -383,19 +384,17 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               type="text"
               onChange={this.changeLanPackURL}
               value={this.props.login.preferences.lanPackURL}
-              className="black0-font"
+              className="dark-font"
               style={{ width: "20rem" }}
               placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
             />
           </div>
-        </Container>
+        </Container> */}
 
         <Container>
           <Flexbox
             children={List([
-              <h5 className="pane-title">
-                {this.props.msg.pkg.get("cfg.bg")}
-              </h5>,
+              <h5 className="title-m">{this.props.msg.pkg.get("cfg.bg")}</h5>,
 
               <button className="button-default" onClick={this.syncPreferences}>
                 {this.props.msg.pkg.get("update")}
@@ -407,7 +406,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
           <div className="hr"></div>
 
           <div>
-            <div className="float-input">
+            <div className="inline-block margin-r-m">
               <div className="label">
                 {this.props.msg.pkg.get("cfg.bg.url")}
               </div>
@@ -420,7 +419,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               />
             </div>
 
-            <div className="float-input">
+            <div className="inline-block margin-r-m">
               <div className="label">
                 {this.props.msg.pkg.get("cfg.bg.repeat")}
               </div>
@@ -433,7 +432,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               />
             </div>
 
-            <div className="float-input">
+            <div className="inline-block margin-r-m">
               <div className="label">
                 {this.props.msg.pkg.get("cfg.bg.pos")}
               </div>
@@ -446,7 +445,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               />
             </div>
 
-            <div className="float-input">
+            <div className="inline-block margin-r-m">
               <div className="label">
                 {this.props.msg.pkg.get("cfg.bg.align")}
               </div>
diff --git a/src/client/web/src/components/panel_files.tsx b/src/client/web/src/components/panel_files.tsx
index 2f83b43..838ae90 100644
--- a/src/client/web/src/components/panel_files.tsx
+++ b/src/client/web/src/components/panel_files.tsx
@@ -33,6 +33,7 @@ import {
 } from "../common/controls";
 import { HotkeyHandler } from "../common/hotkeys";
 import { CronTable } from "../common/cron";
+import { Title } from "./visual/title";
 
 export interface Item {
   name: string;
@@ -599,7 +600,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       const tableCols = (
         <Columns
           rows={List([cells])}
-          widths={List(["3rem", "calc(100% - 16rem)", "8rem", "5rem"])}
+          widths={List(["3rem", "calc(100% - 18rem)", "8rem", "7rem"])}
           childrenClassNames={List(["", "", "", ""])}
         />
       );
@@ -642,9 +643,12 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     const endPoints = (
       <div className={showEndpoints}>
         <Container>
-          <h5 className="pane-title margin-r-m">
-            {this.props.msg.pkg.get("endpoints")}
-          </h5>
+          <h5 className="title-m"></h5>
+          <Title
+            title={this.props.msg.pkg.get("endpoints")}
+            iconColor="black"
+            iconName="RiGridFill"
+          />
           <div className="hr"></div>
 
           <button onClick={gotoRoot} className="button-default margin-r-m">
@@ -691,7 +695,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
             <div>
               <button
                 onClick={this.mkDir}
-                className="inline-blocks cyan1-bg white-font"
+                className="inline-block cyan1-bg white-font margin-r-m"
               >
                 {this.props.msg.pkg.get("browser.folder.add")}
               </button>
@@ -700,7 +704,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                 onChange={this.onNewFolderNameChange}
                 value={this.state.newFolderName}
                 placeholder={this.props.msg.pkg.get("browser.folder.name")}
-                className="inline-blocks"
+                className="inline-block"
               />
             </div>,
 
diff --git a/src/client/web/src/components/panel_uploadings.tsx b/src/client/web/src/components/panel_uploadings.tsx
index 5982399..8d7c17c 100644
--- a/src/client/web/src/components/panel_uploadings.tsx
+++ b/src/client/web/src/components/panel_uploadings.tsx
@@ -117,7 +117,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         uploading.state !== UploadState.Stopped ? (
           <button
             onClick={() => this.stopUploading(uploading.filePath)}
-            className="inline-block margin-r-m margin-b-m"
+            className="inline-block button-default margin-r-m margin-b-m"
           >
             {this.props.msg.pkg.get("browser.stop")}
           </button>
@@ -129,7 +129,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
           {stopButton}
           <button
             onClick={() => this.deleteUpload(uploading.filePath)}
-            className="inline-block"
+            className="inline-block button-default"
           >
             {this.props.msg.pkg.get("browser.delete")}
           </button>
@@ -152,7 +152,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
 
       const elem = (
         <div key={uploading.filePath} className="upload-item">
-          <div className={`font-s info`}>
+          <div className={`font-s l-col`}>
             <span className="title">{fileName}&nbsp;</span>
             <span className="desc grey0-font">
               {FileSize(uploading.uploaded, { round: 0 })}
@@ -165,7 +165,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
             </span>
           </div>
 
-          <div className="op">{operations}</div>
+          <div className="r-col">{operations}</div>
 
           {progressBar}
           {errorInfo}
diff --git a/src/client/web/src/components/visual/icons.tsx b/src/client/web/src/components/visual/icons.tsx
index f50eae6..ea64eab 100644
--- a/src/client/web/src/components/visual/icons.tsx
+++ b/src/client/web/src/components/visual/icons.tsx
@@ -20,6 +20,9 @@ import { BiListUl } from "@react-icons/all-files/bi/BiListUl";
 import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
 import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
 import { BiSortUp } from "@react-icons/all-files/bi/BiSortUp";
+import { RiListSettingsFill } from "@react-icons/all-files/ri/RiListSettingsFill";
+import { RiHardDriveFill } from "@react-icons/all-files/ri/RiHardDriveFill";
+import { RiGridFill } from "@react-icons/all-files/ri/RiGridFill";
 
 import { colorClass } from "./colors";
 
@@ -48,6 +51,9 @@ const icons = Map<string, IconType>({
   RiMore2Fill: RiMore2Fill,
   RiCheckboxBlankLine: RiCheckboxBlankLine,
   BiSortUp: BiSortUp,
+  RiListSettingsFill: RiListSettingsFill,
+  RiHardDriveFill: RiHardDriveFill,
+  RiGridFill: RiGridFill,
 });
 
 export function getIconWithProps(
@@ -78,3 +84,16 @@ export function getIcon(
     null
   );
 }
+
+export function iconSize(size: string): string {
+  switch (size) {
+    case "s":
+      return "2rem";
+    case "m":
+      return "2.4rem";
+    case "l":
+      return "3.2rem";
+    default:
+      throw Error(`icons size(${size}) not found`);
+  }
+}