diff --git a/apps/site/app/api/post/route.ts b/apps/site/app/api/post/route.ts
index 28ae584ea..9ce2af581 100644
--- a/apps/site/app/api/post/route.ts
+++ b/apps/site/app/api/post/route.ts
@@ -1,9 +1,9 @@
-import { ethers } from "ethers"
-import { postGatewayABI, addresses } from "scrypt"
-import { Defender } from "@openzeppelin/defender-sdk"
-import { novaPubClient } from "@/config/publicClient"
-import { NextRequest } from "next/server"
-import { type Hex } from "viem"
+import { ethers } from 'ethers'
+import { postGatewayABI, addresses } from 'scrypt'
+import { Defender } from '@openzeppelin/defender-sdk'
+import { novaPubClient } from '@/config/publicClient'
+import { NextRequest } from 'next/server'
+import { type Hex } from 'viem'
 
 export async function POST(req: NextRequest) {
   const post = await req.json()
@@ -23,11 +23,11 @@ export async function POST(req: NextRequest) {
     const postGateway = new ethers.Contract(
       addresses.postGateway.nova,
       postGatewayABI,
-      signer as unknown as ethers.Signer 
+      signer as unknown as ethers.Signer,
     )
 
     const tx = await postGateway.post(post)
-    
+
     await novaPubClient.waitForTransactionReceipt({
       hash: tx.hash as Hex,
     })
diff --git a/apps/site/app/api/postBatch/route.ts b/apps/site/app/api/postBatch/route.ts
index 030e2379a..3926a914b 100644
--- a/apps/site/app/api/postBatch/route.ts
+++ b/apps/site/app/api/postBatch/route.ts
@@ -1,9 +1,9 @@
-import { ethers } from "ethers"
-import { postGatewayABI, addresses } from "scrypt"
-import { Defender } from "@openzeppelin/defender-sdk"
-import { NextRequest } from "next/server"
-import { novaPubClient } from "@/config/publicClient"
-import { type Hex } from "viem"
+import { ethers } from 'ethers'
+import { postGatewayABI, addresses } from 'scrypt'
+import { Defender } from '@openzeppelin/defender-sdk'
+import { NextRequest } from 'next/server'
+import { novaPubClient } from '@/config/publicClient'
+import { type Hex } from 'viem'
 
 export async function POST(req: NextRequest) {
   const postsArray = await req.json()
@@ -24,12 +24,12 @@ export async function POST(req: NextRequest) {
     const postGateway = new ethers.Contract(
       addresses.postGateway.nova,
       postGatewayABI,
-      signer as unknown as ethers.Signer
+      signer as unknown as ethers.Signer,
     )
 
     const tx = await postGateway.postBatch(postsArray)
     await novaPubClient.waitForTransactionReceipt({
-      hash: tx.hash as Hex ,
+      hash: tx.hash as Hex,
     })
 
     return new Response(JSON.stringify({ success: true, hash: tx.hash }), {
diff --git a/apps/site/app/layout.tsx b/apps/site/app/layout.tsx
index 7055776d0..504a80a03 100644
--- a/apps/site/app/layout.tsx
+++ b/apps/site/app/layout.tsx
@@ -1,7 +1,7 @@
 import { Header, ThemeToggle } from '@/client'
 import { Analytics } from '@vercel/analytics/react'
 import type { Metadata } from 'next'
-import { Toaster } from 'sonner'
+import { Toaster } from '@/design-system'
 import '../styles/globals.css'
 import { sfMono } from './fonts/fonts'
 import { Providers } from './providers/providers'
diff --git a/apps/site/components/client/AddMembersForm.tsx b/apps/site/components/client/AddMembersForm.tsx
index eacecf202..f554b7f4f 100644
--- a/apps/site/components/client/AddMembersForm.tsx
+++ b/apps/site/components/client/AddMembersForm.tsx
@@ -9,7 +9,6 @@ import {
   Input,
   Separator,
   Stack,
-  Toast,
   Typography,
 } from '@/design-system'
 import {
@@ -81,7 +80,7 @@ export function AddMembersForm({ targetChannelId }: AddMembersFormProps) {
 
   async function onSubmit(data: z.infer<typeof usernameSchema>) {
     // initialize bool for txn success check
-    let txSuccess: boolean = false
+    let txSuccess = false
     if (signMessage && embeddedWallet?.address && usernameId) {
       // txSuccess = await processEditChannelAccessPost({
       //   targetUserId: userId as bigint,
@@ -92,15 +91,15 @@ export function AddMembersForm({ targetChannelId }: AddMembersFormProps) {
       // })
     }
     if (txSuccess) {
-      toast.custom((t) => (
-        <Toast>
+      toast(
+        <>
           You added{' '}
           <span className="font-bold">{form.getValues().username}</span> to this
           channel
-        </Toast>
-      ))
+        </>,
+      )
     } else {
-      toast.custom((t) => <Toast>Error adding new member</Toast>)
+      toast('Error adding new member')
     }
   }
 
diff --git a/apps/site/components/client/ChannelDialog.tsx b/apps/site/components/client/ChannelDialog.tsx
index c94401122..f382ea08e 100644
--- a/apps/site/components/client/ChannelDialog.tsx
+++ b/apps/site/components/client/ChannelDialog.tsx
@@ -19,7 +19,6 @@ import {
   Separator,
   Stack,
   Textarea,
-  Toast,
   Typography,
   Loading,
 } from '@/design-system'
@@ -27,11 +26,8 @@ import {
   type NewChannelSchemaValues,
   newChannelSchema,
   processCreateChannelPost,
-  sendToDb,
-  w3sUpload,
 } from '@/lib'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { revalidatePath } from 'next/cache'
 import * as React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
@@ -82,17 +78,17 @@ export function ChannelDialog({ authenticated, login }: ChannelDialogProps) {
       setDialogOpen(false)
       if (txSuccess) {
         // Render a toast with the name of the channel
-        toast.custom((t) => (
-          <Toast>
+        toast(
+          <>
             {'Successfully created '}
             <span className="font-bold">{data.name}</span>
-          </Toast>
-        ))
+          </>,
+        )
         // Reset form fields to their initial values
         form.reset()
       } else {
         // Render a toast with error message
-        toast.custom((t) => <Toast>{'Error creating channel'}</Toast>)
+        toast('Error creating channel')
       }
     }
   }
diff --git a/apps/site/components/client/ItemDropdown.tsx b/apps/site/components/client/ItemDropdown.tsx
index afabc873e..45ed6ad90 100644
--- a/apps/site/components/client/ItemDropdown.tsx
+++ b/apps/site/components/client/ItemDropdown.tsx
@@ -7,7 +7,6 @@ import {
   DropdownMenuItem,
   DropdownMenuPortal,
   DropdownMenuTrigger,
-  Toast,
   Typography,
 } from '@/design-system'
 // import { processRemoveReferencePost } from '@/lib'
@@ -39,7 +38,7 @@ export function ItemDropdown({
                 disabled={!targetUserId}
                 onClick={async () => {
                   // initialize bool for txn success check
-                  let txSuccess: boolean = false
+                  let txSuccess = false
                   // Generate removeReference post
                   if (signMessage) {
                     // txSuccess = await processRemoveReferencePost({
@@ -49,11 +48,9 @@ export function ItemDropdown({
                     //   privySignMessage: signMessage,
                     // })
                     if (txSuccess) {
-                      toast.custom((t) => (
-                        <Toast>{'Item successfully removed'}</Toast>
-                      ))
+                      toast('Item successfully removed')
                     } else {
-                      ;<Toast>{'Error removing item'}</Toast>
+                      toast('Error removing item')
                     }
                   }
                 }}
diff --git a/apps/site/components/client/UsernameDialog.tsx b/apps/site/components/client/UsernameDialog.tsx
index 827ff4737..f32d23feb 100644
--- a/apps/site/components/client/UsernameDialog.tsx
+++ b/apps/site/components/client/UsernameDialog.tsx
@@ -13,7 +13,6 @@ import {
   Input,
   Separator,
   Stack,
-  Toast,
   Typography,
 } from '@/design-system'
 import {
@@ -21,22 +20,14 @@ import {
   checkUsernameAvailability,
   processRegisterFor,
   usernameSchema,
-  signForUsername,
 } from '@/lib'
 import { addresses } from 'scrypt'
-import { SignMessageModalUIOptions } from '@privy-io/react-auth'
 import { zodResolver } from '@hookform/resolvers/zod'
 import debounce from 'debounce'
 import React, { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Hex,
-  createWalletClient,
-  custom,
-  EIP1193Provider,
-  zeroAddress,
-} from 'viem'
+import { Hex, createWalletClient, custom, EIP1193Provider } from 'viem'
 import { arbitrumNova, optimism } from 'viem/chains'
 import { getExpiration } from 'scrypt'
 
@@ -83,47 +74,6 @@ export function UsernameDialog({ open, setOpen }: UsernameDialogProps) {
     }
   }, [validationComplete, watchUsername])
 
-  // async function registerUsername(
-  //   username: string,
-  //   privySignMessage: (
-  //     message: string,
-  //     uiOptions?: SignMessageModalUIOptions | undefined,
-  //   ) => Promise<string>, // Updated type
-  //   embeddedWalletAddress: string,
-  //   fetchUserData: () => Promise<void>,
-  // ) {
-  // Check if the necessary conditions are met using the passed parameters
-  //   if (privySignMessage && embeddedWalletAddress) {
-  //     const userId = await processRegisterFor({
-  //       privySignerAddress: embeddedWalletAddress,
-  //       privySignMessage: privySignMessage, // Pass the function
-  //       username: username,
-  //     })
-
-  //     if (userId) {
-  //       const success = await signForUsername(
-  //         String(userId),
-  //         username,
-  //         embeddedWalletAddress as Hex,
-  //         privySignMessage,
-  //       )
-  //       if (success) {
-  //         await fetchUserData()
-  //         return true // Indicate success
-  //       } else {
-  //         console.error('Failed to prepare and set username.')
-  //         return false // Handle failure here
-  //       }
-  //     } else {
-  //       console.log('User ID not obtained from processRegisterFor.')
-  //       return false // Indicate failure to obtain userId
-  //     }
-  //   } else {
-  //     console.log('Required conditions not met for registerUsername.')
-  //     return false // Indicate failure due to unmet conditions
-  //   }
-  // }
-
   return (
     <Dialog open={open}>
       <DialogContent className="sm:max-w-[425px]">
@@ -146,8 +96,7 @@ export function UsernameDialog({ open, setOpen }: UsernameDialogProps) {
                   name: 'River IdRegistry',
                   version: '1',
                   chainId: 10,
-                  verifyingContract:
-                    addresses.idRegistry.optimism, 
+                  verifyingContract: addresses.idRegistry.optimism,
                 } as const
                 const REGISTER_TYPE = [
                   { name: 'to', type: 'address' },
@@ -163,7 +112,7 @@ export function UsernameDialog({ open, setOpen }: UsernameDialogProps) {
                   message: {
                     to: embeddedWallet.address as Hex,
                     recovery: addresses.riverRecovery.optimism,
-                    nonce: BigInt(0), // this is assumes all wallets calling this have NO previous tx's
+                    nonce: BigInt(0), // assumes all wallets calling this have 0 previous transactions
                     deadline: deadline,
                   },
                 })
@@ -178,14 +127,14 @@ export function UsernameDialog({ open, setOpen }: UsernameDialogProps) {
                 // Close the dialog
                 setOpen(false)
                 // Render a toast
-                toast.custom((t) => (
-                  <Toast>
+                toast(
+                  <>
                     Welcome to River{' '}
                     <span className="font-bold">
                       {form.getValues().username}
                     </span>
-                  </Toast>
-                ))
+                  </>,
+                )
               }}
               className="w-full"
             >
diff --git a/apps/site/config/publicClient.ts b/apps/site/config/publicClient.ts
index ff9f82458..128acc7d7 100644
--- a/apps/site/config/publicClient.ts
+++ b/apps/site/config/publicClient.ts
@@ -2,7 +2,6 @@ import { http, createPublicClient } from 'viem'
 import { arbitrumNova } from './customChainConfig'
 import { optimism } from 'viem/chains'
 
-
 export const optimismPubClient = createPublicClient({
   chain: optimism,
   transport: http(process.env.NEXT_PUBLIC_OPTIMISM_RPC_URL),
diff --git a/apps/site/context/UserContext.tsx b/apps/site/context/UserContext.tsx
index 1a354cf81..afc8ac55e 100644
--- a/apps/site/context/UserContext.tsx
+++ b/apps/site/context/UserContext.tsx
@@ -21,16 +21,16 @@ const UserContext = createContext<{
     uiOptions?: SignMessageModalUIOptions,
   ) => Promise<string>
   userId?: bigint
-  authToken?: string | null 
+  authToken?: string | null
   username?: string
   fetchUserData?: () => Promise<void>
   clearUserData?: () => void
-}>({ authToken: null }) 
+}>({ authToken: null })
 
 export function UserContextComponent({ children }: { children: ReactNode }) {
   const [userId, setUserId] = useState<bigint>()
   const [username, setUsername] = useState<string>()
-  const [authToken, setAuthToken] = useState<string | null>(null) 
+  const [authToken, setAuthToken] = useState<string | null>(null)
 
   const { signMessage, getAccessToken } = usePrivy()
   const { wallets } = useWallets()
@@ -43,7 +43,7 @@ export function UserContextComponent({ children }: { children: ReactNode }) {
     if (!embeddedWallet) return
 
     const token = await getAccessToken()
-    setAuthToken(token) 
+    setAuthToken(token)
 
     const fetchedUserId = await getUserId({
       custodyAddress: embeddedWallet.address as Address,
diff --git a/apps/site/design-system/components/Toast.tsx b/apps/site/design-system/components/Toast.tsx
deleted file mode 100644
index 460985e29..000000000
--- a/apps/site/design-system/components/Toast.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Flex, Typography } from '@/design-system'
-import { ReactNode } from 'react'
-
-interface ToastProps {
-  children: ReactNode
-}
-
-export function Toast({ children }: ToastProps) {
-  return (
-    <Flex className="bg-background border-[0.5px] px-4 py-2">
-      <Typography className="font-mono">{children}</Typography>
-    </Flex>
-  )
-}
diff --git a/apps/site/design-system/components/Toaster.tsx b/apps/site/design-system/components/Toaster.tsx
new file mode 100644
index 000000000..725f07035
--- /dev/null
+++ b/apps/site/design-system/components/Toaster.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      toastOptions={{
+        // unstyled: true,
+        style: {
+          borderRadius: '0px',
+          padding: '8px 8px',
+          display: 'flex',
+          justifyContent: 'center',
+          boxShadow: 'none',
+          fontSize: '0.71875rem',
+        },
+        // @ts-ignore
+        classNames: {
+          toast:
+            'border-[0.5px] text-primary-foreground tracking-tight font-mono leading-[14px]',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/site/design-system/components/index.ts b/apps/site/design-system/components/index.ts
index 64a112d5a..a469d2d97 100644
--- a/apps/site/design-system/components/index.ts
+++ b/apps/site/design-system/components/index.ts
@@ -10,5 +10,5 @@ export * from './Popover'
 export * from './Separator'
 export * from './Table'
 export * from './Textarea'
-export * from './Toast'
+export * from './Toaster'
 export * from './Typography'
diff --git a/apps/site/lib/actions/revalidationHelper.ts b/apps/site/lib/actions/revalidationHelper.ts
index b8bca7a4f..09c67dbe2 100644
--- a/apps/site/lib/actions/revalidationHelper.ts
+++ b/apps/site/lib/actions/revalidationHelper.ts
@@ -2,6 +2,9 @@
 
 import { revalidatePath } from 'next/cache'
 
-export async function revalidationHelper(path: string, type?: 'page' | 'layout') {
+export async function revalidationHelper(
+  path: string,
+  type?: 'page' | 'layout',
+) {
   revalidatePath(path, type)
-}
\ No newline at end of file
+}
diff --git a/apps/site/lib/api.ts b/apps/site/lib/api.ts
index 092a697fa..3b2346b9a 100644
--- a/apps/site/lib/api.ts
+++ b/apps/site/lib/api.ts
@@ -27,7 +27,7 @@ type User = {
 // @ts-ignore
 BigInt.prototype.toJSON = function () {
   return this.toString()
-}    
+}
 
 export async function relayPost(post: Post) {
   const res = await fetch('/api/post', {
diff --git a/apps/site/lib/posts/processBatchCreateAddItemPost.ts b/apps/site/lib/posts/processBatchCreateAddItemPost.ts
index 8a04a7d92..74d660d00 100644
--- a/apps/site/lib/posts/processBatchCreateAddItemPost.ts
+++ b/apps/site/lib/posts/processBatchCreateAddItemPost.ts
@@ -8,7 +8,8 @@ import {
   generateMessageHash,
   encodeCreateAssetMsgBody,
   encodeAddItemMsgBody,
-  type Post
+  type Message,
+  type Post,
 } from 'scrypt'
 
 export async function processBatchCreateAddItemPost({
@@ -82,7 +83,7 @@ export async function processBatchCreateAddItemPost({
     sig: createItemSig,
   }
   // Create itemCid using canonical types
-  const itemCid = (await messageToCid(createItemPost.message)).cid.toString()  
+  const itemCid = (await messageToCid(createItemPost.message)).cid.toString()
   /*
   ADD ITEM POST
   */
@@ -116,7 +117,7 @@ export async function processBatchCreateAddItemPost({
     sig: addItemSig,
   }
 
-  try {   
+  try {
     const postBatchResponse = await relayPostBatch([
       createItemPost,
       addItemPost,
diff --git a/apps/site/package.json b/apps/site/package.json
index fb229adcd..1dd3e4d22 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -50,7 +50,7 @@
     "rich-markdown-editor": "^11.21.3",
     "scrypt": "workspace:*",
     "server-only": "^0.0.1",
-    "sonner": "^1.2.0",
+    "sonner": "^1.4.0",
     "tailwind-merge": "^1.14.0",
     "three": "^0.159.0",
     "ts-pattern": "^5.0.6",
diff --git a/apps/site/utils/index.ts b/apps/site/utils/index.ts
index f0441f457..6d6ffc057 100644
--- a/apps/site/utils/index.ts
+++ b/apps/site/utils/index.ts
@@ -3,4 +3,4 @@ export * from './pluralize'
 export * from './shortenAddress'
 export * from './truncateText'
 export * from './unixTimeConverter'
-export * from './ipfs'
\ No newline at end of file
+export * from './ipfs'
diff --git a/apps/site/utils/ipfs.ts b/apps/site/utils/ipfs.ts
index cd46b6ba8..52a32f7a6 100644
--- a/apps/site/utils/ipfs.ts
+++ b/apps/site/utils/ipfs.ts
@@ -1,12 +1,12 @@
-import * as dagCbor from "@ipld/dag-cbor";
-import * as Block from "multiformats/block";
-import { sha256 } from "multiformats/hashes/sha2";
-import { Message, Post } from "scrypt";
+import * as dagCbor from '@ipld/dag-cbor'
+import * as Block from 'multiformats/block'
+import { sha256 } from 'multiformats/hashes/sha2'
+import { Message, Post } from 'scrypt'
 
 export async function messageToCid(message: Message) {
-    return await Block.encode({ value: message, codec: dagCbor, hasher: sha256 })
+  return await Block.encode({ value: message, codec: dagCbor, hasher: sha256 })
 }
 
 export async function postToCid(post: Post) {
-    return await Block.encode({ value: post, codec: dagCbor, hasher: sha256 })
-}
\ No newline at end of file
+  return await Block.encode({ value: post, codec: dagCbor, hasher: sha256 })
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e5e91899..41c5143b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -194,8 +194,8 @@ importers:
         specifier: ^0.0.1
         version: 0.0.1
       sonner:
-        specifier: ^1.2.0
-        version: 1.2.0(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^1.4.0
+        version: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       tailwind-merge:
         specifier: ^1.14.0
         version: 1.14.0
@@ -12817,8 +12817,8 @@ packages:
       atomic-sleep: 1.0.0
     dev: false
 
-  /sonner@1.2.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-4bIPKrhF+Z4yEC4EZvNBswcVzMrUhztOQXqyIoiZqiqN1TT39FeK+TgRsQidvvztnYgOn4+S3LdAsri61c7ATA==}
+  /sonner@1.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-nvkTsIuOmi9e5Wz5If8ldasJjZNVfwiXYijBi2dbijvTQnQppvMcXTFNxL/NUFWlI2yJ1JX7TREDsg+gYm9WyA==}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0