diff --git a/components/Layout/index.scss b/components/Layout/index.scss
new file mode 100644
index 00000000..b8403bc0
--- /dev/null
+++ b/components/Layout/index.scss
@@ -0,0 +1,15 @@
+.ToastViewport {
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  display: flex;
+  flex-direction: column;
+  width: 340px;
+  max-width: 100vw;
+  z-index: 2147483647;
+  padding: 25px;
+  gap: 10px;
+  margin: 0px;
+  list-style: none;
+  outline: none;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 66db9852..6cd24440 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,6 +10,7 @@ import { accountState } from '~utils/accountState'
 import setUserToken from '~utils/setUserToken'
 
 import '../styles/globals.scss'
+import { ToastProvider, Viewport } from '@radix-ui/react-toast'
 
 function MyApp({ Component, pageProps }: AppProps) {
   const accountCookie = getCookie('account')
@@ -43,9 +44,12 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ThemeProvider>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <ToastProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+        <Viewport className="ToastViewport" />
+      </ToastProvider>
     </ThemeProvider>
   )
 }