diff --git a/src/AsyncUserSelect/index.js b/src/AsyncUserSelect/index.js
index 989b9ba4..d5118c7a 100644
--- a/src/AsyncUserSelect/index.js
+++ b/src/AsyncUserSelect/index.js
@@ -213,9 +213,9 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
             target={selectorRef.current}
             hideArrow={true}
             fade={false}
-            className="dtable-ui-user-select-popover"
+            className="dtable-ui-user-select-popover seatable-popover"
           >
-            <div className="dtable-ui-user-select-container" ref={userSelectContainerRef} onMouseDown={e => e.stopPropagation()}>
+            <div className="dtable-ui-user-select-container dtable-popover-container" ref={userSelectContainerRef} onMouseDown={e => e.stopPropagation()} >
               <div className="dtable-ui-user-search-container">
                 <DtableSearchInput
                   autoFocus
diff --git a/src/DTableColorPicker/ColorPickerPortal/index.js b/src/DTableColorPicker/ColorPickerPortal/index.js
index 105a7b51..94f4f8af 100644
--- a/src/DTableColorPicker/ColorPickerPortal/index.js
+++ b/src/DTableColorPicker/ColorPickerPortal/index.js
@@ -62,7 +62,7 @@ export default function ColorPickerPortal({ target, scrollContainerId, throttleD
 
   return ReactDOM.createPortal(
     <div
-      className='dtable-color-picker-portal'
+      className='dtable-color-picker-portal dtable-popover-container'
       style={{
         position: 'fixed',
         zIndex: '1049',
diff --git a/src/DTableColorPicker/index.css b/src/DTableColorPicker/index.css
index a611b335..8f565c1c 100644
--- a/src/DTableColorPicker/index.css
+++ b/src/DTableColorPicker/index.css
@@ -2,12 +2,14 @@
   width: 240px;
   height: 370px;
   background-color: #fff;
-  border-radius: 3px;
   z-index: 100;
   padding: 0.75rem;
   line-height: 16px;
   position: absolute;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 4px;
+  margin-top: 8px;  
+	border: 1px solid #eee !important;
+	border-radius: 8px !important;
+	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1) !important;
 }
 
 .dtable-color-picker .chrome-picker {
diff --git a/src/DTableCommonAddTool/index.css b/src/DTableCommonAddTool/index.css
index d56c5064..ee741418 100644
--- a/src/DTableCommonAddTool/index.css
+++ b/src/DTableCommonAddTool/index.css
@@ -4,11 +4,11 @@
   height: 40px;
   font-size: 14px;
   font-weight: 500;
-  border-top: 1px solid #dedede;
+  border-top: 1px solid #eee;
   background: #fff;
   padding: 0 1rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
   position: relative;
 }
 
diff --git a/src/DTableCustomFooter/index.css b/src/DTableCustomFooter/index.css
index 536de525..f810d6ae 100644
--- a/src/DTableCustomFooter/index.css
+++ b/src/DTableCustomFooter/index.css
@@ -4,9 +4,9 @@
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem;
-  border-top: 1px solid rgba(0, 40, 100, 0.12);
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border: 1px solid #eee !important;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
 
 .dtable-custom-footer>* {
diff --git a/src/DTableFiltersPopover/index.css b/src/DTableFiltersPopover/index.css
index f4fcabc1..8784fcb3 100644
--- a/src/DTableFiltersPopover/index.css
+++ b/src/DTableFiltersPopover/index.css
@@ -29,8 +29,8 @@
   font-weight: 500;
   background: #fff;
   color: #666;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
   position: relative;
 }
 
diff --git a/src/DTablePopover/index.js b/src/DTablePopover/index.js
index 7fc046ae..fcbd8140 100644
--- a/src/DTablePopover/index.js
+++ b/src/DTablePopover/index.js
@@ -64,10 +64,10 @@ class DTablePopover extends React.Component {
         fade={false}
         hideArrow={hideArrow}
         innerClassName={innerClassName}
-        className={popoverClassName}
+        className={`seatable-popover ${popoverClassName}`}
         modifiers={modifiers}
       >
-        <div ref={ref => this.dtablePopoverRef = ref} onClick={this.onPopoverInsideClick}>
+        <div ref={ref => this.dtablePopoverRef = ref} onClick={this.onPopoverInsideClick} className='dtable-popover-container'>
           {this.props.children}
         </div>
       </Popover>
diff --git a/src/DTableSwitch/index.css b/src/DTableSwitch/index.css
index 22b02878..c105cf8b 100644
--- a/src/DTableSwitch/index.css
+++ b/src/DTableSwitch/index.css
@@ -32,7 +32,6 @@
   transform: scale(.8);
   display: inline-block;
   line-height: 24px;
-  margin-right: 8px;
 }
 
 .dtable-switch.sm .custom-switch .dtable-font.dtable-icon-use-help {
diff --git a/src/NotificationPopover/index.css b/src/NotificationPopover/index.css
index a786f342..7544fe5d 100644
--- a/src/NotificationPopover/index.css
+++ b/src/NotificationPopover/index.css
@@ -5,11 +5,11 @@
 .notification-container {
   position: absolute;
   background: #fff;
-  width: 320px;
+  width: 400px;
   right: -10px;
   top: -1px;
-  border-radius: 3px;
-  box-shadow: 0 0 5px #ccc;
+  border-radius: 8px;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, .1);
 }
 
 .notification-container .notification-header {
@@ -17,7 +17,7 @@
   align-items: center;
   justify-content: center;
   height: 50px;
-  border-bottom: 1px solid #ededed;
+  border-bottom: 1px solid #eee;
   font-size: 16px;
   font-weight: 600;
   position: relative;
@@ -161,14 +161,10 @@
 
 .notification-body .notification-footer {
   height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f9f9f9;
-  cursor: pointer;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-  border-top: 1px solid #ededed;
+  border-top: 1px solid #eee !important;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  background: #fff;
 }
 
 .notification-body .notification-footer:hover {
diff --git a/src/NotificationPopover/index.js b/src/NotificationPopover/index.js
index 0095647c..4c7b15dc 100644
--- a/src/NotificationPopover/index.js
+++ b/src/NotificationPopover/index.js
@@ -71,7 +71,7 @@ export default class NotificationPopover extends React.Component {
         hideArrow={true}
         placement="bottom"
       >
-        <div className="notification-container" ref={ref => this.notificationContainerRef = ref}>
+        <div className="notification-container dtable-popover-container" ref={ref => this.notificationContainerRef = ref}>
           <div className="notification-header">
             {headerText}
             <IconButton icon="x" onClick={this.props.onNotificationListToggle} />
@@ -89,7 +89,9 @@ export default class NotificationPopover extends React.Component {
                 {this.props.children}
               </div>
             </div>
-            <div className="notification-footer" onClick={this.onNotificationDialogToggle}>{footerText}</div>
+            <button className="notification-footer border-0 bg-transparent d-block w-100" onClick={this.onNotificationDialogToggle} >
+              {footerText}
+            </button>
           </div>
         </div>
       </Popover>
diff --git a/src/SelectOptionGroup/index.css b/src/SelectOptionGroup/index.css
index e0b7767d..680f91fc 100644
--- a/src/SelectOptionGroup/index.css
+++ b/src/SelectOptionGroup/index.css
@@ -7,11 +7,11 @@
   min-width: 100%;
   max-width: 15rem;
   padding: 0.5rem 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background: #fff;
-  border: 1px solid rgba(0, 40, 100, 0.12);
-  border-radius: 3px;
   z-index: 10001;
+  border: 1px solid #eee !important;
+	border-radius: 8px !important;
+	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1) !important;
 }
 
 .option-group .option-group-search {