diff --git a/bun.lockb b/bun.lockb
index 09ad9a4..38f5a18 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index f5aecfe..7f1a60d 100644
--- a/package.json
+++ b/package.json
@@ -58,11 +58,11 @@
     "react-dom": "^18.2.0",
     "react-flatten-children": "^1.1.2",
     "react-hook-form": "^7.44.2",
-    "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.5.2",
     "react-router": "^6.10.0",
     "react-router-dom": "^6.10.0",
     "remeda": "^1.14.0",
+    "sonner": "^0.7.2",
     "use-sync-external-store": "^1.2.0",
     "viem": "^1.10.12",
     "zustand": "^4.3.8"
diff --git a/src/components/Toaster.css.ts b/src/components/Toaster.css.ts
new file mode 100644
index 0000000..914d1b7
--- /dev/null
+++ b/src/components/Toaster.css.ts
@@ -0,0 +1,38 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+import {
+  backgroundColorVars,
+  foregroundColorVars,
+  textColorForBackgroundColorVars,
+} from '~/design-system/styles/theme.css'
+import { fontFamily, fontSize, fontWeight } from '~/design-system/tokens'
+
+globalStyle(':root [data-sonner-toaster]', {
+  fontFamily: fontFamily.default,
+  vars: {
+    '--border-radius': '0',
+    '--initial-height': '60px',
+    '--normal-bg': `rgb(${backgroundColorVars['surface/secondary/elevated']})`,
+    '--normal-border': `rgb(${backgroundColorVars['surface/fill']})`,
+    '--normal-text': `rgb(${foregroundColorVars['text/primary']})`,
+    '--success-bg': `rgb(${backgroundColorVars['surface/greenTint']})`,
+    '--success-border': `rgb(${backgroundColorVars['surface/greenTint']})`,
+    '--success-text': `rgb(${textColorForBackgroundColorVars['surface/greenTint']})`,
+    '--error-bg': `rgb(${backgroundColorVars['surface/redTint']})`,
+    '--error-border': `rgb(${backgroundColorVars['surface/redTint']})`,
+    '--error-text': `rgb(${textColorForBackgroundColorVars['surface/redTint']})`,
+  },
+})
+
+globalStyle(':root [data-sonner-toaster] [data-styled=true]', {
+  padding: '8px',
+})
+
+globalStyle(':root [data-sonner-toaster] [data-title]', {
+  fontWeight: fontWeight.regular,
+  ...fontSize(true)['12px'],
+})
+
+globalStyle(':root [data-sonner-toaster] [data-icon]', {
+  display: 'none',
+})
diff --git a/src/components/Toaster.tsx b/src/components/Toaster.tsx
new file mode 100644
index 0000000..c219b97
--- /dev/null
+++ b/src/components/Toaster.tsx
@@ -0,0 +1,9 @@
+import { Toaster as Toaster_ } from 'sonner'
+
+import './Toaster.css'
+
+export function Toaster() {
+  return (
+    <Toaster_ closeButton expand={false} richColors position="top-center" />
+  )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index f9943be..0a6aa6c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -7,4 +7,5 @@ export { LabelledContent } from './LabelledContent'
 export { NetworkOfflineDialog } from './NetworkOfflineDialog'
 export { OnboardingContainer } from './OnboardingContainer'
 export { Progress } from './Progress'
+export { Toaster } from './Toaster'
 export { Tooltip } from './Tooltip'
diff --git a/src/components/toast/Error.tsx b/src/components/toast/Error.tsx
deleted file mode 100644
index ae83992..0000000
--- a/src/components/toast/Error.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Box, SFSymbol } from '~/design-system'
-
-import type { Toast } from 'react-hot-toast'
-
-export function ErrorToast({ message }: { message: Toast['message'] }) {
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      paddingHorizontal="12px"
-      paddingVertical="6px"
-      borderRadius="round"
-      backgroundColor={'surface/red@0.6'}
-    >
-      <Box paddingRight="4px">
-        <SFSymbol symbol="xmark" size="9px" />
-      </Box>
-      {/* message can be a render function or a simple string this syntax is required for type purposes */}
-      {typeof message === 'string' ? message : <>{message}</>}
-    </Box>
-  )
-}
diff --git a/src/components/toast/Loading.tsx b/src/components/toast/Loading.tsx
deleted file mode 100644
index 41f3b32..0000000
--- a/src/components/toast/Loading.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Box } from '~/design-system'
-
-import type { Toast } from 'react-hot-toast'
-import { Spinner } from '../svgs'
-
-export function LoadingToast({ message }: { message: Toast['message'] }) {
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      paddingHorizontal="12px"
-      paddingVertical="6px"
-      borderRadius="round"
-      backgroundColor={'separator/tertiary'}
-    >
-      <Box paddingRight="4px">
-        <Spinner size="12px" />
-      </Box>
-      {/* message can be a render function or a simple string this syntax is required for type purposes */}
-      {typeof message === 'string' ? message : <>{message}</>}
-    </Box>
-  )
-}
diff --git a/src/components/toast/Success.tsx b/src/components/toast/Success.tsx
deleted file mode 100644
index bb0de92..0000000
--- a/src/components/toast/Success.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Box, SFSymbol } from '~/design-system'
-
-import type { Toast } from 'react-hot-toast'
-
-export function SuccessToast({ message }: { message: Toast['message'] }) {
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      paddingHorizontal="12px"
-      paddingVertical="6px"
-      borderRadius="round"
-      backgroundColor={'surface/white'}
-    >
-      <Box paddingRight="4px">
-        <SFSymbol symbol="checkmark" size="9px" />
-      </Box>
-      {/*  */}
-      {typeof message === 'string' ? message : <>{message}</>}
-    </Box>
-  )
-}
diff --git a/src/screens/_layout.tsx b/src/screens/_layout.tsx
index d24f277..f0a1418 100644
--- a/src/screens/_layout.tsx
+++ b/src/screens/_layout.tsx
@@ -1,16 +1,10 @@
 import { useEffect } from 'react'
