diff --git a/packages/frontend/component/src/ui/divider/divider.tsx b/packages/frontend/component/src/ui/divider/divider.tsx
index 6a35f88932..48793ed5f9 100644
--- a/packages/frontend/component/src/ui/divider/divider.tsx
+++ b/packages/frontend/component/src/ui/divider/divider.tsx
@@ -31,10 +31,7 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
           styles.divider,
           {
             [styles.verticalDivider]: orientation === 'vertical',
-            [styles.thinner]:
-              size === 'thinner' && orientation === 'horizontal',
-            [styles.verticalThinner]:
-              size === 'thinner' && orientation === 'vertical',
+            [styles.thinner]: size === 'thinner',
           },
           className
         )}
diff --git a/packages/frontend/component/src/ui/divider/style.css.ts b/packages/frontend/component/src/ui/divider/style.css.ts
index 9a928d039d..a20aa3f153 100644
--- a/packages/frontend/component/src/ui/divider/style.css.ts
+++ b/packages/frontend/component/src/ui/divider/style.css.ts
@@ -1,21 +1,19 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 export const divider = style({
-  height: '1px',
-  backgroundColor: cssVar('borderColor'),
-  borderRadius: '8px',
+  borderBottom: `1px solid ${cssVar('borderColor')}`,
+  height: 0,
   margin: '8px 0',
   width: '100%',
 });
-export const thinner = style({
-  height: '0.5px',
-});
+
 export const verticalDivider = style({
-  width: '1px',
-  borderRadius: '8px',
+  borderLeft: `1px solid ${cssVar('borderColor')}`,
+  width: 0,
   height: '100%',
   margin: '0 2px',
 });
-export const verticalThinner = style({
-  width: '0.5px',
+
+export const thinner = style({
+  borderWidth: '0.5px',
 });