diff --git a/components/nav/mobile/offcanvas.js b/components/nav/mobile/offcanvas.js
index fb084834..39a88b1e 100644
--- a/components/nav/mobile/offcanvas.js
+++ b/components/nav/mobile/offcanvas.js
@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { LoginButtons, LogoutDropdownItem, NavWalletSummary } from '../common'
 import AnonIcon from '@/svgs/spy-fill.svg'
 import styles from './footer.module.css'
+import canvasStyles from './offcanvas.module.css'
 import classNames from 'classnames'
 
 export default function OffCanvas ({ me, dropNavKey }) {
@@ -28,7 +29,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
     <>
       <MeImage onClick={handleShow} />
 
-      <Offcanvas style={{ maxWidth: '250px', zIndex: '10000' }} show={show} onHide={handleClose} placement='end'>
+      <Offcanvas className={canvasStyles.offcanvas} show={show} onHide={handleClose} placement='end'>
         <Offcanvas.Header closeButton>
           <Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
         </Offcanvas.Header>
diff --git a/components/nav/mobile/offcanvas.module.css b/components/nav/mobile/offcanvas.module.css
new file mode 100644
index 00000000..7417f675
--- /dev/null
+++ b/components/nav/mobile/offcanvas.module.css
@@ -0,0 +1,15 @@
+.offcanvas {
+    max-width: 250px;
+    z-index: 10000;
+    right: -100%;
+    animation: slide ease-out 0.2s;
+}
+
+@keyframes slide {
+    0% {
+        transform: translateX(100%);
+    }
+    100% {
+        transform: translateX(0%)
+    }
+}
\ No newline at end of file
diff --git a/components/toast.module.css b/components/toast.module.css
index 7bbecb18..a703811c 100644
--- a/components/toast.module.css
+++ b/components/toast.module.css
@@ -1,13 +1,27 @@
 .toastContainer {
   transform: translate3d(0, 0, 0);
+  display: grid;
 }
 
 .toast {
-  width: auto;
+  font-size: small;
+  width: fit-content;
+  justify-self: right;
   color: #fff;
+  bottom: -100%;
   border-width: 1px;
   border-style: solid;
   text-overflow: ellipsis;
+  animation: slide ease-out 0.2s;
+}
+
+@keyframes slide {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0%)
+  }
 }
 
 .success {
@@ -70,9 +84,3 @@
 .toastClose:hover {
   opacity: 0.7;
 }
-
-@media screen and (min-width: 400px) {
-  .toast {
-    width: var(--bs-toast-max-width);
-  }
-}
\ No newline at end of file