diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index cb2327a0db..921753f2f0 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -58,7 +58,7 @@
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.22.3",
     "react-transition-state": "^2.1.1",
-    "sonner": "^1.4.41",
+    "sonner": "^1.7.0",
     "swr": "^2.2.5",
     "zod": "^3.22.4"
   },
diff --git a/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx b/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
index bf8a583e71..ce3e619be2 100644
--- a/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
+++ b/packages/frontend/component/src/ui/notification/mobile/notification-center.tsx
@@ -1,8 +1,11 @@
 import { Toaster } from 'sonner';
 
+import { sonner } from './styles.css';
+
 export function MobileNotificationCenter() {
   return (
     <Toaster
+      className={sonner}
       visibleToasts={1}
       position="top-center"
       style={{
diff --git a/packages/frontend/component/src/ui/notification/mobile/styles.css.ts b/packages/frontend/component/src/ui/notification/mobile/styles.css.ts
index 5f065d5f34..0242690ead 100644
--- a/packages/frontend/component/src/ui/notification/mobile/styles.css.ts
+++ b/packages/frontend/component/src/ui/notification/mobile/styles.css.ts
@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { keyframes, style } from '@vanilla-extract/css';
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
 
 import {
   cardBorderColor,
@@ -16,6 +16,14 @@ const expandIn = keyframes({
     maxWidth: '100vw',
   },
 });
+export const sonner = style({
+  left: '0 !important',
+});
+globalStyle(`${sonner} li[data-sonner-toast]`, {
+  width: 'fit-content !important',
+  margin: '0px auto',
+});
+
 export const toastRoot = style({
   width: 'fit-content',
   height: 44,
diff --git a/yarn.lock b/yarn.lock
index 812d629605..4d06676268 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -364,7 +364,7 @@ __metadata:
     react-paginate: "npm:^8.2.0"
     react-router-dom: "npm:^6.22.3"
     react-transition-state: "npm:^2.1.1"
-    sonner: "npm:^1.4.41"
+    sonner: "npm:^1.7.0"
     storybook: "npm:^8.2.9"
     swr: "npm:^2.2.5"
     typescript: "npm:^5.6.3"
@@ -30180,7 +30180,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sonner@npm:^1.4.41, sonner@npm:^1.5.0":
+"sonner@npm:^1.5.0, sonner@npm:^1.7.0":
   version: 1.7.0
   resolution: "sonner@npm:1.7.0"
   peerDependencies: