diff --git a/src/CollapsibleSettingLayout/index.jsx b/src/CollapsibleSettingLayout/index.jsx
index e83b3faa..81e4548a 100644
--- a/src/CollapsibleSettingLayout/index.jsx
+++ b/src/CollapsibleSettingLayout/index.jsx
@@ -15,7 +15,9 @@ const CollapsibleSettingLayout = (props) => {
         onClick={() => setIsShowSettings(!isShowSettings)}
       >
         <span className="collapsible-setting-layout-title">{title}</span>
-        <i className={`dtable-font dtable-icon-right${isShowSettings ? ' dtable-icon-spin' : ''}`}></i>
+        <span className="seatable-icon-btn">
+          <i className={`dtable-font dtable-icon-right${isShowSettings ? ' dtable-icon-spin' : ''}`}/>
+        </span>
       </div>
       {isShowSettings && <div className="collapsible-setting-layout-body mt-3 pl-2">{children || ''}</div>}
     </div>
diff --git a/src/DTableModalHeader/index.css b/src/DTableModalHeader/index.css
new file mode 100644
index 00000000..01c4aad1
--- /dev/null
+++ b/src/DTableModalHeader/index.css
@@ -0,0 +1,4 @@
+.modal-close-btn {
+  font-size: 16px;
+  font-weight: 700;
+}
diff --git a/src/DTableModalHeader/index.js b/src/DTableModalHeader/index.js
index 4cc8ed80..3fcf3d70 100644
--- a/src/DTableModalHeader/index.js
+++ b/src/DTableModalHeader/index.js
@@ -2,9 +2,11 @@ import React from 'react';
 import { ModalHeader } from 'reactstrap';
 import IconButton from '../IconButton';
 
+import './index.css';
+
 const DTableModalHeader = ({ children, ...props }) => {
   const customCloseBtn = (
-    <IconButton icon="x" aria-label="Close" onClick={props.toggle}/>
+    <IconButton icon="x" aria-label="Close" onClick={props.toggle} className='modal-close-btn'/>
   );
   return (
     <ModalHeader {...props} close={customCloseBtn}>
diff --git a/src/DTableRadioGroup/index.jsx b/src/DTableRadioGroup/index.jsx
index e2013da2..ad3c51b5 100644
--- a/src/DTableRadioGroup/index.jsx
+++ b/src/DTableRadioGroup/index.jsx
@@ -83,7 +83,7 @@ class DTableRadioGroup extends React.Component {
               </div>
             );
           })}
-          <span className='radio-group-slider btn btn-primary' ref={ref => this.slider = ref}></span>
+          <span className='radio-group-slider btn btn-primary btn-sm' ref={ref => this.slider = ref}></span>
         </div>
       </div>
     );
diff --git a/src/IconButton/index.css b/src/IconButton/index.css
new file mode 100644
index 00000000..e6b83f40
--- /dev/null
+++ b/src/IconButton/index.css
@@ -0,0 +1,3 @@
+.icon-button .seatable-icon {
+  font-size: 16px;
+}
diff --git a/src/IconButton/index.js b/src/IconButton/index.js
index 6398c75d..2c0a075e 100644
--- a/src/IconButton/index.js
+++ b/src/IconButton/index.js
@@ -2,10 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
+import './index.css';
+
 const IconButton = ({ disabled, className, icon, children, ...otherProperties }) => {
   return (
     <div
-      className={classnames('seatable-icon-btn', className, { 'disabled': disabled })}
+      className={classnames('seatable-icon-btn icon-button', className, { 'disabled': disabled })}
       {...otherProperties}
     >
       {icon && (<i className={classnames('seatable-icon dtable-font', `dtable-icon-${icon}`)} aria-hidden="true"></i>)}