-import { Toaster } from 'react-hot-toast'
 import { Outlet, useNavigate } from 'react-router-dom'
 
+import { Header, NetworkOfflineDialog, Toaster } from '~/components'
 import { Box } from '~/design-system'
-import { useNetworkStore, usePendingRequestsStore } from '~/zustand'
-
-import { Header, NetworkOfflineDialog } from '~/components'
-
-import { ErrorToast } from '~/components/toast/Error'
-import { LoadingToast } from '~/components/toast/Loading'
-import { SuccessToast } from '~/components/toast/Success'
 import { useNetworkStatus } from '~/hooks/useNetworkStatus'
+import { useNetworkStore, usePendingRequestsStore } from '~/zustand'
 import { getMessenger } from '../messengers'
 import PendingRequest from './pending-request'
 
@@ -48,6 +42,7 @@ export default function Layout() {
         overflow: 'hidden',
       }}
     >
+      <Toaster />
       {showHeader && (
         <Box style={{ height: headerHeight }}>
           <Header isNetworkOffline={isNetworkOffline} />
@@ -67,28 +62,6 @@ export default function Layout() {
           height="full"
         >
           <Outlet />
-          <Toaster
-            children={(toast) => {
-              if (toast.type === 'success') {
-                return <SuccessToast message={toast.message} />
-              }
-
-              if (toast.type === 'error') {
-                return <ErrorToast message={toast.message} />
-              }
-
-              if (toast.type === 'loading') {
-                return <LoadingToast message={toast.message} />
-              }
-
-              // Custom Toast does have all styles and config just rendering would do fine.
-              if (toast.type === 'custom') {
-                return <>{toast.message}</>
-              }
-              // Default for any custom toasts
-              return <SuccessToast message={toast.message} />
-            }}
-          />
         </Box>
       </Box>
     </Box>