diff --git a/src/components/top-bar/content/border-setting.tsx b/src/components/top-bar/content/border-setting.tsx
index e1ebff63..020dc3f3 100644
--- a/src/components/top-bar/content/border-setting.tsx
+++ b/src/components/top-bar/content/border-setting.tsx
@@ -215,7 +215,7 @@ export const BorderSettingComponent = ({
                             border:
                                 selectedRange === 'outer' ||
                                 selectedRange === 'all'
-                                    ? `${previewLineWidth}px ${borderStyle} ${color}`
+                                    ? `${previewLineWidth}px ${borderStyle} ${color.css()}`
                                     : 'none',
                         }}
                     />
@@ -226,12 +226,12 @@ export const BorderSettingComponent = ({
                             borderTop:
                                 selectedRange === 'top' ||
                                 selectedRange === 'all'
-                                    ? `${previewLineWidth}px ${borderStyle} ${color}`
+                                    ? `${previewLineWidth}px ${borderStyle} ${color.css()}`
                                     : 'none',
                             borderRight:
                                 selectedRange === 'right' ||
                                 selectedRange === 'all'
-                                    ? `${previewLineWidth}px ${borderStyle} ${color}`
+                                    ? `${previewLineWidth}px ${borderStyle} ${color.css()}`
                                     : 'none',
                         }}
                     />
@@ -242,18 +242,18 @@ export const BorderSettingComponent = ({
                             borderBottom:
                                 selectedRange === 'bottom' ||
                                 selectedRange === 'all'
-                                    ? `${previewLineWidth}px ${borderStyle} ${color}`
+                                    ? `${previewLineWidth}px ${borderStyle} ${color.css()}`
                                     : 'none',
                             borderTop:
                                 selectedRange === 'inner' ||
                                 selectedRange === 'all' ||
                                 selectedRange === 'horizontal'
-                                    ? `${previewLineWidth}px ${borderStyle} ${color}`
+                                    ? `${previewLineWidth}px ${borderStyle} ${color.css()}`
                                     : 'none',
                             borderRight:
                                 selectedRange === 'right' ||
                                 selectedRange === 'all'
-                                    ? `${previewLineWidth}px ${borderStyle} ${color}`
+                                    ? `${previewLineWidth}px ${borderStyle} ${color.css()}`
                                     : 'none',
                         }}
                     />
@@ -264,13 +264,13 @@ export const BorderSettingComponent = ({
                             borderLeft:
                                 selectedRange === 'left' ||
                                 selectedRange === 'all'
-                                    ? `${previewLineWidth}px ${borderStyle} ${color}`
+                                    ? `${previewLineWidth}px ${borderStyle} ${color.css()}`
                                     : 'none',
                             borderRight:
                                 selectedRange === 'inner' ||
                                 selectedRange === 'all' ||
                                 selectedRange === 'vertical'
-                                    ? `${previewLineWidth}px ${borderStyle} ${color}`
+                                    ? `${previewLineWidth}px ${borderStyle} ${color.css()}`
                                     : 'none',
                         }}
                     />
diff --git a/src/components/top-bar/content/index.tsx b/src/components/top-bar/content/index.tsx
index f1c1e341..bb276dfb 100644
--- a/src/components/top-bar/content/index.tsx
+++ b/src/components/top-bar/content/index.tsx
@@ -92,7 +92,6 @@ export const StartComponent = ({selectedData}: StartProps) => {
         const cellInfo = DATA_SERVICE.getCellInfo(sheet, row, col)
         cellInfo.then((c) => {
             if (isErrorMessage(c)) return
-            console.log('cell info', c)
             const style = c.getStyle()
             const alignment = style.alignment
             if (alignment) {
@@ -474,7 +473,14 @@ export const StartComponent = ({selectedData}: StartProps) => {
                 shouldCloseOnOverlayClick={true}
                 className={styles['modal-content']}
                 overlayClassName={styles['modal-overlay']}
-                style={{content: {top: '100px', left: '0px'}}}
+                onRequestClose={() => setBorderSettingOn(false)}
+                style={{
+                    content: {
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                    },
+                }}
                 ariaHideApp={false}
             >
                 <BorderSettingComponent
diff --git a/src/components/top-bar/content/preview-line.tsx b/src/components/top-bar/content/preview-line.tsx
index 5c233228..e1f95ebe 100644
--- a/src/components/top-bar/content/preview-line.tsx
+++ b/src/components/top-bar/content/preview-line.tsx
@@ -20,10 +20,11 @@ export const borderStyleNames = [
     // 'slantDashDot',
     'thick',
     'thin',
+    'none',
 ]
 
 export const PreviewLineComponent = ({style}: PreviewLineProps) => {
-    if (style === 'none') return <></>
+    if (style === 'none') return <div>(None)</div>
 
     return (
         <svg width="100%" height="10" xmlns="http://www.w3.org/2000/svg">