diff --git a/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ByTimeMode/GroupItem.tsx b/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ByTimeMode/GroupItem.tsx
index 10d1d141d3c6..47d6e7331ea8 100644
--- a/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ByTimeMode/GroupItem.tsx
+++ b/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ByTimeMode/GroupItem.tsx
@@ -9,10 +9,16 @@ import { GroupedTopic } from '@/types/topic';
 const preformat = (id: string) =>
   id.startsWith('20') ? (id.includes('-') ? dayjs(id).format('MMMM') : id) : undefined;
 
-const useStyles = createStyles(({ css, token, stylish }) => ({
+const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
     color: ${token.colorTextQuaternary};
-    ${stylish.blur}
+    background: ${token.colorBgLayout};
+    box-shadow: 0 3px 4px -2px ${token.colorBgLayout};
+
+    ${responsive.mobile} {
+      background: ${token.colorBgElevated};
+      box-shadow: 0 3px 4px -2px ${token.colorBgElevated};
+    }
   `,
 }));
 
@@ -22,7 +28,7 @@ const TopicGroupItem = memo<Omit<GroupedTopic, 'children'>>(({ id, title }) => {
   const timeTitle = preformat(id) ?? t(`groupTitle.byTime.${id}` as any);
 
   return (
-    <Flexbox className={styles.container} paddingBlock={8} paddingInline={12}>
+    <Flexbox className={styles.container} paddingBlock={'12px 8px'} paddingInline={12}>
       {title ? title : timeTitle}
     </Flexbox>
   );