diff --git a/src/app/(mobile-ui)/history/page.tsx b/src/app/(mobile-ui)/history/page.tsx
index 2555e3610..a44d3bee4 100644
--- a/src/app/(mobile-ui)/history/page.tsx
+++ b/src/app/(mobile-ui)/history/page.tsx
@@ -7,7 +7,7 @@ import * as utils from '@/utils'
 
 import NavHeader from '@/components/Global/NavHeader'
 import { PEANUT_API_URL } from '@/constants'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { IDashboardItem } from '@/interfaces'
 import { formatAmountWithSignificantDigits, printableAddress } from '@/utils'
 import { useInfiniteQuery } from '@tanstack/react-query'
diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx
index 62f6aac54..757780e36 100644
--- a/src/app/(mobile-ui)/home/page.tsx
+++ b/src/app/(mobile-ui)/home/page.tsx
@@ -6,8 +6,12 @@ import WalletHeader from '@/components/Global/WalletHeader'
 import { WalletCard } from '@/components/Home/WalletCard'
 import ProfileSection from '@/components/Profile/Components/ProfileSection'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
+import { useWalletConnection } from '@/hooks/wallet/useWalletConnection'
+import { WalletProviderType } from '@/interfaces'
+import { useAppDispatch } from '@/redux/hooks'
+import { walletActions } from '@/redux/slices/wallet-slice'
 import { getUserPreferences, updateUserPreferences } from '@/utils'
 import classNames from 'classnames'
 import { motion, useAnimation } from 'framer-motion'
@@ -19,28 +23,39 @@ const cardWidth = 300
 const cardMargin = 16
 
 export default function Home() {
+    const dispatch = useAppDispatch()
     const controls = useAnimation()
     const router = useRouter()
     const carouselRef = useRef<HTMLDivElement>(null)
+    const { connectWallet } = useWalletConnection()
 
     const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
         const prefs = getUserPreferences()
         return prefs?.balanceHidden ?? false
     })
 
-    const { addBYOW, username } = useAuth()
-    const { selectedWallet, wallets, isPeanutWallet, isConnected, setSelectedWallet } = useWallet()
+    const { username } = useAuth()
 
-    const hasWallets = wallets.length > 0
-    const { handleLogin, isLoggingIn } = useZeroDev()
-    const toast = useToast()
+    const { selectedWallet, wallets, isPeanutWallet, isConnected, setSelectedWallet, isWalletConnected } = useWallet()
 
+    // initialize focusedIndex to match selectedWalletIndex
     const rawIndex = wallets.findIndex((wallet) => wallet.address === selectedWallet?.address)
     const selectedWalletIndex = rawIndex === -1 ? 0 : rawIndex
+    const [focusedIndex, setFocusedIndex] = useState(selectedWalletIndex)
 
+    // update focusedIndex when selectedWallet changes
+    useEffect(() => {
+        const index = wallets.findIndex((wallet) => wallet.address === selectedWallet?.address)
+        if (index !== -1) {
+            setFocusedIndex(index)
+        }
+    }, [selectedWallet, wallets])
+
+    const hasWallets = wallets.length > 0
+    const { handleLogin, isLoggingIn } = useZeroDev()
+    const toast = useToast()
     const totalCards = hasWallets ? wallets.length + 1 : 1
 
-    // hide balance
     const handleToggleBalanceVisibility = (e: React.MouseEvent<HTMLButtonElement>) => {
         e.stopPropagation()
         setIsBalanceHidden((prev: boolean) => {
@@ -59,14 +74,55 @@ export default function Home() {
 
     const handleCardClick = (index: number) => {
         if (index < wallets.length) {
-            if (selectedWalletIndex === index) {
+            const wallet = wallets[index]
+
+            if (focusedIndex !== index) {
+                setFocusedIndex(index)
+                dispatch(walletActions.setFocusedWallet(wallet))
+                controls.start({
+                    x: -(index * (cardWidth + cardMargin)),
+                    transition: { type: 'spring', stiffness: 300, damping: 30 },
+                })
+
+                if (wallet.walletProviderType === WalletProviderType.PEANUT || isWalletConnected(wallet)) {
+                    setSelectedWallet(wallet)
+                }
+                return
+            }
+
+            if (focusedIndex === index) {
                 router.push('/wallet')
-            } else {
-                setSelectedWallet(wallets[index])
             }
         }
     }
 
+    const handleDragEnd = (_e: any, { offset, velocity }: any) => {
+        const swipe = Math.abs(offset.x) * velocity.x
+        let targetIndex = focusedIndex
+
+        if (swipe < -10000) {
+            targetIndex = Math.min(focusedIndex + 1, totalCards - 1)
+        } else if (swipe > 10000) {
+            targetIndex = Math.max(focusedIndex - 1, 0)
+        }
+
+        setFocusedIndex(targetIndex)
+
+        if (targetIndex < wallets.length) {
+            dispatch(walletActions.setFocusedWallet(wallets[targetIndex]))
+
+            const targetWallet = wallets[targetIndex]
+            if (targetWallet.walletProviderType === WalletProviderType.PEANUT || isWalletConnected(targetWallet)) {
+                setSelectedWallet(targetWallet)
+            }
+        }
+
+        controls.start({
+            x: -(targetIndex * (cardWidth + cardMargin)),
+            transition: { type: 'spring', stiffness: 300, damping: 30 },
+        })
+    }
+
     return (
         <div className="w-full">
             <div className="flex w-full flex-row justify-center overflow-hidden p-6">
@@ -117,43 +173,29 @@ export default function Home() {
                                     right: 0,
                                 }}
                                 dragElastic={0.2}
-                                onDragEnd={(_e, { offset, velocity }) => {
-                                    const swipe = Math.abs(offset.x) * velocity.x
-                                    if (swipe < -10000) {
-                                        const nextIndex = Math.min(selectedWalletIndex + 1, totalCards - 1)
-                                        if (nextIndex < wallets.length) {
-                                            setSelectedWallet(wallets[nextIndex])
-                                        }
-                                    } else if (swipe > 10000) {
-                                        const prevIndex = Math.max(selectedWalletIndex - 1, 0)
-                                        setSelectedWallet(wallets[prevIndex])
-                                    } else {
-                                        controls.start({
-                                            x: -(selectedWalletIndex * (cardWidth + cardMargin)),
-                                            transition: { type: 'spring', stiffness: 300, damping: 30 },
-                                        })
-                                    }
-                                }}
+                                onDragEnd={handleDragEnd}
                             >
-                                {wallets.map((wallet, index) => (
-                                    <WalletCard
-                                        key={wallet.address}
-                                        type="wallet"
-                                        wallet={wallet}
-                                        username={username ?? ''}
-                                        selected={selectedWalletIndex === index}
-                                        onClick={() => handleCardClick(index)}
-                                        index={index}
-                                        isBalanceHidden={isBalanceHidden}
-                                        onToggleBalanceVisibility={handleToggleBalanceVisibility}
-                                    />
-                                ))}
-
-                                <WalletCard type="add" onClick={addBYOW} />
+                                {!!wallets.length &&
+                                    wallets.map((wallet, index) => (
+                                        <WalletCard
+                                            key={wallet.address}
+                                            type="wallet"
+                                            wallet={wallet}
+                                            username={username ?? ''}
+                                            selected={selectedWalletIndex === index}
+                                            onClick={() => handleCardClick(index)}
+                                            index={index}
+                                            isBalanceHidden={isBalanceHidden}
+                                            onToggleBalanceVisibility={handleToggleBalanceVisibility}
+                                            isFocused={focusedIndex === index}
+                                        />
+                                    ))}
+
+                                <WalletCard type="add" onClick={connectWallet} />
                             </motion.div>
                         ) : (
                             <div className="flex h-full w-full flex-grow flex-col justify-center">
-                                <WalletCard type="add" onClick={addBYOW} />
+                                <WalletCard type="add" onClick={connectWallet} />
                             </div>
                         )}
                     </div>
diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx
index 82dc500f3..d187952ff 100644
--- a/src/app/(mobile-ui)/layout.tsx
+++ b/src/app/(mobile-ui)/layout.tsx
@@ -5,17 +5,17 @@ import { useToast } from '@/components/0_Bruddle/Toast'
 import Modal from '@/components/Global/Modal'
 import WalletNavigation from '@/components/Global/WalletNavigation'
 import HomeWaitlist from '@/components/Home/HomeWaitlist'
+import { ThemeProvider } from '@/config'
 import { peanutWalletIsInPreview } from '@/constants'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { useAppKit } from '@reown/appkit/react'
 import classNames from 'classnames'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
-import '../../styles/globals.bruddle.css'
-import { ThemeProvider } from '@/config'
+import '../../styles/globals.css'
 
 const publicPathRegex = /^\/(request\/pay|claim)/
 
diff --git a/src/app/(mobile-ui)/wallet/page.tsx b/src/app/(mobile-ui)/wallet/page.tsx
index 9b46cf2f6..68156240f 100644
--- a/src/app/(mobile-ui)/wallet/page.tsx
+++ b/src/app/(mobile-ui)/wallet/page.tsx
@@ -5,22 +5,25 @@ import { ArrowIcon, Button, Card } from '@/components/0_Bruddle'
 import Icon from '@/components/Global/Icon'
 import { HomeLink } from '@/components/Home/HomeLink'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
 import { WalletProviderType } from '@/interfaces'
+import { useWalletStore } from '@/redux/hooks'
 import { printableUsdc } from '@/utils'
 import { motion } from 'framer-motion'
 import Link from 'next/link'
 
 const WalletDetailsPage = () => {
-    const { selectedWallet } = useWallet()
+    const { focusedWallet, wallets } = useWalletStore()
     const { user } = useAuth()
-    const isActiveWalletPW = selectedWallet?.walletProviderType === WalletProviderType.PEANUT
-    const isActiveWalletBYOW = selectedWallet?.walletProviderType === WalletProviderType.BYOW
+
+    const walletDetails = wallets.find((wallet) => wallet.address === focusedWallet)
+
+    const isActiveWalletPW = walletDetails?.walletProviderType === WalletProviderType.PEANUT
+    const isActiveWalletBYOW = walletDetails?.walletProviderType === WalletProviderType.BYOW
 
     return (
         <div className="flex w-full flex-row justify-center gap-2">
             <div className="flex w-[100%] flex-col gap-4 sm:w-[90%] sm:gap-2 md:w-[70%] lg:w-[35%]">
-                {selectedWallet && (
+                {focusedWallet && (
                     <Card shadowSize="4" className="w-full rounded-md py-5">
                         <Card.Content className="flex h-full flex-row items-center justify-evenly">
                             <img src={smallPeanut.src} className="h-15 w-15 object-contain" />
@@ -31,7 +34,7 @@ const WalletDetailsPage = () => {
                             )}
                             {isActiveWalletBYOW && (
                                 <p className="text-xl sm:text-2xl">
-                                    <span className="font-bold">{selectedWallet.address}</span>.peanut.wallet
+                                    <span className="font-bold">{walletDetails.address}</span>.peanut.wallet
                                 </p>
                             )}
                         </Card.Content>
@@ -40,7 +43,7 @@ const WalletDetailsPage = () => {
 
                 <Card shadowSize="4" className="w-full rounded-md py-10">
                     <Card.Content className="flex h-full flex-row items-center justify-center">
-                        <div className="text-5xl">$ {printableUsdc(selectedWallet?.balance ?? 0n)}</div>
+                        <div className="text-5xl">$ {printableUsdc(walletDetails?.balance ?? 0n)}</div>
                     </Card.Content>
                 </Card>
                 <div className="flex flex-row gap-2">
diff --git a/src/app/(setup)/layout.tsx b/src/app/(setup)/layout.tsx
index 972e1c82b..ef56bf54e 100644
--- a/src/app/(setup)/layout.tsx
+++ b/src/app/(setup)/layout.tsx
@@ -5,7 +5,7 @@ import { useAppDispatch } from '@/redux/hooks'
 import { setupActions } from '@/redux/slices/setup-slice'
 import { useEffect } from 'react'
 import { setupSteps } from '../../components/Setup/Setup.consts'
-import '../../styles/globals.bruddle.css'
+import '../../styles/globals.css'
 
 const SetupLayout = ({ children }: { children?: React.ReactNode }) => {
     const dispatch = useAppDispatch()
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 00166390f..b2c652b46 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import { useState, useEffect } from 'react'
 import * as assets from '@/assets'
 import Layout from '@/components/Global/Layout'
-import { Hero, FAQs, Features, Mike, Story, BuildOnUs } from '@/components/LandingPage'
+import { BuildOnUs, FAQs, Features, Hero, Mike, Story } from '@/components/LandingPage'
 import { useFooterVisibility } from '@/context/footerVisibility'
+import { useEffect, useState } from 'react'
 
 export default function LandingPage() {
     const hero = {
@@ -154,7 +154,7 @@ export default function LandingPage() {
             <BuildOnUs />
             <Story marquee={story.marquee} />
             <Features sections={[features.sections[1]]} marquee={features.marquee} />
-            <div className="bg-pink-1">
+            <div className="bg-primary-1">
                 <Mike lines={mike.lines} />
             </div>
         </Layout>
diff --git a/src/assets/bg/peanut-bg.svg b/src/assets/bg/peanut-bg.svg
index ce64e2f71..baeaee111 100644
--- a/src/assets/bg/peanut-bg.svg
+++ b/src/assets/bg/peanut-bg.svg
@@ -1,4 +1,4 @@
-<svg width="1000" height="1000" viewBox="0 0 1000 1000" className="fill-pink-1" xmlns="http://www.w3.org/2000/svg">
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" className="fill-primary-1" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_5152_5029)">
 <path d="M199.697 218.926C190.19 222.815 172.973 217.39 166.007 208.333C157.589 197.554 146.85 187.429 132.309 182.837C101.768 173.262 85.8008 193.684 77.9358 221.089C70.6651 246.276 82.2307 267.814 112.773 277.389C127.259 281.966 141.398 281.348 152.779 276.744C162.286 272.855 179.502 278.28 186.469 287.337C194.818 298.155 207.114 307.016 221.654 311.608C252.196 321.183 280.932 308.068 285.916 282.326C290.901 256.584 270.231 227.911 239.689 218.335C225.148 213.743 211.023 214.307 199.697 218.926Z"  stroke="black" stroke-width="2" stroke-miterlimit="10"/>
 <path d="M835.026 475.247C824.76 475.607 810.484 464.56 807.081 453.653C802.911 440.628 796.339 427.413 784.285 418.074C758.941 398.524 736.895 412.161 720.035 435.153C704.5 456.269 707.9 480.478 733.243 500.028C745.252 509.334 758.732 513.646 771.002 513.263C781.268 512.904 795.544 523.95 798.947 534.857C803.038 547.896 811.509 560.464 823.563 569.802C848.906 589.353 880.406 586.988 893.988 564.56C907.57 542.132 898.096 508.079 872.752 488.529C860.698 479.19 847.251 474.832 835.026 475.247Z"  stroke="black" stroke-width="2" stroke-miterlimit="10"/>
diff --git a/src/components/0_Bruddle/Button.tsx b/src/components/0_Bruddle/Button.tsx
index 74b5c5cb5..da3b39a17 100644
--- a/src/components/0_Bruddle/Button.tsx
+++ b/src/components/0_Bruddle/Button.tsx
@@ -24,7 +24,7 @@ const buttonVariants: Record<ButtonVariant, string> = {
     'transparent-light': 'btn-transparent-light',
     'transparent-dark': 'btn-transparent-dark',
     green: 'bg-green-1',
-    yellow: 'bg-yellow-1',
+    yellow: 'bg-secondary-1',
 }
 
 const buttonSizes: Record<ButtonSize, string> = {
@@ -64,7 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref
     ) => {
         const buttonClasses = twMerge(
-            'btn w-full',
+            'btn w-full flex items-center gap-2',
             buttonVariants[variant],
             size && buttonSizes[size],
             shape === 'square' && 'btn-square',
diff --git a/src/components/0_Bruddle/Card.tsx b/src/components/0_Bruddle/Card.tsx
index 56e171bd9..049dce5ad 100644
--- a/src/components/0_Bruddle/Card.tsx
+++ b/src/components/0_Bruddle/Card.tsx
@@ -47,13 +47,13 @@ const Header = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivE
 )
 
 const Title = ({ children, className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h3 className={twMerge('text-h4 font-semibold sm:text-h3', className)} {...props}>
+    <h3 className={twMerge('pb-1 text-start text-h4 font-semibold sm:text-h3', className)} {...props}>
         {children}
     </h3>
 )
 
 const Description = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
-    <p className={twMerge('text-sm text-gray-600 dark:text-gray-400', className)} {...props}>
+    <p className={twMerge('text-start text-sm text-gray-600 dark:text-gray-400', className)} {...props}>
         {children}
     </p>
 )
diff --git a/src/components/0_Bruddle/Field.tsx b/src/components/0_Bruddle/Field.tsx
index 735b7291b..2427c58c8 100644
--- a/src/components/0_Bruddle/Field.tsx
+++ b/src/components/0_Bruddle/Field.tsx
@@ -1,10 +1,9 @@
 'use client'
 
-import Icon, { IconNameType } from '../Global/Icon'
-import { useFormContext } from 'react-hook-form'
 import classNames from 'classnames'
-import React from 'react'
-import { DetailedHTMLProps, InputHTMLAttributes, useState } from 'react'
+import React, { DetailedHTMLProps, InputHTMLAttributes, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import Icon, { IconNameType } from '../Global/Icon'
 import BaseInput from './BaseInput'
 
 type FieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
@@ -34,7 +33,7 @@ export const Field = React.forwardRef(
                                 {
                                     'pr-15': icon || type === 'password',
                                     '!border-green-1 pr-15': success,
-                                    '!border-pink-1 pr-15': error,
+                                    '!border-primary-1 pr-15': error,
                                 },
                                 className
                             )}
@@ -62,7 +61,7 @@ export const Field = React.forwardRef(
                         {(success || error) && (
                             <Icon
                                 className={`icon-20 pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 ${
-                                    success ? 'fill-green-1' : 'fill-pink-1'
+                                    success ? 'fill-green-1' : 'fill-primary-1'
                                 }`}
                                 name={success ? 'check-circle' : 'info-circle'}
                             />
diff --git a/src/components/0_Bruddle/Title.tsx b/src/components/0_Bruddle/Title.tsx
index a405eac60..fd6a45067 100644
--- a/src/components/0_Bruddle/Title.tsx
+++ b/src/components/0_Bruddle/Title.tsx
@@ -10,10 +10,10 @@ const Title = ({
 } & React.HTMLAttributes<HTMLParagraphElement>) => {
     return (
         <div className="relative inline-block">
-            <p className={twMerge('font-knerd-filled relative text-white', offset && 'translate-x-[3px]', className)}>
+            <p className={twMerge('relative font-knerd-filled text-white', offset && 'translate-x-[3px]', className)}>
                 {text}
             </p>
-            <p className={twMerge('font-knerd-outline absolute left-0 top-0', className)}>{text}</p>
+            <p className={twMerge('absolute left-0 top-0 font-knerd-outline', className)}>{text}</p>
         </div>
     )
 }
diff --git a/src/components/About/index.tsx b/src/components/About/index.tsx
index d7b1b7791..9d4c5bd58 100644
--- a/src/components/About/index.tsx
+++ b/src/components/About/index.tsx
@@ -1,6 +1,6 @@
 import * as assets from '@/assets'
-import { MarqueeComp } from '../Global/MarqueeWrapper'
 import { SmileStars } from '@/assets'
+import { MarqueeComp } from '../Global/MarqueeWrapper'
 
 const listItems = [
     {
@@ -20,7 +20,7 @@ const listItems = [
             { name: 'Lens', url: 'https://lenster.xyz/u/hugo0.lens' },
             { name: 'www', url: 'https://hugomontenegro.com/' },
         ],
-        bg: 'bg-purple-1',
+        bg: 'bg-primary-1',
     },
     {
         name: 'Konrad Urban',
@@ -37,7 +37,7 @@ const listItems = [
             { name: 'Lens', url: 'https://lenster.xyz/u/kkonrad.lens' },
             { name: 'www', url: 'https://kkonrad.com/' },
         ],
-        bg: 'bg-yellow-1',
+        bg: 'bg-secondary-1',
     },
     {
         name: '______ ______',
@@ -51,7 +51,7 @@ const listItems = [
             { name: 'dm us', url: 'https://www.peanut.to/jobs' },
             { name: 'jobs', url: '/jobs' },
         ],
-        bg: 'bg-pink-1',
+        bg: 'bg-primary-1',
     },
 ]
 
diff --git a/src/components/Cashout/CashoutStatus.tsx b/src/components/Cashout/CashoutStatus.tsx
index 9ccd28a3f..46a1c5385 100644
--- a/src/components/Cashout/CashoutStatus.tsx
+++ b/src/components/Cashout/CashoutStatus.tsx
@@ -1,11 +1,10 @@
 'use client'
-import { useEffect, useState } from 'react'
 import * as assets from '@/assets'
-import { generateKeysFromString } from '@squirrel-labs/peanut-sdk'
 import * as utils from '@/utils'
 import Link from 'next/link'
-import Icon from '../Global/Icon'
+import { useEffect, useState } from 'react'
 import { Card } from '../0_Bruddle'
+import Icon from '../Global/Icon'
 
 export const CashoutStatus = () => {
     const [cashoutStatus, setCashoutStatus] = useState<'FOUND' | 'NOT FOUND' | undefined>(undefined)
@@ -47,7 +46,7 @@ export const CashoutStatus = () => {
                 <Card.Title></Card.Title>
             </Card.Header>
             {cashoutStatus === 'FOUND' ? (
-                <div className="mx-auto flex max-w-[96%] flex-col items-center justify-center gap-4 pb-20 text-center">
+                <div className="mx-auto flex max-w-[96%] flex-col items-center justify-center gap-4 pb-20 text-start">
                     <label className="text-h2">Cashout status</label>
                     <div className="flex flex-col justify-center gap-3">
                         <label className="text-start text-h8 font-light">
diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx
index dbc74fd83..243107eef 100644
--- a/src/components/Cashout/Components/Initial.view.tsx
+++ b/src/components/Cashout/Components/Initial.view.tsx
@@ -13,8 +13,8 @@ import { MAX_CASHOUT_LIMIT, MIN_CASHOUT_LIMIT } from '@/components/Offramp/Offra
 import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
 import * as context from '@/context'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { balanceByToken, floorFixed, formatIban, printableUsdc, validateBankAccount } from '@/utils'
 import { formatBankAccountDisplay, sanitizeBankAccount } from '@/utils/format.utils'
 import { useAppKit } from '@reown/appkit/react'
@@ -262,13 +262,12 @@ export const InitialCashoutView = ({
             <Card className="shadow-none sm:shadow-primary-4">
                 <Card.Header>
                     <Card.Title>Cash Out</Card.Title>
-                    <Card.Description className="text-center">
+                    <Card.Description>
                         Cash out your crypto to your bank account. Works best with popular stablecoins and other
                         commonly traded tokens.
                     </Card.Description>
-                    <div className="mx-auto">
-                        <FAQComponent />
-                    </div>
+
+                    <FAQComponent />
                 </Card.Header>
                 <Card.Content className="col gap-2">
                     <TokenAmountInput
@@ -303,7 +302,10 @@ export const InitialCashoutView = ({
                         </>
                     )}
                     <div className="flex w-full flex-col justify-center gap-4">
-                        <RecipientInfoComponent />
+                        {!!user &&
+                            !!user.accounts.filter(
+                                (account) => account.account_type === 'iban' || account.account_type === 'us'
+                            ).length && <RecipientInfoComponent />}
                         <div className="space-y-4">
                             {!user && isFetchingUser ? (
                                 <div className="relative flex h-16 w-full items-center justify-center">
@@ -317,7 +319,7 @@ export const InitialCashoutView = ({
                                     {!!user.accounts.filter(
                                         (account) => account.account_type === 'iban' || account.account_type === 'us'
                                     ).length && (
-                                        <div className="flex w-full flex-col items-start justify-center gap-2 text-center">
+                                        <div className="flex w-full flex-col items-start justify-center gap-2">
                                             <label className="text-left text-h8 font-light">
                                                 Your linked bank accounts:
                                             </label>
@@ -332,7 +334,7 @@ export const InitialCashoutView = ({
                                                         className={twMerge(
                                                             'flex w-full items-center  justify-between text-nowrap border border-black p-2',
                                                             matchAccount(account, bankAccountNumber)
-                                                                ? 'bg-purple-1'
+                                                                ? 'bg-primary-1'
                                                                 : 'hover:bg-gray-100',
                                                             xchainAllowed && 'cursor-pointer',
                                                             !xchainAllowed && 'opacity-60'
@@ -344,7 +346,7 @@ export const InitialCashoutView = ({
                                                         <div className="flex flex-grow items-center overflow-hidden">
                                                             <Icon
                                                                 name={'bank'}
-                                                                className="mr-2 h-4 flex-shrink-0 fill-gray-1"
+                                                                className="mr-2 h-4 flex-shrink-0 fill-grey-1"
                                                             />
                                                             <label
                                                                 htmlFor={`bank-${index}`}
@@ -436,7 +438,7 @@ export const InitialCashoutView = ({
                         {!isConnected && !isPeanutWallet ? 'Connect Wallet' : isLoading ? loadingState : 'Proceed'}
                     </Button>
                     {errorState.showError && (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                     )}
@@ -452,7 +454,7 @@ export const InitialCashoutView = ({
                         </span>
                     )}
                     {!xchainAllowed && (
-                        <span className=" text-h8 font-normal ">
+                        <span className="text-start text-h8 font-normal">
                             <Icon name="warning" className="-mt-0.5" /> You cannot cashout on this chain.
                         </span>
                     )}
diff --git a/src/components/Claim/Claim.tsx b/src/components/Claim/Claim.tsx
index b1adc34b2..9cd56f240 100644
--- a/src/components/Claim/Claim.tsx
+++ b/src/components/Claim/Claim.tsx
@@ -6,7 +6,7 @@ import useClaimLink from './useClaimLink'
 import * as assets from '@/assets'
 import * as consts from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import * as interfaces from '@/interfaces'
 import * as utils from '@/utils'
 import PageContainer from '../0_Bruddle/PageContainer'
diff --git a/src/components/Claim/Generic/AlreadyClaimed.view.tsx b/src/components/Claim/Generic/AlreadyClaimed.view.tsx
index d394af740..890616bc8 100644
--- a/src/components/Claim/Generic/AlreadyClaimed.view.tsx
+++ b/src/components/Claim/Generic/AlreadyClaimed.view.tsx
@@ -21,16 +21,16 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
     return (
         <Card className="shadow-none sm:shadow-primary-4">
             <Card.Header>
-                <Card.Title>Payment Receipt</Card.Title>
+                <Card.Title className="mx-auto text-center">Payment Receipt</Card.Title>
                 <Card.Description></Card.Description>
             </Card.Header>
             <Card.Content className="flex flex-col gap-2">
                 {dataAvailable && (
-                    <div className="flex w-full flex-col items-center justify-center gap-2">
-                        <label className="text-h8 ">This link previously contained:</label>
+                    <div className="flex w-full flex-col items-start justify-center gap-2 py-2">
+                        <label className="text-h8">This link previously contained:</label>
                         {tokenSymbolAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
-                                <div className="flex w-max  flex-row items-center justify-center gap-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 text-h8  text-grey-1">
+                                <div className="flex w-max flex-row items-center justify-center gap-1 px-2">
                                     <label className="font-bold">Token</label>
                                 </div>
                                 <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -39,7 +39,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                             </div>
                         )}
                         {tokenAmountAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8  text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Amount</label>
                                 </div>
@@ -49,7 +49,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                             </div>
                         )}
                         {chainAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8  text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Chain</label>
                                 </div>
@@ -67,7 +67,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                             </div>
                         )}
                         {senderAddressAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8  text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Sender</label>
                                 </div>
@@ -78,7 +78,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                         )}
                     </div>
                 )}
-                <label className="text-center text-h9 font-normal">
+                <label className="text-start text-h9 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a
                         className="cursor-pointer text-black underline dark:text-white"
diff --git a/src/components/Claim/Generic/NotFound.view.tsx b/src/components/Claim/Generic/NotFound.view.tsx
index 2254b0d3f..ec340e629 100644
--- a/src/components/Claim/Generic/NotFound.view.tsx
+++ b/src/components/Claim/Generic/NotFound.view.tsx
@@ -1,31 +1,28 @@
 'use client'
 
-import * as _consts from '../Claim.consts'
-import { useRouter } from 'next/navigation'
-import { Button, Card } from '@/components/0_Bruddle'
+import { Card } from '@/components/0_Bruddle'
 import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 
 export const NotFoundClaimLink = () => {
-    const router = useRouter()
-
     return (
-        <Card className="shadow-none sm:shadow-primary-4">
-            <Card.Header>
-                <Card.Title>Sorryyy</Card.Title>
-                <Card.Description>Deposit not found. Are you sure your link is correct?</Card.Description>
+        <Card className="space-y-3 shadow-none sm:shadow-primary-4">
+            <Card.Header className="mx-auto space-y-2">
+                <Card.Title className="mx-auto text-center">Sorryyy</Card.Title>
+                <Card.Description className="mx-auto text-center">
+                    This link is malformed. Are you sure you copied it correctly?
+                </Card.Description>
             </Card.Header>
-            <Card.Content>
-                <label className="text-h9 font-normal">
-                    We would like to hear from your experience. Hit us up on{' '}
-                    <a
-                        className="cursor-pointer text-black underline dark:text-white"
-                        target="_blank"
-                        href="https://discord.gg/BX9Ak7AW28"
-                    >
+            <Card.Content className="mx-auto space-y-2 text-center">
+                <div className="block text-h8 font-normal">
+                    Deposit not found. Are you sure your link is correct?
+                    <a className="text-link-decoration" target="_blank" href="https://discord.gg/BX9Ak7AW28">
                         Discord!
                     </a>
-                </label>
-                <PaymentsFooter />
+                </div>
+
+                <div className="w-full">
+                    <PaymentsFooter />
+                </div>
             </Card.Content>
         </Card>
     )
diff --git a/src/components/Claim/Generic/SenderClaim.view.tsx b/src/components/Claim/Generic/SenderClaim.view.tsx
index 0ed79fe36..1eea2f3f5 100644
--- a/src/components/Claim/Generic/SenderClaim.view.tsx
+++ b/src/components/Claim/Generic/SenderClaim.view.tsx
@@ -3,7 +3,7 @@
 import { Button, Card } from '@/components/0_Bruddle'
 import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import * as interfaces from '@/interfaces'
 import * as utils from '@/utils'
 import { useContext, useState } from 'react'
@@ -68,9 +68,9 @@ export const SenderClaimLinkView = ({
 
     return (
         <Card className="shadow-none sm:shadow-primary-4">
-            <Card.Header>
-                <Card.Title>Hello, {utils.shortenAddress(address ?? '')}</Card.Title>
-                <Card.Description>
+            <Card.Header className="mx-auto text-center">
+                <Card.Title className="text-center">Hello, {utils.shortenAddress(address ?? '')}</Card.Title>
+                <Card.Description className="text-center">
                     This is a link that you have created. You can refund it or go to the recipient view.
                 </Card.Description>
             </Card.Header>
@@ -82,7 +82,7 @@ export const SenderClaimLinkView = ({
                     Go to recipient view
                 </Button>
                 {errorState.showError && (
-                    <div className="text-center">
+                    <div className="text-start">
                         <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                     </div>
                 )}
diff --git a/src/components/Claim/Generic/WrongPassword.view.tsx b/src/components/Claim/Generic/WrongPassword.view.tsx
index 19e54cba6..557c36825 100644
--- a/src/components/Claim/Generic/WrongPassword.view.tsx
+++ b/src/components/Claim/Generic/WrongPassword.view.tsx
@@ -1,25 +1,28 @@
 'use client'
 
-import * as _consts from '../Claim.consts'
+import { Card } from '@/components/0_Bruddle'
 
 import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 
 export const WrongPasswordClaimLink = () => {
     return (
-        <div className="flex w-full flex-col items-center justify-center gap-6 text-center">
-            <div className="space-y-2">
-                <h2 className="text-h2">Sorryyy</h2>
-                <div className="">This link is malformed. Are you sure you copied it correctly?</div>
-            </div>
+        <Card className="space-y-3 shadow-none sm:shadow-primary-4">
+            <Card.Header className="space-y-2">
+                <Card.Title>Sorryyy</Card.Title>
+                <Card.Description>This link is malformed. Are you sure you copied it correctly?</Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-2 text-start">
+                <div className="block text-h8 font-normal">
+                    We would like to hear from your experience. Hit us up on{' '}
+                    <a className="text-link-decoration" target="_blank" href="https://discord.gg/BX9Ak7AW28">
+                        Discord!
+                    </a>
+                </div>
 
-            <label className="text-h8 font-normal">
-                We would like to hear from your experience. Hit us up on{' '}
-                <a className="text-link-decoration" target="_blank" href="https://discord.gg/BX9Ak7AW28">
-                    Discord!
-                </a>
-            </label>
-
-            <PaymentsFooter />
-        </div>
+                <div className="w-full">
+                    <PaymentsFooter />
+                </div>
+            </Card.Content>
+        </Card>
     )
 }
diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx
index 228d5a85d..1be545ba8 100644
--- a/src/components/Claim/Link/Initial.view.tsx
+++ b/src/components/Claim/Link/Initial.view.tsx
@@ -20,7 +20,7 @@ import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
 import { TOOLTIPS } from '@/constants/tooltips'
 import * as context from '@/context'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import {
     areEvmAddressesEqual,
     checkifImageType,
@@ -439,7 +439,7 @@ export const InitialClaimLinkView = ({
             <FlowHeader />
             <Card className="shadow-none sm:shadow-primary-4">
                 <Card.Header>
-                    <Card.Title className="mx-auto">
+                    <Card.Title>
                         <div className="flex w-full flex-col items-center justify-center gap-2">
                             <AddressLink address={claimLinkData.senderAddress} /> sent you
                             {tokenPrice ? (
@@ -469,7 +469,7 @@ export const InitialClaimLinkView = ({
                                             href={attachment.attachmentUrl}
                                             download
                                             target="_blank"
-                                            className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
+                                            className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline "
                                         >
                                             <Icon name={'download'} />
                                             Download attachment
@@ -516,9 +516,9 @@ export const InitialClaimLinkView = ({
                     {recipient && isValidRecipient && recipientType !== 'iban' && recipientType !== 'us' && (
                         <div className="flex w-full flex-col items-center justify-center gap-2">
                             {selectedRoute && (
-                                <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                                <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                                     <div className="flex w-max flex-row items-center justify-center gap-1">
-                                        <Icon name={'forward'} className="h-4 fill-gray-1" />
+                                        <Icon name={'forward'} className="h-4 fill-grey-1" />
                                         <label className="font-bold">Route</label>
                                     </div>
                                     <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -533,7 +533,7 @@ export const InitialClaimLinkView = ({
                                                                 chain.chainId === selectedRoute.route.params.fromChain
                                                         )?.name
                                                     }
-                                                    <Icon name={'arrow-next'} className="h-4 fill-gray-1" />{' '}
+                                                    <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '}
                                                     {
                                                         supportedSquidChainsAndTokens[
                                                             selectedRoute.route.params.toChain
@@ -559,9 +559,9 @@ export const InitialClaimLinkView = ({
                                 </div>
                             )}
 
-                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
-                                    <Icon name={'gas'} className="h-4 fill-gray-1" />
+                                    <Icon name={'gas'} className="h-4 fill-grey-1" />
                                     <label className="font-bold">Fees</label>
                                 </div>
                                 <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -575,14 +575,14 @@ export const InitialClaimLinkView = ({
                                 </span>
                             </div>
                             {/* TODO: correct points estimation
-                        <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                        <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                             <div className="flex w-max flex-row items-center justify-center gap-1">
-                                <Icon name={'plus-circle'} className="h-4 fill-gray-1" />
+                                <Icon name={'plus-circle'} className="h-4 fill-grey-1" />
                                 <label className="font-bold">Points</label>
                             </div>
-                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
-                                    <Icon name={'gas'} className="h-4 fill-gray-1" />
+                                    <Icon name={'gas'} className="h-4 fill-grey-1" />
                                     <label className="font-bold">Fees</label>
                                 </div>
                                 <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -597,9 +597,9 @@ export const InitialClaimLinkView = ({
                             </div>
 
                             {/* TODO: correct points estimation
-                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
-                                    <Icon name={'plus-circle'} className="h-4 fill-gray-1" />
+                                    <Icon name={'plus-circle'} className="h-4 fill-grey-1" />
                                     <label className="font-bold">Points</label>
                                 </div>
                                 <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -662,7 +662,7 @@ export const InitialClaimLinkView = ({
                             </div>
                         )}
                         {errorState.showError && (
-                            <div className="text-center">
+                            <div className="text-start">
                                 {errorState.errorMessage === 'offramp unavailable' ? (
                                     <label className="text-h8 font-normal text-red">
                                         You can not claim this token to your bank account.{' '}
diff --git a/src/components/Claim/Link/Onchain/Confirm.view.tsx b/src/components/Claim/Link/Onchain/Confirm.view.tsx
index eafb9cebe..cccb3c600 100644
--- a/src/components/Claim/Link/Onchain/Confirm.view.tsx
+++ b/src/components/Claim/Link/Onchain/Confirm.view.tsx
@@ -6,7 +6,7 @@ import Icon from '@/components/Global/Icon'
 import MoreInfo from '@/components/Global/MoreInfo'
 import * as consts from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import * as utils from '@/utils'
 import { useContext, useState } from 'react'
 import * as _consts from '../../Claim.consts'
@@ -114,10 +114,10 @@ export const ConfirmClaimLinkView = ({
         <div>
             <FlowHeader onPrev={onPrev} disableBackBtn={isLoading} />
             <Card>
-                <Card.Header className="mx-auto text-center">
-                    <Card.Title className="mx-auto text-center">
+                <Card.Header>
+                    <Card.Title>
                         <AddressLink address={claimLinkData.senderAddress} /> <br /> sent you{' '}
-                        <label className="text-center text-h2">
+                        <label className="text-start text-h2">
                             {claimLinkData.tokenAmount} {claimLinkData.tokenSymbol} <br /> on{' '}
                             {supportedSquidChainsAndTokens[claimLinkData.chainId]?.axelarChainName}
                         </label>
@@ -137,7 +137,7 @@ export const ConfirmClaimLinkView = ({
                                         href={attachment.attachmentUrl}
                                         download
                                         target="_blank"
-                                        className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
+                                        className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline "
                                     >
                                         <Icon name={'download'} />
                                         Download attachment
@@ -180,9 +180,9 @@ export const ConfirmClaimLinkView = ({
 
                     <div className="flex w-full flex-col items-center justify-center gap-2">
                         {selectedRoute && (
-                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
-                                    <Icon name={'forward'} className="h-4 fill-gray-1" />
+                                    <Icon name={'forward'} className="h-4 fill-grey-1" />
                                     <label className="font-bold">Route</label>
                                 </div>
                                 <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -193,7 +193,7 @@ export const ConfirmClaimLinkView = ({
                                                     (chain) => chain.chainId === selectedRoute.route.params.fromChain
                                                 )?.name
                                             }
-                                            <Icon name={'arrow-next'} className="h-4 fill-gray-1" />{' '}
+                                            <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '}
                                             {
                                                 supportedSquidChainsAndTokens[selectedRoute.route.params.toChain]
                                                     ?.axelarChainName
@@ -215,9 +215,9 @@ export const ConfirmClaimLinkView = ({
                             </div>
                         )}
 
-                        <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                        <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                             <div className="flex w-max flex-row items-center justify-center gap-1">
-                                <Icon name={'gas'} className="h-4 fill-gray-1" />
+                                <Icon name={'gas'} className="h-4 fill-grey-1" />
                                 <label className="font-bold">Fees</label>
                             </div>
                             <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -226,9 +226,9 @@ export const ConfirmClaimLinkView = ({
                         </div>
 
                         {/* TODO: correct points estimation
-                    <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                    <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                         <div className="flex w-max flex-row items-center justify-center gap-1">
-                            <Icon name={'plus-circle'} className="h-4 fill-gray-1" />
+                            <Icon name={'plus-circle'} className="h-4 fill-grey-1" />
                             <label className="font-bold">Points</label>
                         </div>
                     <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -251,7 +251,7 @@ export const ConfirmClaimLinkView = ({
                         </Button>
 
                         {errorState.showError && (
-                            <div className="text-center">
+                            <div className="text-start">
                                 <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                             </div>
                         )}
diff --git a/src/components/Claim/Link/Onchain/Success.view.tsx b/src/components/Claim/Link/Onchain/Success.view.tsx
index 83c680b08..f2c4c6633 100644
--- a/src/components/Claim/Link/Onchain/Success.view.tsx
+++ b/src/components/Claim/Link/Onchain/Success.view.tsx
@@ -2,7 +2,7 @@ import { Button, Card } from '@/components/0_Bruddle'
 import Icon from '@/components/Global/Icon'
 import { fetchDestinationChain } from '@/components/utils/utils'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import * as utils from '@/utils'
 import Link from 'next/link'
 import { useContext, useEffect, useMemo, useState } from 'react'
@@ -60,14 +60,12 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _
 
     return (
         <Card className="shadow-none sm:shadow-primary-4">
-            <Card.Header className="mx-auto">
-                <Card.Title className="mx-auto text-center">Yay!</Card.Title>
-                <Card.Description className="mx-auto text-center">
-                    You have successfully claimed your funds!
-                </Card.Description>
+            <Card.Header>
+                <Card.Title>Yay!</Card.Title>
+                <Card.Description>You have successfully claimed your funds!</Card.Description>
             </Card.Header>
             <Card.Content className="flex flex-col gap-2">
-                <label className="text-center text-h8 font-normal text-gray-1">Transaction details</label>
+                <label className="text-start text-h8 font-normal text-grey-1">Transaction details</label>
                 {type === 'claimxchain' && (
                     <div className="flex flex-col items-start justify-center gap-1 text-h9  font-normal">
                         <div className="flex w-full flex-row items-center justify-between gap-1">
@@ -101,7 +99,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _
                 <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}>
                     <Button variant="dark">
                         Transaction hash
-                        <Icon name="external" className="h-4 fill-gray-1" />
+                        <Icon name="external" className="h-4 fill-grey-1" />
                     </Button>
                 </Link>
                 <Link className="" href={'/profile'}>
@@ -112,7 +110,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _
                         See your payments.
                     </Button>
                 </Link>
-                <label className="text-center text-h9 font-normal">
+                <label className="text-start text-h9 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a
                         className="cursor-pointer text-black underline dark:text-white"
diff --git a/src/components/Claim/useClaimLink.tsx b/src/components/Claim/useClaimLink.tsx
index 10b10aa65..136335fa6 100644
--- a/src/components/Claim/useClaimLink.tsx
+++ b/src/components/Claim/useClaimLink.tsx
@@ -7,7 +7,7 @@ import { useSwitchChain } from 'wagmi'
 
 import * as consts from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import * as utils from '@/utils'
 
 export const useClaimLink = () => {
diff --git a/src/components/Create/Components/RecentRecipients.tsx b/src/components/Create/Components/RecentRecipients.tsx
index 86e75a1eb..371f1cf9b 100644
--- a/src/components/Create/Components/RecentRecipients.tsx
+++ b/src/components/Create/Components/RecentRecipients.tsx
@@ -15,7 +15,7 @@ const RecentRecipients = ({ recentRecipients, onClick, isLoading }: RecentRecipi
                 {[0, 1, 2].map((idx) => (
                     <div
                         key={idx}
-                        className="flex h-10 w-full flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-n-3/10"
+                        className="flex h-10 w-full flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-grey-1/10"
                     >
                         <div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7">
                             <div className="flex flex-row items-center justify-start gap-2">
@@ -38,7 +38,7 @@ const RecentRecipients = ({ recentRecipients, onClick, isLoading }: RecentRecipi
                 {recentRecipients.map((recipient) => (
                     <div
                         key={recipient.address}
-                        className="flex h-10 w-full cursor-pointer flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-n-3/10"
+                        className="flex h-10 w-full cursor-pointer flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-grey-1/10"
                         onClick={() => onClick(recipient.address)}
                     >
                         <div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7">
diff --git a/src/components/Create/Create.tsx b/src/components/Create/Create.tsx
index 8b03c7726..98345fb11 100644
--- a/src/components/Create/Create.tsx
+++ b/src/components/Create/Create.tsx
@@ -4,7 +4,7 @@ import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
 import { createElement, Suspense, useContext, useEffect, useState } from 'react'
 
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import * as utils from '@/utils'
 import PageContainer from '../0_Bruddle/PageContainer'
 import * as _consts from './Create.consts'
diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx
index 32813aca6..ca50a29c3 100644
--- a/src/components/Create/Link/Confirm.view.tsx
+++ b/src/components/Create/Link/Confirm.view.tsx
@@ -9,8 +9,8 @@ import Icon from '@/components/Global/Icon'
 import MoreInfo from '@/components/Global/MoreInfo'
 import { peanutTokenDetails, supportedPeanutChains } from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
 import { useWalletType } from '@/hooks/useWalletType'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import {
     areEvmAddressesEqual,
     ErrorHandler,
@@ -239,17 +239,14 @@ export const CreateLinkConfirmView = ({
 
             <Card className="shadow-none sm:shadow-primary-4">
                 <Card.Header>
-                    <Card.Title
-                        style={{ display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}
-                        className="text-center"
-                    >
+                    <Card.Title style={{ display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}>
                         {createType == 'link'
                             ? 'Text Tokens'
                             : createType == 'direct'
                               ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : printableAddress(recipient.address ?? '')}`
                               : `Send to ${recipient.name}`}
                     </Card.Title>
-                    <Card.Description className="text-center">
+                    <Card.Description>
                         {createType === 'link' &&
                             'Make a payment with the link. Send the link to the recipient. They will be able to claim the funds in any token on any chain from the link.'}
                         {createType === 'email_link' &&
@@ -274,35 +271,35 @@ export const CreateLinkConfirmView = ({
 
                     <div className="flex w-full flex-col items-center justify-center gap-2">
                         {attachmentOptions.fileUrl && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
-                                    <Icon name={'paperclip'} className="h-4 fill-gray-1" />
+                                    <Icon name={'paperclip'} className="h-4 fill-grey-1" />
                                     <label className="font-bold">Attachment</label>
                                 </div>
                                 <a href={attachmentOptions.fileUrl} download target="_blank">
-                                    <Icon name={'download'} className="h-4 fill-gray-1" />
+                                    <Icon name={'download'} className="h-4 fill-grey-1" />
                                 </a>
                             </div>
                         )}
                         {attachmentOptions.message && (
                             <div className="flex w-full flex-col items-center justify-center gap-1">
                                 <div
-                                    className="flex w-full  flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"
+                                    className="flex w-full  flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"
                                     onClick={() => {
                                         setShowMessage(!showMessage)
                                     }}
                                 >
                                     <div className="flex w-max flex-row items-center justify-center gap-1">
-                                        <Icon name={'paperclip'} className="h-4 fill-gray-1 " />
+                                        <Icon name={'paperclip'} className="h-4 fill-grey-1 " />
                                         <label className=" font-bold">Message</label>
                                     </div>
                                     <Icon
                                         name={'arrow-bottom'}
-                                        className={`h-4 cursor-pointer fill-gray-1 transition-transform ${showMessage && ' rotate-180'}`}
+                                        className={`h-4 cursor-pointer fill-grey-1 transition-transform ${showMessage && ' rotate-180'}`}
                                     />
                                 </div>
                                 {showMessage && (
-                                    <div className="flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8 text-gray-1">
+                                    <div className="flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8 text-grey-1">
                                         <label className="w-full text-start text-sm font-normal leading-4">
                                             {attachmentOptions.message}
                                         </label>
@@ -311,9 +308,9 @@ export const CreateLinkConfirmView = ({
                             </div>
                         )}
                         {transactionCostUSD !== undefined && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
-                                    <Icon name={'gas'} className="h-4 fill-gray-1" />
+                                    <Icon name={'gas'} className="h-4 fill-grey-1" />
                                     <label className="font-bold">Network cost</label>
                                 </div>
                                 <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -333,9 +330,9 @@ export const CreateLinkConfirmView = ({
                             </div>
                         )}
                     </div>
-                    {/* <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                    {/* <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                     <div className="flex w-max flex-row items-center justify-center gap-1">
-                        <Icon name={'plus-circle'} className="h-4 fill-gray-1" />
+                        <Icon name={'plus-circle'} className="h-4 fill-grey-1" />
                         <label className="font-bold">Points</label>
                     </div>
                     <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -360,14 +357,14 @@ export const CreateLinkConfirmView = ({
                         </Button>
                     </div>
                     {errorState.showError && (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                     )}
                     {!crossChainDetails.find(
                         (chain: any) => chain.chainId.toString() === selectedChainID.toString()
                     ) && (
-                        <span className=" text-h8 font-normal ">
+                        <span className=" text-start text-h8 font-normal">
                             <Icon name="warning" className="-mt-0.5" /> This chain does not support cross-chain
                             claiming.
                         </span>
diff --git a/src/components/Create/Link/Initial.view.tsx b/src/components/Create/Link/Initial.view.tsx
index f9d165238..6e10f30a5 100644
--- a/src/components/Create/Link/Initial.view.tsx
+++ b/src/components/Create/Link/Initial.view.tsx
@@ -1,21 +1,20 @@
 'use client'
 
+import { useSearchParams } from 'next/navigation'
 import { useContext, useEffect, useState } from 'react'
 import validator from 'validator'
-import { useSearchParams } from 'next/navigation'
 
-import * as _consts from '../Create.consts'
-import * as _utils from '../Create.utils'
-import * as utils from '@/utils'
-import * as context from '@/context'
-import RecipientInput from '@/components/Global/RecipientInput'
+import { Button, Card } from '@/components/0_Bruddle'
+import Divider from '@/components/0_Bruddle/Divider'
+import { CrispButton } from '@/components/CrispChat'
 import Icon from '@/components/Global/Icon'
-import { ethers } from 'ethers'
 import Loading from '@/components/Global/Loading'
+import RecipientInput from '@/components/Global/RecipientInput'
+import * as context from '@/context'
+import * as utils from '@/utils'
+import { ethers } from 'ethers'
 import { validate } from 'multicoin-address-validator'
-import { CrispButton } from '@/components/CrispChat'
-import { Button, Card } from '@/components/0_Bruddle'
-import Divider from '@/components/0_Bruddle/Divider'
+import * as _consts from '../Create.consts'
 
 export const CreateLinkInitialView = ({
     onNext,
@@ -154,9 +153,9 @@ export const CreateLinkInitialView = ({
 
     return (
         <Card className="shadow-none sm:shadow-primary-4">
-            <Card.Header>
-                <Card.Title>Send crypto</Card.Title>
-                <Card.Description>
+            <Card.Header className="mx-auto text-center">
+                <Card.Title className="text-center">Send crypto</Card.Title>
+                <Card.Description className="text-center">
                     Transfer tokens via link or to an email, phone number, ENS, or wallet address.
                 </Card.Description>
             </Card.Header>
@@ -201,7 +200,7 @@ export const CreateLinkInitialView = ({
                 )}
                 {errorState.showError && (
                     <>
-                        <div className="w-full text-center">
+                        <div className="w-full text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                         {errorState.errorMessage.includes('We currently dont support ') && (
diff --git a/src/components/Create/Link/Input.view.tsx b/src/components/Create/Link/Input.view.tsx
index d4f765ceb..c51645eac 100644
--- a/src/components/Create/Link/Input.view.tsx
+++ b/src/components/Create/Link/Input.view.tsx
@@ -14,9 +14,9 @@ import Icon from '@/components/Global/Icon'
 import MoreInfo from '@/components/Global/MoreInfo'
 import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
 import { useWalletType } from '@/hooks/useWalletType'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { WalletProviderType } from '@/interfaces'
 import { balanceByToken, ErrorHandler, floorFixed, isNativeCurrency, printableAddress, printableUsdc } from '@/utils'
 import { interfaces } from '@squirrel-labs/peanut-sdk'
@@ -309,10 +309,7 @@ export const CreateLinkInputView = ({
             <FlowHeader />
             <Card className="shadow-none sm:shadow-primary-4">
                 <Card.Header>
-                    <Card.Title
-                        style={{ display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}
-                        className="text-center"
-                    >
+                    <Card.Title style={{ display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}>
                         {' '}
                         {createType === 'link'
                             ? 'Text Tokens'
@@ -320,7 +317,7 @@ export const CreateLinkInputView = ({
                               ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : printableAddress(recipient.address ?? '')}`
                               : `Send to ${recipient.name}`}
                     </Card.Title>
-                    <Card.Description className="mx-auto max-w-96 text-center">
+                    <Card.Description>
                         {createType === 'link' &&
                             'Deposit some crypto to the link, no need for wallet addresses. Send the link to the recipient. They will be able to claim the funds in any token on any chain from the link.'}
                         {createType === 'email_link' &&
@@ -398,20 +395,20 @@ export const CreateLinkInputView = ({
                     </Button> */}
                     </div>
                     {errorState.showError && (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                     )}
                     {!crossChainDetails.find(
                         (chain: any) => chain.chainId.toString() === selectedChainID.toString()
                     ) && (
-                        <span className=" text-h8 font-normal ">
+                        <span className=" text-start text-h8 font-normal">
                             <Icon name="warning" className="-mt-0.5" /> This chain does not support cross-chain
                             claiming.
                         </span>
                     )}
 
-                    <span className="flex  flex-row items-center justify-center gap-1 text-center text-h8">
+                    <span className="flex flex-row items-center justify-start gap-1 text-h8">
                         Learn about peanut cashout
                         <MoreInfo
                             text={
diff --git a/src/components/Create/Link/Success.view.tsx b/src/components/Create/Link/Success.view.tsx
index a6ce0bc48..29d8e3533 100644
--- a/src/components/Create/Link/Success.view.tsx
+++ b/src/components/Create/Link/Success.view.tsx
@@ -78,9 +78,9 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok
     return (
         <Card className="shadow-none sm:shadow-primary-4">
             <Card.Header>
-                <Card.Title className="text-center">Yay!</Card.Title>
+                <Card.Title>Yay!</Card.Title>
             </Card.Header>
-            <Card.Content className="flex flex-col gap-4 text-center">
+            <Card.Content className="flex flex-col gap-4">
                 {link && <QRCodeWrapper url={link} />}
                 {createType === 'direct'
                     ? `You have successfully sent the funds to ${recipient.name?.endsWith('.eth') ? recipient.name : printableAddress(recipient.address ?? '')}.`
@@ -125,7 +125,7 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok
                             <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}>
                                 <Button variant="dark">
                                     Transaction hash
-                                    <Icon name="external" className="h-4 fill-gray-1" />
+                                    <Icon name="external" className="h-4 fill-grey-1" />
                                 </Button>
                             </Link>
                             <Link className="" href={'/profile'}>
diff --git a/src/components/Create/useCreateLink.tsx b/src/components/Create/useCreateLink.tsx
index 320a70d23..beb955ad8 100644
--- a/src/components/Create/useCreateLink.tsx
+++ b/src/components/Create/useCreateLink.tsx
@@ -18,8 +18,8 @@ interface ICheckUserHasEnoughBalanceProps {
 
 import { Hex } from 'viem'
 
-import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { WalletProviderType } from '@/interfaces'
 
 export const useCreateLink = () => {
diff --git a/src/components/Dashboard/components/MobileComponent.tsx b/src/components/Dashboard/components/MobileComponent.tsx
index 86fc462b2..39631a33c 100644
--- a/src/components/Dashboard/components/MobileComponent.tsx
+++ b/src/components/Dashboard/components/MobileComponent.tsx
@@ -1,9 +1,9 @@
-import Modal from '@/components/Global/Modal'
 import AddressLink from '@/components/Global/AddressLink'
+import Modal from '@/components/Global/Modal'
+import * as interfaces from '@/interfaces'
+import * as utils from '@/utils'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import * as utils from '@/utils'
-import * as interfaces from '@/interfaces'
 
 export const MobileItemComponent = ({
     linkDetail,
@@ -54,7 +54,7 @@ export const MobileItemComponent = ({
                         {linkDetail.status === 'claimed' ? (
                             <div className="border border-teal-3 px-2 py-1 text-center text-teal-3">claimed</div>
                         ) : (
-                            <div className="border border-gray-1 border-n-1 px-2 py-1 text-gray-1">pending</div>
+                            <div className="border border-grey-1 border-n-1 px-2 py-1 text-grey-1">pending</div>
                         )}
                     </div>
                 </div>
@@ -67,7 +67,7 @@ export const MobileItemComponent = ({
             >
                 <div className="flex w-full flex-col items-center justify-center p-2 "></div>
                 {linkDetail.type === 'Link Sent' && (
-                    <div className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 ">
+                    <div className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 ">
                         <div
                             className="text-h8"
                             onClick={() => {
@@ -82,7 +82,7 @@ export const MobileItemComponent = ({
                     onClick={() => {
                         utils.copyTextToClipboardWithFallback(linkDetail?.link ?? linkDetail.txHash ?? '')
                     }}
-                    className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
+                    className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
                 >
                     <div className="text-h8">Copy Link</div>
                 </div>
@@ -91,7 +91,7 @@ export const MobileItemComponent = ({
                         href={linkDetail.attachmentUrl}
                         download
                         target="_blank"
-                        className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 focus:outline-none disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
+                        className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 focus:outline-none disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
                     >
                         Download attachment
                     </a>
diff --git a/src/components/Dashboard/components/OptionsItemComponent.tsx b/src/components/Dashboard/components/OptionsItemComponent.tsx
index ac6edc9b8..32edb4746 100644
--- a/src/components/Dashboard/components/OptionsItemComponent.tsx
+++ b/src/components/Dashboard/components/OptionsItemComponent.tsx
@@ -1,8 +1,8 @@
-import { useRouter } from 'next/navigation'
-import * as utils from '@/utils'
-import * as interfaces from '@/interfaces'
 import Icon from '@/components/Global/Icon'
+import * as interfaces from '@/interfaces'
+import * as utils from '@/utils'
 import { Menu, Transition } from '@headlessui/react'
+import { useRouter } from 'next/navigation'
 export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem }) => {
     const router = useRouter()
 
@@ -26,7 +26,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem
                             onClick={() => {
                                 router.push(`/${(item.link ?? '').split('://')[1].split('/')[1]}`)
                             }}
-                            className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "
+                            className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "
                         >
                             <div className="text-h8">Refund</div>
                         </Menu.Item>
@@ -38,7 +38,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem
                                 onClick={() => {
                                     utils.copyTextToClipboardWithFallback(item.link ?? '')
                                 }}
-                                className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
+                                className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
                             >
                                 <div className="text-h8">Copy link</div>
                             </Menu.Item>
@@ -49,7 +49,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem
                             href={item.attachmentUrl}
                             download
                             target="_blank"
-                            className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
+                            className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
                         >
                             <div className="text-h8">Download attachment</div>
                         </Menu.Item>
@@ -60,7 +60,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem
                             onClick={() => {
                                 utils.copyTextToClipboardWithFallback(item.txHash ?? '')
                             }}
-                            className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
+                            className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
                         >
                             <div className="text-h8">Copy transaction hash</div>
                         </Menu.Item>
diff --git a/src/components/Dashboard/components/SortComponent.tsx b/src/components/Dashboard/components/SortComponent.tsx
index c4aba5518..84aa7ac0d 100644
--- a/src/components/Dashboard/components/SortComponent.tsx
+++ b/src/components/Dashboard/components/SortComponent.tsx
@@ -32,7 +32,7 @@ export const SortComponent = ({
                             onClick={() => {
                                 setSortingValue(type)
                             }}
-                            className=" flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 dark:hover:bg-white/20"
+                            className=" flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 dark:hover:bg-white/20"
                             key={type}
                         >
                             <div className="text-h8">{type}</div>
diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx
index 051258d23..209274825 100644
--- a/src/components/Dashboard/index.tsx
+++ b/src/components/Dashboard/index.tsx
@@ -13,7 +13,7 @@ import * as utils from '@/utils'
 import * as _consts from './Dashboard.consts'
 import * as components from './components'
 
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { useDashboard } from './useDashboard'
 
 export const Dashboard = () => {
@@ -197,7 +197,7 @@ export const Dashboard = () => {
 
                                                 <td className="td-custom">
                                                     {!link.status ? (
-                                                        <div className="border border-gray-1 px-2 py-1 text-center text-gray-1">
+                                                        <div className="border border-grey-1 px-2 py-1 text-center text-grey-1">
                                                             <Loading />
                                                         </div>
                                                     ) : link.status === 'claimed' ? (
@@ -209,7 +209,7 @@ export const Dashboard = () => {
                                                             sent
                                                         </div>
                                                     ) : (
-                                                        <div className="border border-gray-1 px-2 py-1 text-center text-gray-1">
+                                                        <div className="border border-grey-1 px-2 py-1 text-center text-grey-1">
                                                             pending
                                                         </div>
                                                     )}
@@ -237,7 +237,7 @@ export const Dashboard = () => {
                     <CSVLink
                         data={legacyLinks ? legacyLinks.join('\n') : ''}
                         filename="links.csv"
-                        className="cursor-pointer self-end text-purple-1"
+                        className="cursor-pointer self-end text-primary-1"
                     >
                         Download {legacyLinks.length} legacy links as CSV
                     </CSVLink>
diff --git a/src/components/Global/Banner/GenericBanner.tsx b/src/components/Global/Banner/GenericBanner.tsx
index b4face4ee..859514a29 100644
--- a/src/components/Global/Banner/GenericBanner.tsx
+++ b/src/components/Global/Banner/GenericBanner.tsx
@@ -6,7 +6,7 @@ interface GenericBannerProps {
     icon?: string
 }
 
-export function GenericBanner({ message, backgroundColor = 'bg-purple-1', icon }: GenericBannerProps) {
+export function GenericBanner({ message, backgroundColor = 'bg-primary-1', icon }: GenericBannerProps) {
     return (
         <MarqueeWrapper backgroundColor={backgroundColor} direction="left">
             <span className="z-10 mx-4 text-sm font-semibold">
diff --git a/src/components/Global/Banner/index.tsx b/src/components/Global/Banner/index.tsx
index 4d44bcfe7..85ab86df6 100644
--- a/src/components/Global/Banner/index.tsx
+++ b/src/components/Global/Banner/index.tsx
@@ -1,7 +1,7 @@
+import { MAINTAINABLE_ROUTES } from '@/config/routesUnderMaintenance'
 import { usePathname } from 'next/navigation'
 import { GenericBanner } from './GenericBanner'
 import { MaintenanceBanner } from './MaintenanceBanner'
-import { MAINTAINABLE_ROUTES } from '@/config/routesUnderMaintenance'
 
 export function Banner() {
     const pathname = usePathname()
@@ -13,7 +13,7 @@ export function Banner() {
 
     // Show beta message for all request paths (create and pay) unless under maintenance
     if (pathname.startsWith(MAINTAINABLE_ROUTES.REQUEST)) {
-        return <GenericBanner message="Beta feature - share your thoughts!" backgroundColor="bg-purple-1" />
+        return <GenericBanner message="Beta feature - share your thoughts!" backgroundColor="bg-primary-1" />
     }
 
     return null
diff --git a/src/components/Global/ChainSelector/index.tsx b/src/components/Global/ChainSelector/index.tsx
index 6c4c2939e..cd25c5e01 100644
--- a/src/components/Global/ChainSelector/index.tsx
+++ b/src/components/Global/ChainSelector/index.tsx
@@ -2,7 +2,7 @@
 
 import { supportedPeanutChains } from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { IPeanutChainDetails } from '@/interfaces'
 import { calculateValuePerChain, formatTokenAmount } from '@/utils'
 import { Menu, Transition } from '@headlessui/react'
@@ -140,14 +140,14 @@ const chainItem = ({
         <Menu.Item
             as="button"
             onClick={setChain}
-            className="flex h-12 w-full items-center justify-between gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 dark:hover:bg-white/20"
+            className="flex h-12 w-full items-center justify-between gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 dark:hover:bg-white/20"
             key={chain.name}
         >
             <div className="flex w-max flex-row items-center justify-center gap-2">
                 <img src={chain.icon.url} alt={chain.name} className="h-6 w-6" />
                 <div className="text-h8">{chain.name}</div>
             </div>
-            {valuePerChain && <div className="text-h9 text-gray-1">${formatTokenAmount(valuePerChain, 2)}</div>}
+            {valuePerChain && <div className="text-h9 text-grey-1">${formatTokenAmount(valuePerChain, 2)}</div>}
         </Menu.Item>
     )
 }
diff --git a/src/components/Global/ConfirmDetails/Index.tsx b/src/components/Global/ConfirmDetails/Index.tsx
index a9c9b6ab2..d84d55f63 100644
--- a/src/components/Global/ConfirmDetails/Index.tsx
+++ b/src/components/Global/ConfirmDetails/Index.tsx
@@ -35,7 +35,7 @@ const ConfirmDetails = ({
                     </label>
                 </div>
                 {tokenPrice && (
-                    <label className="text-h7 font-bold text-gray-1">
+                    <label className="text-h7 font-bold text-grey-1">
                         $ {formatTokenAmount(Number(tokenAmount) * tokenPrice)}
                     </label>
                 )}
@@ -46,7 +46,7 @@ const ConfirmDetails = ({
                 ) : (
                     <Icon name="chain_placeholder" className="h-6 w-6" fill="#999" />
                 )}
-                <label className="text-sm font-bold text-gray-1">{chainName}</label>
+                <label className="text-sm font-bold text-grey-1">{chainName}</label>
             </div>
         </div>
     )
diff --git a/src/components/Global/FAQs/index.tsx b/src/components/Global/FAQs/index.tsx
index 34ce00267..3be551e37 100644
--- a/src/components/Global/FAQs/index.tsx
+++ b/src/components/Global/FAQs/index.tsx
@@ -1,10 +1,9 @@
 'use client'
 
-import { useState, useCallback } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { Box, Stack, Flex } from '@chakra-ui/react'
+import { Box, Flex, Stack } from '@chakra-ui/react'
+import { AnimatePresence, motion } from 'framer-motion'
 import dynamic from 'next/dynamic'
-import { PeanutsBG } from '@/assets'
+import { useCallback, useState } from 'react'
 
 // Dynamically import Icon for lazy loading
 const Icon = dynamic(() => import('@/components/Global/Icon'), {
@@ -39,7 +38,7 @@ export function FAQsPanel({ heading, questions }: FAQsProps) {
                     transition={{ type: 'spring', damping: 10 }}
                     className="relative mx-auto max-w-3xl rounded-md border-2 border-n-1 bg-white px-2 py-6 shadow ring-2 ring-white transition-transform duration-300 hover:rotate-0 md:-rotate-2 md:p-14"
                 >
-                    <h2 className="absolute -left-2 -top-8 rounded-full border-2 border-n-1 bg-primary px-5 py-3 font-display text-[1.5rem] font-bold text-white shadow ring-2 ring-white sm:-left-6 md:text-[2rem]">
+                    <h2 className="absolute -left-2 -top-8 rounded-full border-2 border-n-1 bg-primary-1 px-5 py-3 font-display text-[1.5rem] font-bold text-white shadow ring-2 ring-white sm:-left-6 md:text-[2rem]">
                         {heading}
                     </h2>
 
diff --git a/src/components/Global/Header/index.tsx b/src/components/Global/Header/index.tsx
index 3f04aa1f1..3e0a2cba8 100644
--- a/src/components/Global/Header/index.tsx
+++ b/src/components/Global/Header/index.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { HAMBURGER_LOTTIE, PEANUTMAN_LOGO } from '@/assets'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { breakpoints, emToPx } from '@/styles/theme'
 import { shortenAddress } from '@/utils'
 import { useAppKit } from '@reown/appkit/react'
@@ -150,7 +150,7 @@ const MenuLink = ({
                 {title}
             </Text>
             {isBeta && (
-                <span className="relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase text-purple-1">
+                <span className="relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase text-primary-1">
                     BETA
                 </span>
             )}
diff --git a/src/components/Global/KYCComponent/index.tsx b/src/components/Global/KYCComponent/index.tsx
index ee6508f44..af5c9b7da 100644
--- a/src/components/Global/KYCComponent/index.tsx
+++ b/src/components/Global/KYCComponent/index.tsx
@@ -1,21 +1,20 @@
 'use client'
 
-import { useMemo, useState, useEffect } from 'react'
 import { Step, Steps, useSteps } from 'chakra-ui-steps'
+import { useEffect, useMemo, useState } from 'react'
 
-import * as utils from '@/utils'
-import * as interfaces from '@/interfaces'
+import { Card } from '@/components/0_Bruddle'
+import { CrispButton } from '@/components/CrispChat'
 import * as consts from '@/constants'
-import IframeWrapper, { IFrameWrapperProps } from '../IframeWrapper'
-import { useForm } from 'react-hook-form'
 import { useAuth } from '@/context/authContext'
+import * as interfaces from '@/interfaces'
+import * as utils from '@/utils'
+import { Divider, useToast } from '@chakra-ui/react'
+import { useForm } from 'react-hook-form'
+import IframeWrapper, { IFrameWrapperProps } from '../IframeWrapper'
 import Loading from '../Loading'
 import { GlobalLoginComponent } from '../LoginComponent'
 import { GlobalRegisterComponent } from '../RegisterComponent'
-import { Divider } from '@chakra-ui/react'
-import { CrispButton } from '@/components/CrispChat'
-import { Card } from '@/components/0_Bruddle'
-import { useToast } from '@chakra-ui/react'
 
 const steps = [
     { label: 'Step 1: Provide personal details' },
@@ -424,9 +423,11 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
 
     return (
         <Card className="shadow-none sm:shadow-primary-4">
-            <Card.Header>
-                <Card.Title>KYC Process</Card.Title>
-                <Card.Description>Regulations require us to verify your identity.</Card.Description>
+            <Card.Header className="mx-auto text-center">
+                <Card.Title className="text-center">KYC Process</Card.Title>
+                <Card.Description className="text-center">
+                    Regulations require us to verify your identity.
+                </Card.Description>
             </Card.Header>
             <Card.Content>
                 <Steps
@@ -460,7 +461,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
 
                 <div className="flex w-full flex-col items-center justify-center gap-2">
                     {errorState.showError && errorState.errorMessage === 'KYC under review' ? (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">
                                 KYC is under manual review, we might need additional documents.{' '}
                                 <CrispButton className="text-blue-600 underline">Chat with support</CrispButton> to
@@ -468,12 +469,12 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
                             </label>
                         </div>
                     ) : errorState.errorMessage === 'KYC rejected' ? (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">KYC has been rejected.</label>
                             <CrispButton className="text-blue-600 underline">Chat with support</CrispButton>
                         </div>
                     ) : (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                     )}
diff --git a/src/components/Global/LinkAccountComponent/index.tsx b/src/components/Global/LinkAccountComponent/index.tsx
index 79c73a4d0..0bd0e3fa6 100644
--- a/src/components/Global/LinkAccountComponent/index.tsx
+++ b/src/components/Global/LinkAccountComponent/index.tsx
@@ -1,19 +1,17 @@
 import { Step, Steps, useSteps } from 'chakra-ui-steps'
-import { useContext, useMemo, useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import * as utils from '@/utils'
-import * as context from '@/context'
-import Loading from '../Loading'
-import CountryDropdown from '../CountrySelect'
-import Link from 'next/link'
-import Icon from '../Icon'
 import { useAuth } from '@/context/authContext'
+import { IBridgeAccount, IResponse } from '@/interfaces'
+import * as utils from '@/utils'
+import { formatBankAccountDisplay, sanitizeBankAccount } from '@/utils/format.utils'
 import { Divider } from '@chakra-ui/react'
+import Link from 'next/link'
 import { isIBAN } from 'validator'
-import { IBridgeAccount, IResponse } from '@/interfaces'
-import { USBankAccountInput } from '../USBankAccountInput'
-import { sanitizeBankAccount, formatBankAccountDisplay } from '@/utils/format.utils'
+import CountryDropdown from '../CountrySelect'
+import Icon from '../Icon'
+import Loading from '../Loading'
 
 const steps = [{ label: '1. Bank Account' }, { label: '2. Confirm details' }]
 
@@ -404,7 +402,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba
                             )}
                         </button>
                         {errorState.showError && (
-                            <div className="text-center">
+                            <div className="text-start">
                                 <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                             </div>
                         )}
@@ -563,7 +561,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba
                             )}
                         </button>
                         {errorState.showError && (
-                            <div className="text-center">
+                            <div className="text-start">
                                 <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                             </div>
                         )}
@@ -574,7 +572,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba
 
     return user?.user?.kycStatus === 'approved' ? (
         completedLinking ? (
-            <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
+            <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-start">
                 <p>You have successfully linked your account!</p>
                 <Link
                     className="absolute bottom-0 flex h-20 w-[27rem] w-full flex-row items-center justify-start gap-2 border-t-[1px] border-black bg-purple-3  px-4.5 dark:text-black"
@@ -587,7 +585,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba
                 </Link>
             </div>
         ) : (
-            <div className="flex w-full flex-col items-center justify-center gap-6 px-2  text-center">
+            <div className="flex w-full flex-col items-center justify-center gap-6 px-2 text-start">
                 <p className="text-h8 font-normal">
                     Complete the following steps to link your bank account to your peanut profile for a smooth cashout
                     experience.
@@ -624,7 +622,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba
             </div>
         )
     ) : (
-        <div className="flex w-full flex-col items-center justify-center gap-6 py-2 text-center">
+        <div className="flex w-full flex-col items-center justify-center gap-6 py-2 text-start">
             <p className="text-h6">
                 Before you can link an account, please login or register & complete the kyc process.
             </p>
diff --git a/src/components/Global/LoginComponent/index.tsx b/src/components/Global/LoginComponent/index.tsx
index 859808d62..03d935d16 100644
--- a/src/components/Global/LoginComponent/index.tsx
+++ b/src/components/Global/LoginComponent/index.tsx
@@ -1,8 +1,8 @@
-import { useMemo, useState } from 'react'
-import { FormProvider, useForm } from 'react-hook-form'
+import { Button, Field } from '@/components/0_Bruddle'
 import { useAuth } from '@/context/authContext'
 import crypto from 'crypto'
-import { Button, Field } from '@/components/0_Bruddle'
+import { useMemo, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
 
 interface ILoginComponentProps {
     email?: string
@@ -155,7 +155,7 @@ export const GlobalLoginComponent = ({ email, password, onSubmit, redirectUrl }:
                     Login
                 </Button>
                 {errorState.showError && (
-                    <div className="text-center">
+                    <div className="text-start">
                         <label className=" text-red-500 text-h8 font-normal ">{errorState.errorMessage}</label>
                     </div>
                 )}
diff --git a/src/components/Global/Modal/index.tsx b/src/components/Global/Modal/index.tsx
index 0f3b82070..3515d1792 100644
--- a/src/components/Global/Modal/index.tsx
+++ b/src/components/Global/Modal/index.tsx
@@ -80,7 +80,7 @@ const Modal = ({
                                 {showPrev && (
                                     <button
                                         className={twMerge(
-                                            ` absolute left-5 top-4.5 text-0 outline-none hover:fill-purple-1 dark:fill-white dark:hover:fill-purple-1 `
+                                            ` absolute left-5 top-4.5 text-0 outline-none hover:fill-primary-1 dark:fill-white dark:hover:fill-primary-1 `
                                         )}
                                         onClick={onPrev}
                                     >
@@ -102,7 +102,7 @@ const Modal = ({
 
                                 <button
                                     className={twMerge(
-                                        `absolute right-4 top-4 text-0 outline-none hover:fill-purple-1 dark:fill-white dark:hover:fill-purple-1 ${
+                                        `absolute right-4 top-4 text-0 outline-none hover:fill-primary-1 dark:fill-white dark:hover:fill-primary-1 ${
                                             video ? 'absolute right-5 top-5 h-10 w-10 fill-white' : ''
                                         } ${classButtonClose}`
                                     )}
diff --git a/src/components/Global/RegisterComponent/index.tsx b/src/components/Global/RegisterComponent/index.tsx
index 32956ca8d..a78a1f7f6 100644
--- a/src/components/Global/RegisterComponent/index.tsx
+++ b/src/components/Global/RegisterComponent/index.tsx
@@ -1,11 +1,8 @@
-import { useContext, useMemo, useState } from 'react'
+import { useAuth } from '@/context/authContext'
+import crypto from 'crypto'
+import { useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import Loading from '../Loading'
-import crypto from 'crypto'
-import * as context from '@/context'
-import { useAuth } from '@/context/authContext'
-import Link from 'next/link'
-import * as utils from '@/utils'
 interface IRegisterComponentProps {
     userId?: string
     name?: string
@@ -112,7 +109,10 @@ export const GlobalRegisterComponent = ({
     }
 
     return (
-        <form className="flex w-full flex-col items-start justify-center gap-2" onSubmit={handleSubmit(handleOnSubmit)}>
+        <form
+            className="flex w-full flex-col items-stretch justify-center gap-2"
+            onSubmit={handleSubmit(handleOnSubmit)}
+        >
             <input
                 {...register('name', { required: 'This field is required' })}
                 className={`custom-input custom-input-xs ${errors.name ? 'border border-red' : ''}`}
@@ -138,7 +138,7 @@ export const GlobalRegisterComponent = ({
                     }
                 }}
             />
-            {errors.email && <span className="text-h9 font-normal text-red">{errors.email.message}</span>}
+            {errors.email && <span className="text-start text-h9 font-normal text-red">{errors.email.message}</span>}
 
             <input
                 {...register('password', { required: 'This field is required' })}
@@ -152,7 +152,9 @@ export const GlobalRegisterComponent = ({
                     }
                 }}
             />
-            {errors.password && <span className="text-h9 font-normal text-red">{errors.password.message}</span>}
+            {errors.password && (
+                <span className="text-start text-h9 font-normal text-red">{errors.password.message}</span>
+            )}
 
             <button type="submit" className="btn btn-purple h-8 w-full text-h8" disabled={isLoading}>
                 {isLoading ? (
@@ -164,13 +166,13 @@ export const GlobalRegisterComponent = ({
                 )}
             </button>
             {errorState.showError && errorState.errorMessage === 'User already exists' ? (
-                <div className="w-full text-center">
-                    <span className=" text-h8 font-normal ">User already exists</span>
+                <div className="w-full">
+                    <span className="text-start text-h8 font-normal">User already exists</span>
                 </div>
             ) : (
                 errorState.showError && (
-                    <div className="w-full text-center">
-                        <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
+                    <div className="w-full text-start">
+                        <label className="text-start text-h8 font-normal text-red">{errorState.errorMessage}</label>
                     </div>
                 )
             )}
diff --git a/src/components/Global/Search/index.tsx b/src/components/Global/Search/index.tsx
index 5048f0e93..685470cf4 100644
--- a/src/components/Global/Search/index.tsx
+++ b/src/components/Global/Search/index.tsx
@@ -1,5 +1,4 @@
 import Icon from '@/components/Global/Icon'
-import { useEffect, useRef, useState } from 'react'
 
 type SearchProps = {
     className?: string
@@ -17,7 +16,7 @@ const Search = ({ className, placeholder, value, onChange, onSubmit, large, medi
         <div className={`relative ${className} ${large ? 'shadow-primary-4 w-full' : ''}`}>
             <input
                 className={`w-full rounded-none bg-transparent text-base outline-none
-                transition-colors placeholder:text-base focus:border-purple-1 dark:border-white dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1 ${
+                transition-colors placeholder:text-base focus:border-primary-1 dark:border-white dark:text-white dark:placeholder:text-white/75 dark:focus:border-primary-1 ${
                     large
                         ? 'h-16 bg-white pl-6 pr-18 text-base font-medium dark:bg-n-1'
                         : medium
@@ -32,7 +31,7 @@ const Search = ({ className, placeholder, value, onChange, onSubmit, large, medi
             <button
                 className={`absolute text-0 ${
                     large
-                        ? 'right-5 top-1/2 h-8 w-8 -translate-y-1/2 border border-n-1 bg-purple-1 transition-colors hover:bg-purple-1/90'
+                        ? 'right-5 top-1/2 h-8 w-8 -translate-y-1/2 border border-n-1 bg-primary-1 transition-colors hover:bg-primary-1/90'
                         : 'bottom-0 left-0 top-0 w-8'
                 }`}
             >
diff --git a/src/components/Global/Select/index.tsx b/src/components/Global/Select/index.tsx
index 28bc92925..c8a2472a9 100644
--- a/src/components/Global/Select/index.tsx
+++ b/src/components/Global/Select/index.tsx
@@ -1,8 +1,8 @@
+import Icon from '@/components/Global/Icon'
 import { Listbox, Transition } from '@headlessui/react'
-import { Fragment, useRef } from 'react'
+import { useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { twMerge } from 'tailwind-merge'
-import Icon from '@/components/Global/Icon'
 
 type SelectProps = {
     label?: string
@@ -48,7 +48,7 @@ const Select = ({
                             className={twMerge(
                                 `border-rounded flex h-16 w-full items-center bg-white px-5 text-sm font-bold text-n-1 outline-none transition-colors tap-highlight-color dark:bg-n-1 dark:text-white ${
                                     small ? 'h-6 px-4 text-xs' : ''
-                                } ${open ? 'border-purple-1 dark:border-purple-1' : ''} ${classButton}`
+                                } ${open ? 'border-primary-1 dark:border-primary-1' : ''} ${classButton}`
                             )}
                         >
                             <span className="mr-auto truncate text-black">
@@ -73,7 +73,7 @@ const Select = ({
                                 <Transition leave="transition duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
                                     <Listbox.Options
                                         className={twMerge(
-                                            `absolute left-0 right-0 mt-1 w-full rounded-md border-2 border-n-3 bg-white p-2 shadow-lg dark:border-white dark:bg-n-1 ${
+                                            `absolute left-0 right-0 mt-1 w-full rounded-md border-2 border-grey-1 bg-white p-2 shadow-lg dark:border-white dark:bg-n-1 ${
                                                 small ? 'p-0' : ''
                                             } ${up ? 'bottom-full top-auto mb-1 mt-0' : ''} z-50 ${classOptions}`
                                         )}
@@ -87,7 +87,7 @@ const Select = ({
                                         {items.map((item: any) => (
                                             <Listbox.Option
                                                 className={twMerge(
-                                                    `flex cursor-pointer items-start rounded-sm px-3 py-2 text-start text-sm font-bold text-n-3 transition-colors tap-highlight-color ui-selected:!bg-n-3/20 ui-selected:!text-n-1 hover:text-n-1 dark:text-white/50 dark:ui-selected:!text-white dark:hover:text-white ${
+                                                    `flex cursor-pointer items-start rounded-sm px-3 py-2 text-start text-sm font-bold text-grey-1 transition-colors tap-highlight-color ui-selected:!bg-grey-1/20 ui-selected:!text-n-1 hover:text-n-1 dark:text-white/50 dark:ui-selected:!text-white dark:hover:text-white ${
                                                         small ? '!py-1 !pl-4 text-xs' : ''
                                                     } ${classOption}`
                                                 )}
diff --git a/src/components/Global/Testimonials/index.tsx b/src/components/Global/Testimonials/index.tsx
index 43bd20631..a421d5277 100644
--- a/src/components/Global/Testimonials/index.tsx
+++ b/src/components/Global/Testimonials/index.tsx
@@ -179,7 +179,7 @@ export function Testimonials({ testimonials }: TestimonialsProps) {
                             >
                                 <motion.div
                                     variants={testimonialBgVariants[index]}
-                                    className={`absolute left-0 top-0 -z-1 h-full w-full rounded-3xl bg-primary testimonial-${index}-bg`}
+                                    className={`bg-primary absolute left-0 top-0 -z-1 h-full w-full rounded-3xl testimonial-${index}-bg`}
                                 ></motion.div>
 
                                 <TestimonialBody testimonial={testimonial} />
@@ -187,7 +187,7 @@ export function Testimonials({ testimonials }: TestimonialsProps) {
                         ) : (
                             <div className={`relative z-10 p-4 md:p-8`}>
                                 <div
-                                    className={`absolute left-0 top-0 -z-1 h-full w-full rounded-3xl bg-primary testimonial-${index}-bg`}
+                                    className={`bg-primary absolute left-0 top-0 -z-1 h-full w-full rounded-3xl testimonial-${index}-bg`}
                                 ></div>
                                 <TestimonialBody testimonial={testimonial} />
                             </div>
diff --git a/src/components/Global/ToggleTheme/index.tsx b/src/components/Global/ToggleTheme/index.tsx
index f47e04238..4ee7d4625 100644
--- a/src/components/Global/ToggleTheme/index.tsx
+++ b/src/components/Global/ToggleTheme/index.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { useColorMode } from '@chakra-ui/color-mode'
 import Icon, { IconNameType } from '@/components/Global/Icon'
+import { useColorMode } from '@chakra-ui/color-mode'
 
 type ToggleThemeProps = {}
 
@@ -26,7 +26,7 @@ const ToggleTheme = ({}: ToggleThemeProps) => {
 
     return (
         <div
-            className={`relative flex h-6.5 w-14 overflow-hidden rounded-sm border border-n-1 before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1/2 before:bg-purple-1 before:transition-all dark:border-white ${
+            className={`relative flex h-6.5 w-14 overflow-hidden rounded-sm border border-n-1 before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1/2 before:bg-primary-1 before:transition-all dark:border-white ${
                 colorMode === 'dark' ? 'before:translate-x-full' : ''
             }`}
         >
diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx
index d8d359af9..b272d0dac 100644
--- a/src/components/Global/TokenAmountInput/index.tsx
+++ b/src/components/Global/TokenAmountInput/index.tsx
@@ -1,7 +1,7 @@
-import { useContext, useEffect, useMemo, useRef } from 'react'
-import Icon from '../Icon'
 import * as context from '@/context'
 import * as utils from '@/utils'
+import { useContext, useEffect, useMemo, useRef } from 'react'
+import Icon from '../Icon'
 
 interface TokenAmountInputProps {
     className?: string
@@ -69,7 +69,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV
                         <label className="sr-only text-h1">$</label>
                     ))}
                 <input
-                    className={`h-12 w-[4ch] max-w-80 bg-transparent text-center text-h1 outline-none transition-colors placeholder:text-h1 focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1`}
+                    className={`h-12 w-[4ch] max-w-80 bg-transparent text-center text-h1 outline-none transition-colors placeholder:text-h1 focus:border-primary-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-primary-1`}
                     placeholder={'0.00'}
                     onChange={(e) => {
                         const value = utils.formatAmountWithoutComma(e.target.value)
@@ -96,7 +96,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV
                 {maxValue && maxValue !== tokenValue && (
                     <button
                         onClick={handleMaxClick}
-                        className="absolute right-1 ml-1 px-2 py-1 text-h7 uppercase text-gray-1 transition-colors hover:text-black"
+                        className="absolute right-1 ml-1 px-2 py-1 text-h7 uppercase text-grey-1 transition-colors hover:text-black"
                     >
                         Max
                     </button>
@@ -104,7 +104,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV
             </div>
             {selectedTokenData?.price && !utils.estimateStableCoin(selectedTokenData.price) && (
                 <div className="flex w-full flex-row items-center justify-center gap-1">
-                    <label className="text-base text-gray-1">
+                    <label className="text-base text-grey-1">
                         {!tokenValue
                             ? '0'
                             : inputDenomination === 'USD'
@@ -118,7 +118,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV
                                 setInputDenomination(inputDenomination === 'USD' ? 'TOKEN' : 'USD')
                         }}
                     >
-                        <Icon name={'switch'} className="rotate-90 cursor-pointer fill-gray-1" />
+                        <Icon name={'switch'} className="rotate-90 cursor-pointer fill-grey-1" />
                     </button>
                 </div>
             )}
diff --git a/src/components/Global/TokenSelector/Components/AdvancedButton.tsx b/src/components/Global/TokenSelector/Components/AdvancedButton.tsx
index 76b091547..85ca934d0 100644
--- a/src/components/Global/TokenSelector/Components/AdvancedButton.tsx
+++ b/src/components/Global/TokenSelector/Components/AdvancedButton.tsx
@@ -1,8 +1,8 @@
-import { useContext, useEffect, useState } from 'react'
-import Icon from '../../Icon'
+import * as context from '@/context'
 import * as utils from '@/utils'
 import { fetchTokenSymbol } from '@/utils'
-import * as context from '@/context'
+import { useContext, useEffect, useState } from 'react'
+import Icon from '../../Icon'
 
 interface IAdvancedTokenSelectorButtonProps {
     onClick: () => void
@@ -59,7 +59,7 @@ export const AdvancedTokenSelectorButton = ({
             role="button"
             tabIndex={0}
             aria-label="Open token selector"
-            className={`flex w-full ${!isStatic && ' cursor-pointer '} h-18 flex-row items-center justify-between border border-n-1 px-4 py-2 hover:bg-n-3/10 dark:border-white ${classNameButton}`}
+            className={`flex w-full ${!isStatic && ' cursor-pointer '} h-18 flex-row items-center justify-between border border-n-1 px-4 py-2 hover:bg-grey-1/10 dark:border-white ${classNameButton}`}
             onClick={() => {
                 !isStatic && onClick()
             }}
@@ -97,12 +97,12 @@ export const AdvancedTokenSelectorButton = ({
 
                     {type === 'send' &&
                         (tokenBalance ? (
-                            <p className="text-xs text-gray-1">
+                            <p className="text-xs text-grey-1">
                                 Balance: {utils.formatTokenAmount(tokenBalance ?? 0, 4)}
                             </p>
                         ) : null)}
                     {tokenAmount && tokenPrice && (
-                        <p className="text-xs text-gray-1">
+                        <p className="text-xs text-grey-1">
                             ${utils.formatTokenAmount(Number(tokenAmount) * tokenPrice, 4)}
                         </p>
                     )}
diff --git a/src/components/Global/TokenSelector/Components/TokenDisplay.tsx b/src/components/Global/TokenSelector/Components/TokenDisplay.tsx
index 4864e1e7a..43f4321bc 100644
--- a/src/components/Global/TokenSelector/Components/TokenDisplay.tsx
+++ b/src/components/Global/TokenSelector/Components/TokenDisplay.tsx
@@ -26,7 +26,7 @@ export const tokenDisplay = (
                         <div className="text-h8">{token.name}</div>
                     </div>
                     {type === 'send' && (
-                        <p className="text-xs text-gray-1 ">
+                        <p className="text-xs text-grey-1 ">
                             {utils.formatTokenAmount(
                                 balances.find(
                                     (balance) =>
diff --git a/src/components/Global/TokenSelector/TokenSelector.tsx b/src/components/Global/TokenSelector/TokenSelector.tsx
index cbb4f0fd9..a3b383696 100644
--- a/src/components/Global/TokenSelector/TokenSelector.tsx
+++ b/src/components/Global/TokenSelector/TokenSelector.tsx
@@ -11,8 +11,8 @@ import Search from '../Search'
 import { AdvancedTokenSelectorButton } from './Components'
 
 import { CrispButton } from '@/components/CrispChat'
-import { useWallet } from '@/hooks/useWallet'
 import { useWalletType } from '@/hooks/useWalletType'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { useAppKit } from '@reown/appkit/react'
 import { interfaces } from '@squirrel-labs/peanut-sdk'
 import Image from 'next/image'
@@ -71,10 +71,10 @@ const TokenList = ({ balances, setToken }: { balances: IUserBalance[]; setToken:
                 {balances.slice(visibleRange.start, visibleRange.end).map((balance) => (
                     <div
                         key={`${balance.address}_${balance.chainId}`}
-                        className={`flex h-14 cursor-pointer items-center transition-colors hover:bg-n-3/10 ${
+                        className={`flex h-14 cursor-pointer items-center transition-colors hover:bg-grey-1/10 ${
                             areEvmAddressesEqual(balance.address, selectedTokenAddress) &&
                             balance.chainId === selectedChainID &&
-                            'bg-n-3/10'
+                            'bg-grey-1/10'
                         }`}
                         onClick={() => setToken(balance)}
                     >
@@ -148,7 +148,7 @@ const TokenList = ({ balances, setToken }: { balances: IUserBalance[]; setToken:
 
                         <div className="w-32 py-2">
                             <div className="flex flex-row items-center justify-end gap-2 pr-1">
-                                <div className="text-h8 text-gray-1">
+                                <div className="text-h8 text-grey-1">
                                     {supportedPeanutChains.find((chain) => chain.chainId === balance.chainId)?.name ??
                                         ''}
                                 </div>
diff --git a/src/components/Global/USBankAccountInput/index.tsx b/src/components/Global/USBankAccountInput/index.tsx
index ef20717ed..764f929dc 100644
--- a/src/components/Global/USBankAccountInput/index.tsx
+++ b/src/components/Global/USBankAccountInput/index.tsx
@@ -1,6 +1,6 @@
+import { sanitizeBankAccount } from '@/utils/format.utils'
 import { useState } from 'react'
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form'
-import { sanitizeBankAccount } from '@/utils/format.utils'
 
 interface IUSBankAccountInputProps {
     register: UseFormRegister<any>
@@ -97,7 +97,7 @@ export const USBankAccountInput = ({ register, setValue, errors, defaultValues }
             </div>
             <button
                 type="button"
-                className="text-h9 text-gray-1 underline"
+                className="text-h9 text-grey-1 underline"
                 onClick={() => {
                     setValue('routingNumber', '')
                     setValue('accountNumber', '')
diff --git a/src/components/Global/WalletHeader/index.tsx b/src/components/Global/WalletHeader/index.tsx
index ce8cb38f8..8d46afb23 100644
--- a/src/components/Global/WalletHeader/index.tsx
+++ b/src/components/Global/WalletHeader/index.tsx
@@ -1,17 +1,16 @@
 'use client'
 
-import { Wallet_ICON } from '@/assets'
 import PeanutWalletIcon from '@/assets/icons/small-peanut.png'
 import { Button, Card } from '@/components/0_Bruddle'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
+import { useWalletConnection } from '@/hooks/wallet/useWalletConnection'
 import { IWallet, WalletProviderType } from '@/interfaces'
 import { printableUsdc, shortenAddressLong } from '@/utils'
-import { useAppKit } from '@reown/appkit/react'
+import classNames from 'classnames'
 import Image from 'next/image'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { useAccount } from 'wagmi'
 import CopyToClipboard from '../CopyToClipboard'
 import Icon from '../Icon'
 import Modal from '../Modal'
@@ -19,33 +18,45 @@ import Modal from '../Modal'
 interface WalletHeaderProps {
     className?: HTMLDivElement['className']
     disabled?: boolean
+    isConnected?: boolean
+    isUsable?: boolean
 }
 interface WalletEntryCardProps {
     wallet: IWallet
     isActive?: boolean
-    onClick?: () => void
+    onClick: () => void
+    isConnected?: boolean
+    isUsable?: boolean
 }
 
 const WalletHeader = ({ className, disabled }: WalletHeaderProps) => {
     const [showModal, setShowModal] = useState(false)
-    const { wallets, selectedWallet, setSelectedWallet, isConnected } = useWallet()
-    const { open: openWeb3Modal } = useAppKit()
+    const { wallets, setSelectedWallet, selectedWallet, isConnected, isWalletConnected } = useWallet()
+    const { connectWallet } = useWalletConnection()
 
-    // sort wallets to add active wallet at the top
     const sortedWallets = useMemo(() => {
-        return [...wallets].sort((a, b) => {
-            if (a.address === selectedWallet?.address) return -1
-            if (b.address === selectedWallet?.address) return 1
-            return 0
-        })
+        return [...wallets].filter((account) => Object.values(WalletProviderType).includes(account.walletProviderType))
     }, [wallets, selectedWallet])
 
     // handle wallet selection and close modal
     const handleWalletSelection = (wallet: IWallet) => {
         setSelectedWallet(wallet)
-        setShowModal(false)
     }
 
+    // set selected wallet to peanut wallet if no external wallet is connected
+    useEffect(() => {
+        if (
+            !sortedWallets.some(
+                (wallet) => wallet.walletProviderType !== WalletProviderType.PEANUT && isWalletConnected(wallet)
+            )
+        ) {
+            const peanutWallet = sortedWallets.find((wallet) => wallet.walletProviderType === WalletProviderType.PEANUT)
+            if (peanutWallet) {
+                setSelectedWallet(peanutWallet)
+            }
+        }
+    }, [sortedWallets, isWalletConnected, setSelectedWallet])
+
     return (
         <div className={className}>
             {/* wallet selector button with current wallet info */}
@@ -88,19 +99,20 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => {
                 visible={showModal}
                 onClose={() => setShowModal(false)}
                 className="w-full items-center"
-                classWrap="bg-background rounded-none border-0 p-6 pt-14 w-full max-h-[65vh] md:max-h-full overflow-y-auto"
+                classWrap="bg-background rounded-none border-0 p-6 w-full max-h-[65vh] md:max-h-full overflow-y-auto"
             >
                 <div className="space-y-7">
                     {/* modal header */}
-                    <div className="flex items-center justify-between">
+                    <div className="absolute top-3 flex items-center justify-between">
                         <div className="text-2xl font-black">Wallets</div>
-                        <Button size="small" variant="yellow" className="w-fit bg-yellow-4/80 bg-opacity-20">
+                        {/* todo: re-add this when wallet management is implemented */}
+                        {/* <Button size="small" variant="yellow" className="w-fit bg-yellow-4/80 bg-opacity-20">
                             <Image src={Wallet_ICON} alt="" width={24} height={24} className="size-6 object-contain" />
                             <span>Manage wallet</span>
-                        </Button>
+                        </Button> */}
                     </div>
                     {/* list connected wallets */}
-                    <div className="space-y-2.5">
+                    <div className="space-y-2.5 pt-4">
                         {sortedWallets.map((wallet) => (
                             <WalletEntryCard
                                 key={wallet.address}
@@ -109,7 +121,7 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => {
                                 onClick={() => handleWalletSelection(wallet)}
                             />
                         ))}
-                        <AddNewWallet onClick={openWeb3Modal} />
+                        <AddNewWallet onClick={connectWallet} />
                     </div>
                 </div>
             </Modal>
@@ -119,49 +131,100 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => {
 
 // individual wallet card component
 const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) => {
-    const { connector } = useAccount()
     const { username } = useAuth()
+    const { isWalletConnected } = useWallet()
+    const { connectWallet, connectionStatus } = useWalletConnection()
+
+    const isExternalWallet = wallet.walletProviderType !== WalletProviderType.PEANUT
     const isPeanutWallet = wallet.walletProviderType === WalletProviderType.PEANUT
+    const isConnected = isWalletConnected(wallet)
+
+    const handleAction = async (e: React.MouseEvent) => {
+        e.stopPropagation()
+        if (isExternalWallet && !isConnected) {
+            await connectWallet()
+        }
+    }
 
     // get wallet icon to display
     const walletImage = useMemo(() => {
         return isPeanutWallet ? PeanutWalletIcon : wallet?.connector?.iconUrl || PeanutWalletIcon
-    }, [isPeanutWallet, connector, wallet])
+    }, [isPeanutWallet, wallet])
+
+    // get background color
+    const backgroundColor = useMemo(() => {
+        if ((isPeanutWallet || isExternalWallet) && isConnected) {
+            return isActive ? 'bg-primary-1 hover:bg-primary-1/90' : 'bg-purple-4 bg-opacity-25 hover:bg-opacity-20'
+        }
+        if (isExternalWallet && !isConnected) return 'bg-n-4'
+    }, [isExternalWallet, isConnected, isActive, isPeanutWallet, wallet.address])
 
     return (
         <Card onClick={onClick}>
             <Card.Content
                 className={twMerge(
-                    'flex w-full cursor-pointer items-center gap-3 px-4 py-3',
-                    // highlight active wallet with different background
-                    isActive ? 'bg-purple-1 hover:bg-purple-1/90' : 'bg-purple-4 bg-opacity-25 hover:bg-opacity-20'
+                    'flex w-full cursor-pointer items-center gap-3 px-4 py-3 text-black transition-all duration-300',
+                    backgroundColor,
+                    isExternalWallet && !isConnected && 'text-gray-5'
                 )}
             >
                 {/* wallet icon */}
                 <div className="flex size-12 min-w-12 items-center justify-center rounded-full border border-n-1 bg-white p-2">
                     <Image src={walletImage} alt="" width={32} height={32} className="size-7 object-contain" />
                 </div>
+
                 {/* wallet details section */}
-                <div className="w-full space-y-1">
+                <div className="flex w-full flex-col gap-1">
                     <div className="flex w-full items-center justify-between">
-                        <p className="text-base font-bold">
-                            {isPeanutWallet ? 'Peanut' : connector?.name || shortenAddressLong(wallet.address)}
-                        </p>
+                        <div className="flex items-center gap-2">
+                            <p className="text-base font-bold">
+                                {isPeanutWallet
+                                    ? 'Peanut'
+                                    : wallet?.connector?.name || shortenAddressLong(wallet.address)}
+                            </p>
+                        </div>
                         <p className="text-base font-bold">$ {printableUsdc(wallet.balance)}</p>
                     </div>
-                    <div className="flex items-center gap-2">
-                        {isPeanutWallet && username ? (
-                            <p className="text-xs font-medium">
-                                peanut.me/<span className="font-black">{username}</span>
-                            </p>
-                        ) : (
-                            <p className="text-xs font-medium">{shortenAddressLong(wallet.address)}</p>
+
+                    <div className="flex items-center justify-between gap-2">
+                        <div className="flex items-center gap-2">
+                            {isPeanutWallet && username ? (
+                                <p className="text-xs font-medium">
+                                    peanut.me/<span className="font-black">{username}</span>
+                                </p>
+                            ) : (
+                                <p className="text-xs font-medium">{shortenAddressLong(wallet.address)}</p>
+                            )}
+                            <CopyToClipboard
+                                className="h-4 w-4"
+                                fill={'black'}
+                                textToCopy={
+                                    isPeanutWallet && username ? `https://peanut.me/${username}` : wallet.address
+                                }
+                            />
+                        </div>
+                        {isConnected && (
+                            <div
+                                className={classNames('w-20 rounded-sm bg-white/75 px-2 py-1 text-xs font-bold', {
+                                    'text-success-1': isConnected,
+                                })}
+                            >
+                                Connected
+                            </div>
+                        )}
+
+                        {isExternalWallet && !isConnected && (
+                            <button
+                                onClick={handleAction}
+                                disabled={connectionStatus === 'connecting'}
+                                className={classNames(
+                                    'minw w-20 rounded-sm px-2 py-1 text-xs font-bold text-black',
+                                    connectionStatus === 'connecting' ? 'bg-purple-1/50' : 'bg-purple-1'
+                                )}
+                            >
+                                {connectionStatus === 'connecting' ? 'Connecting...' : 'Connect'}
+                            </button>
                         )}
-                        <CopyToClipboard
-                            className="h-4 w-4"
-                            fill="black"
-                            textToCopy={isPeanutWallet && username ? `https://peanut.me/${username}` : wallet.address}
-                        />
                     </div>
                 </div>
             </Card.Content>
@@ -172,7 +235,7 @@ const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) =>
 // add new wallet component, triggers web3modal
 const AddNewWallet = ({ onClick }: { onClick: () => void }) => (
     <Card onClick={onClick}>
-        <Card.Content className="flex min-h-16 w-full cursor-pointer items-center justify-center gap-3 bg-purple-4 bg-opacity-25 px-4 py-3 hover:bg-opacity-20">
+        <Card.Content className="flex min-h-16 w-full cursor-pointer items-center justify-center gap-3 bg-purple-5 px-4 py-3 hover:bg-opacity-90">
             <div className="flex size-7 items-center justify-center rounded-full border border-n-1">
                 <Icon name="plus" fill="black" className="h-7 w-7" />
             </div>
diff --git a/src/components/Global/WalletNavigation/index.tsx b/src/components/Global/WalletNavigation/index.tsx
index dced73214..4f15aff00 100644
--- a/src/components/Global/WalletNavigation/index.tsx
+++ b/src/components/Global/WalletNavigation/index.tsx
@@ -49,14 +49,14 @@ const NavSection: React.FC<NavSectionProps> = ({ title, tabs, pathName, isLastSe
                 href={href}
                 key={name}
                 className={classNames('flex items-center gap-3 hover:cursor-pointer hover:text-white/80', {
-                    'text-purple-1': pathName === href,
+                    'text-primary-1': pathName === href,
                 })}
             >
                 <NavIcons name={icon} className="block h-4 w-4" />
                 <span className="block w-fit pt-0.5 text-center text-base font-semibold">{name}</span>
             </Link>
         ))}
-        {!isLastSection && <div className="w-full border-b border-gray-1" />}
+        {!isLastSection && <div className="w-full border-b border-grey-1" />}
     </>
 )
 
@@ -73,7 +73,7 @@ const MobileNav: React.FC<MobileNavProps> = ({ tabs, pathName }) => (
                 key={name}
                 className={classNames(
                     'flex flex-col items-center justify-center object-contain py-2 hover:cursor-pointer',
-                    { 'text-purple-1': pathName === href }
+                    { 'text-primary-1': pathName === href }
                 )}
             >
                 <NavIcons name={icon} size={24} className="h-7 w-7" />
diff --git a/src/components/Home/HomeHeader.tsx b/src/components/Home/HomeHeader.tsx
index 7ddc59528..5e8bd67ad 100644
--- a/src/components/Home/HomeHeader.tsx
+++ b/src/components/Home/HomeHeader.tsx
@@ -1,8 +1,8 @@
 import { useToast } from '@/components/0_Bruddle/Toast'
 import { useAuth } from '@/context/authContext'
 import useAvatar from '@/hooks/useAvatar'
-import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { Button } from '../0_Bruddle'
 
 const HomeHeader = () => {
diff --git a/src/components/Home/HomeWaitlist.tsx b/src/components/Home/HomeWaitlist.tsx
index 8262a5530..b6a6421d0 100644
--- a/src/components/Home/HomeWaitlist.tsx
+++ b/src/components/Home/HomeWaitlist.tsx
@@ -33,16 +33,16 @@ const HomeWaitlist = () => {
                 <Title text="Home" className="text-8xl" />
                 {username && (
                     <Card>
-                        <Card.Header className="border-none">
-                            <Card.Title className="border-none">Yay {username}!!!</Card.Title>
+                        <Card.Header className="mx-auto border-none">
+                            <Card.Title className="border-none text-center">Yay {username}!!!</Card.Title>
                         </Card.Header>
                     </Card>
                 )}
                 <img src={chillPeanutAnim.src} alt="peanut-club" className="w-[300px] object-cover" />
-                <div className="mt-5 w-full text-center">
+                <div className="mt-5 w-full text-start">
                     {username && (
                         <Card>
-                            <Card.Header className="text-center">
+                            <Card.Header>
                                 <Card.Title className="w-full text-center">You're all set up!</Card.Title>
                                 <Card.Description className="w-full text-center">
                                     Join the group at{' '}
diff --git a/src/components/Home/WalletCard.tsx b/src/components/Home/WalletCard.tsx
index b5e2b6d30..0977a3953 100644
--- a/src/components/Home/WalletCard.tsx
+++ b/src/components/Home/WalletCard.tsx
@@ -2,6 +2,7 @@ import { BG_WALLET_CARD_SVG } from '@/assets'
 import PeanutWalletIcon from '@/assets/icons/small-peanut.png'
 import { Card } from '@/components/0_Bruddle'
 import Icon from '@/components/Global/Icon'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { IWallet, WalletProviderType } from '@/interfaces'
 import { printableUsdc, shortenAddressLong } from '@/utils'
 import { identicon } from '@dicebear/collection'
@@ -12,7 +13,7 @@ import Image from 'next/image'
 import { useMemo } from 'react'
 import CopyToClipboard from '../Global/CopyToClipboard'
 
-const colorArray = ['bg-blue-1', 'bg-yellow-1', 'bg-pink-1']
+const colorArray = ['bg-secondary-3', 'bg-secondary-1', 'bg-primary-1']
 
 type BaseWalletCardProps = {
     onClick?: () => void
@@ -28,6 +29,9 @@ type WalletCardWallet = BaseWalletCardProps & {
     wallet: IWallet
     username: string
     selected?: boolean
+    isConnected?: boolean
+    isUsable?: boolean
+    isFocused?: boolean
     index: number
     isBalanceHidden: boolean
     onToggleBalanceVisibility: (e: React.MouseEvent<HTMLButtonElement>) => void
@@ -36,11 +40,13 @@ type WalletCardWallet = BaseWalletCardProps & {
 type WalletCardProps = WalletCardAdd | WalletCardWallet
 
 export function WalletCard({ type, onClick, ...props }: WalletCardProps) {
+    const { isWalletConnected } = useWallet()
+
     if (type === 'add') {
         return (
             <motion.div className="h-full">
                 <Card
-                    className="h-full min-w-[300px] rounded-xl bg-purple-4/20 text-black hover:cursor-pointer"
+                    className="h-full min-w-[300px] rounded-xl bg-purple-4/25 text-black hover:cursor-pointer"
                     shadowSize="6"
                     onClick={onClick}
                 >
@@ -53,17 +59,16 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) {
         )
     }
 
-    const {
-        wallet,
-        username,
-        selected = false,
-        index,
-        isBalanceHidden,
-        onToggleBalanceVisibility,
-    } = props as WalletCardWallet
+    const { wallet, username, index, isBalanceHidden, onToggleBalanceVisibility, isFocused } = props as WalletCardWallet
+
+    const isExternalWallet = wallet.walletProviderType !== WalletProviderType.PEANUT
+    const isConnected = isWalletConnected(wallet)
 
-    // get color based on the wallet index, cycle through colors
-    const backgroundColor = useMemo(() => colorArray[index % colorArray.length], [index])
+    const backgroundColor = useMemo(() => {
+        if (isExternalWallet && !isConnected) return 'bg-n-4'
+        if (wallet.walletProviderType === WalletProviderType.PEANUT) return 'bg-purple-4'
+        return colorArray[index % colorArray.length]
+    }, [index, isExternalWallet, isConnected, wallet.walletProviderType])
 
     const getWalletImage = useMemo(() => {
         if (wallet.walletProviderType === WalletProviderType.PEANUT) {
@@ -78,18 +83,39 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) {
         )
     }, [wallet])
 
+    const cardOpacity = useMemo(() => {
+        // External wallet cases
+        if (isExternalWallet) {
+            if (!isConnected) {
+                return 'opacity-50 transition-opacity duration-300' // Disconnected external wallet
+            }
+            if (!isFocused) {
+                return 'opacity-70 transition-opacity duration-300' // Connected but not focused external wallet
+            }
+        }
+
+        // Non-external wallets or focused external wallets
+        if (!isFocused) {
+            return 'opacity-80 transition-opacity duration-300' // Not focused wallets
+        }
+
+        return 'opacity-100 transition-opacity duration-300' // Focused wallet
+    }, [isExternalWallet, isConnected, isFocused])
+
     return (
         <motion.div
-            className={classNames('mr-4 h-full', {
-                'opacity-40': !selected,
-            })}
+            className={classNames('mr-4 h-full', cardOpacity)}
             onClick={onClick}
             transition={{ type: 'spring', stiffness: 300, damping: 20 }}
         >
             <Card
                 className={classNames(
-                    'relative flex h-full w-[300px] flex-col gap-4 rounded-xl text-white hover:cursor-pointer',
-                    backgroundColor
+                    'relative flex h-full w-[300px] flex-col gap-4 rounded-xl text-white',
+                    backgroundColor,
+                    {
+                        'cursor-pointer': true,
+                        'text-gray-5 text-opacity-80': isExternalWallet && !isConnected,
+                    }
                 )}
                 shadowSize="6"
             >
@@ -105,11 +131,23 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) {
                                 height={24}
                             />
                         </div>
-                        {wallet.walletProviderType !== WalletProviderType.PEANUT && (
-                            <div className="rounded-md bg-white/75 px-2 py-1 text-xs font-bold text-gray-1">
-                                External
-                            </div>
-                        )}
+                        <div className="flex items-center gap-2">
+                            {isExternalWallet && (
+                                <>
+                                    <div className="rounded-sm bg-white/75 px-2 py-1 text-xs font-bold text-grey-1">
+                                        External
+                                    </div>
+                                    <div
+                                        className={classNames('rounded-sm bg-white/75 px-2 py-1 text-xs font-bold', {
+                                            'text-success-1': isConnected,
+                                            'text-gray-5': !isConnected,
+                                        })}
+                                    >
+                                        {isConnected ? 'Connected' : 'Disconnected'}
+                                    </div>
+                                </>
+                            )}
+                        </div>
                     </div>
 
                     <div className="flex items-center gap-3">
@@ -123,7 +161,13 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) {
                             )}
                         </p>
                         <button onClick={onToggleBalanceVisibility}>
-                            <Icon name={isBalanceHidden ? 'eye-slash' : 'eye'} className="h-6 w-6" fill="white" />
+                            <Icon
+                                name={isBalanceHidden ? 'eye-slash' : 'eye'}
+                                className={classNames('h-6 w-6', {
+                                    'opacity-80': isExternalWallet && !isConnected,
+                                })}
+                                fill={isExternalWallet && !isConnected ? 'bg-gray-5' : 'white'}
+                            />
                         </button>
                     </div>
 
diff --git a/src/components/Home/WalletToggleButton.tsx b/src/components/Home/WalletToggleButton.tsx
index bbfb52853..79227f7ec 100644
--- a/src/components/Home/WalletToggleButton.tsx
+++ b/src/components/Home/WalletToggleButton.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { useCallback } from 'react'
 import { NavIcons } from '../0_Bruddle'
 
diff --git a/src/components/Kyc/index.tsx b/src/components/Kyc/index.tsx
index 7dc896379..2157f5694 100644
--- a/src/components/Kyc/index.tsx
+++ b/src/components/Kyc/index.tsx
@@ -44,7 +44,7 @@ export const KYCComponent = () => {
     if (user && user?.user?.kycStatus === 'verified') {
         return (
             <Card className="shadow-none sm:shadow-primary-4">
-                <Card.Header className="text-center">
+                <Card.Header>
                     <Card.Title>Welcome back, {user?.user?.username ?? user?.user?.email}</Card.Title>
                     <Card.Description>You have already completed the KYC process!</Card.Description>
                 </Card.Header>
@@ -57,7 +57,7 @@ export const KYCComponent = () => {
                         {isLoading ? loadingState : 'Logout'}
                     </Button>
                     {errorState.showError && (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                     )}
diff --git a/src/components/LandingPage/BuildOnUs/index.tsx b/src/components/LandingPage/BuildOnUs/index.tsx
index 92a8f878b..a99af2eb3 100644
--- a/src/components/LandingPage/BuildOnUs/index.tsx
+++ b/src/components/LandingPage/BuildOnUs/index.tsx
@@ -1,12 +1,11 @@
 'use client'
 
-import Image from 'next/image'
-import { motion } from 'framer-motion'
 import { BUILD_ON_US_NOW } from '@/assets'
+import { motion } from 'framer-motion'
 
 export default function BuildOnUs() {
     return (
-        <div className="relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden bg-pink-1">
+        <div className="relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden bg-primary-1">
             <motion.div
                 className="flex flex-col items-center gap-8"
                 initial={{ opacity: 0, translateY: 20 }}
@@ -33,7 +32,7 @@ export default function BuildOnUs() {
                         Integrate
                     </motion.button>
                 </a>
-                <p className="max-w-[600px] px-4 text-center text-lg text-n-1 md:max-w-[50%]">
+                <p className="max-w-[600px] px-4 text-start text-lg text-n-1 md:max-w-[50%]">
                     In awe about Peanut? Want to have something similar in your app or wallet? The app is powered by
                     Peanut Protocol which comes with a powerful set of SDKs and APIs that make any payment as smooth as
                     butter
diff --git a/src/components/LandingPage/faq.tsx b/src/components/LandingPage/faq.tsx
index 4a745b1fe..7a7ce6285 100644
--- a/src/components/LandingPage/faq.tsx
+++ b/src/components/LandingPage/faq.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { useState } from 'react'
-import { Box } from '@chakra-ui/react'
+import { Eyes, PeanutsBG } from '@/assets'
 import { MarqueeComp } from '@/components/Global/MarqueeWrapper'
-import { PeanutsBG, Eyes } from '@/assets'
+import { Box } from '@chakra-ui/react'
+import { useState } from 'react'
 import { FAQsPanel, FAQsProps } from '../Global/FAQs'
 
 type LocalFAQsProps = FAQsProps & {
@@ -22,7 +22,7 @@ export function FAQs({ heading, questions, marquee = { visible: false } }: Local
 
     return (
         <Box
-            className="overflow-x-hidden bg-secondary"
+            className="bg-secondary overflow-x-hidden"
             style={{
                 backgroundImage: `url(${PeanutsBG.src})`,
                 backgroundSize: '10rem auto',
@@ -36,7 +36,7 @@ export function FAQs({ heading, questions, marquee = { visible: false } }: Local
                     message={marquee.message}
                     imageSrc={Eyes.src}
                     imageAnimationClass="animation-rock"
-                    backgroundColor="bg-yellow-1"
+                    backgroundColor="bg-secondary-1"
                 />
             )}
         </Box>
diff --git a/src/components/LandingPage/features.tsx b/src/components/LandingPage/features.tsx
index 8308e3525..f847e1e75 100644
--- a/src/components/LandingPage/features.tsx
+++ b/src/components/LandingPage/features.tsx
@@ -1,38 +1,13 @@
 'use client'
 
+import { HandThumbsUp } from '@/assets'
+import * as chain_logos from '@/assets/chains'
+import { Box, Flex, Stack, useMediaQuery } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
 import { useRef } from 'react'
-import { useMediaQuery } from '@chakra-ui/react'
-import { Stack, Box, Flex, SimpleGrid, GridItem } from '@chakra-ui/react'
-import { motion, useAnimation, useInView } from 'framer-motion'
-import { FeaturesImages, FeaturesBadgeImage } from './imageAssets'
-import { MarqueeComp } from '../Global/MarqueeWrapper'
+import { MarqueeComp, MarqueeWrapper } from '../Global/MarqueeWrapper'
 import { Testimonials } from '../Global/Testimonials'
-import { MarqueeWrapper } from '../Global/MarqueeWrapper'
-import {
-    WALLETCONNECT_LOGO,
-    CLAVE_LOGO,
-    ECO_LOGO,
-    MANTLE_ICON,
-    BLOCKSCOUT_LOGO,
-    HYPERSPHERE_LOGO_SQUARE,
-    ZEEPRIME_LOGO_SQUARE,
-    LONGHASH_LOGO_SQUARE,
-    NAZARE_LOGO_SQUARE,
-    DEREK_PERSON,
-    SHARUK_PERSON,
-    KOFIME_PERSON,
-    SBF_PERSON,
-    SmileStars,
-    PEANUTMAN_HAPPY,
-    HandThumbsUp,
-    HR,
-    Star,
-    Eyes,
-    GoodIdeaSign,
-    SmileSide,
-    PeanutGuy,
-} from '@/assets'
-import * as chain_logos from '@/assets/chains'
+import { FeaturesBadgeImage, FeaturesImages } from './imageAssets'
 
 type FeaturesProps = {
     sections: Array<{
@@ -285,7 +260,7 @@ export function Features({ sections, marquee = { visible: false } }: FeaturesPro
             </Stack>
 
             {marquee.visible && (
-                <MarqueeComp message={marquee.message} imageSrc={HandThumbsUp.src} backgroundColor="bg-yellow-1" />
+                <MarqueeComp message={marquee.message} imageSrc={HandThumbsUp.src} backgroundColor="bg-secondary-1" />
             )}
         </Flex>
     )
diff --git a/src/components/LandingPage/hero.tsx b/src/components/LandingPage/hero.tsx
index 69251535c..2a8a561b4 100644
--- a/src/components/LandingPage/hero.tsx
+++ b/src/components/LandingPage/hero.tsx
@@ -34,7 +34,7 @@ export function Hero({ heading, marquee = { visible: false }, cta, buttonVisible
     }, [])
 
     return (
-        <div className="relative flex min-h-[96vh] flex-col justify-between overflow-x-hidden bg-pink-1 md:min-h-[97vh]">
+        <div className="relative flex min-h-[96vh] flex-col justify-between overflow-x-hidden bg-primary-1 md:min-h-[97vh]">
             <CloudImages screenWidth={screenWidth} />
 
             <div className="lg:mb-16- lg:mt-24- relative mb-8 mt-12 flex grow flex-col justify-between space-y-6 md:mb-10 md:mt-12">
@@ -58,7 +58,11 @@ export function Hero({ heading, marquee = { visible: false }, cta, buttonVisible
 
             <div className="relative z-1">
                 {marquee && (
-                    <MarqueeComp message={marquee.message} imageSrc={HandThumbsUp.src} backgroundColor="bg-yellow-1" />
+                    <MarqueeComp
+                        message={marquee.message}
+                        imageSrc={HandThumbsUp.src}
+                        backgroundColor="bg-secondary-1"
+                    />
                 )}
             </div>
 
diff --git a/src/components/LandingPage/story.tsx b/src/components/LandingPage/story.tsx
index 0323cc8f5..d34774169 100644
--- a/src/components/LandingPage/story.tsx
+++ b/src/components/LandingPage/story.tsx
@@ -1,6 +1,5 @@
-import { Stack, Box } from '@chakra-ui/react'
 import { Eyes, PeanutGuy } from '@/assets'
-import { StoryImages } from './imageAssets'
+import { Box, Stack } from '@chakra-ui/react'
 import { MarqueeComp } from '../Global/MarqueeWrapper'
 import { NutsDivider } from './nutsDivider'
 
@@ -41,7 +40,7 @@ export function Story({ stories, foot, marquee = { visible: false } }: StoryProp
                     message={marquee.message}
                     imageSrc={Eyes.src}
                     imageAnimationClass="animation-rock"
-                    backgroundColor="bg-yellow-1"
+                    backgroundColor="bg-secondary-1"
                 />
             )}
         </Box>
diff --git a/src/components/LinkAccount/index.tsx b/src/components/LinkAccount/index.tsx
index 00e9c1653..94861b0a9 100644
--- a/src/components/LinkAccount/index.tsx
+++ b/src/components/LinkAccount/index.tsx
@@ -46,9 +46,13 @@ export const LinkAccountComponent = () => {
     return (
         <PageContainer>
             <Card className="shadow-none sm:shadow-primary-4">
-                <Card.Header>
-                    <Card.Title>Welcome back, {user?.user?.username ?? user?.user?.email}</Card.Title>
-                    <Card.Description>Before linking an account, you will have to complete KYC!</Card.Description>
+                <Card.Header className="mx-auto text-center">
+                    <Card.Title className="text-center">
+                        Welcome back, {user?.user?.username ?? user?.user?.email}
+                    </Card.Title>
+                    <Card.Description className="text-center">
+                        Before linking an account, you will have to complete KYC!
+                    </Card.Description>
                 </Card.Header>
                 <Card.Content>
                     {user && user?.user?.kycStatus != 'verified' ? (
@@ -61,7 +65,7 @@ export const LinkAccountComponent = () => {
                                 {isLoading ? loadingState : 'Logout'}
                             </Button>
                             {errorState.showError && (
-                                <div className="text-center">
+                                <div className="text-start">
                                     <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                                 </div>
                             )}
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index 6edc134e4..020dc991d 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -1,12 +1,12 @@
 'use client'
+import * as assets from '@/assets'
+import * as context from '@/context'
 import { useAuth } from '@/context/authContext'
-import { GlobalLoginComponent } from '../Global/LoginComponent'
 import { Divider } from '@chakra-ui/react'
+import Link from 'next/link'
 import { useContext, useState } from 'react'
-import * as context from '@/context'
 import Loading from '../Global/Loading'
-import Link from 'next/link'
-import * as assets from '@/assets'
+import { GlobalLoginComponent } from '../Global/LoginComponent'
 const LoginComponent = () => {
     const { user, logoutUser, isFetchingUser } = useAuth()
     const [errorState, setErrorState] = useState<{
@@ -60,7 +60,7 @@ const LoginComponent = () => {
                         )}
                     </button>
                     {errorState.showError && (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                     )}
diff --git a/src/components/Offramp/Confirm.view.tsx b/src/components/Offramp/Confirm.view.tsx
index cf62d79c3..c16841f5e 100644
--- a/src/components/Offramp/Confirm.view.tsx
+++ b/src/components/Offramp/Confirm.view.tsx
@@ -662,20 +662,20 @@ export const OfframpConfirmView = ({
             />
 
             <Card className="shadow-none sm:shadow-primary-4">
-                <Card.Header className="mx-auto">
-                    <Card.Title className="mx-auto text-center">Confirm your details</Card.Title>
-                    <Card.Description className="mx-auto text-center">
+                <Card.Header>
+                    <Card.Title>Confirm your details</Card.Title>
+                    <Card.Description>
                         {offrampType == OfframpType.CASHOUT && (
-                            <>
-                                <label className="text-center text-h8 font-light">
+                            <div className="flex flex-col items-center justify-center gap-2">
+                                <label className="text-start text-h8 font-light">
                                     Cash out your crypto to your bank account. From any token, any chain, directly to
                                     your bank account.
                                 </label>
                                 <FAQComponent />
-                            </>
+                            </div>
                         )}
                         {offrampType == OfframpType.CLAIM && (
-                            <label className="text-center text-h8 font-light">
+                            <label className="text-start text-h8 font-light">
                                 Cash out this link's crypto to your bank account. Works best with popular stablecoins
                                 and other commonly traded tokens.
                             </label>
@@ -704,9 +704,9 @@ export const OfframpConfirmView = ({
                         <div className="my-2 flex w-full flex-col items-center justify-center gap-2">
                             <label className="self-start text-h8 font-light">Please confirm all details:</label>
                             <div className="flex w-full flex-col items-center justify-center gap-2">
-                                <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                                <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                     <div className="flex w-max  flex-row items-center justify-center gap-1">
-                                        <Icon name={'profile'} className="h-4 fill-gray-1" />
+                                        <Icon name={'profile'} className="h-4 fill-grey-1" />
                                         <label className="font-bold">Name</label>
                                     </div>
                                     <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -714,9 +714,9 @@ export const OfframpConfirmView = ({
                                     </span>
                                 </div>
 
-                                <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                                <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                     <div className="flex w-max  flex-row items-center justify-center gap-1">
-                                        <Icon name={'email'} className="h-4 fill-gray-1" />
+                                        <Icon name={'email'} className="h-4 fill-grey-1" />
                                         <label className="font-bold">Email</label>
                                     </div>
                                     <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -724,9 +724,9 @@ export const OfframpConfirmView = ({
                                     </span>
                                 </div>
 
-                                <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                                <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                     <div className="flex w-max  flex-row items-center justify-center gap-1">
-                                        <Icon name={'bank'} className="h-4 fill-gray-1" />
+                                        <Icon name={'bank'} className="h-4 fill-grey-1" />
                                         <label className="font-bold">Bank account</label>
                                     </div>
                                     <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -735,9 +735,9 @@ export const OfframpConfirmView = ({
                                 </div>
 
                                 {offrampType == OfframpType.CLAIM && (
-                                    <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                                    <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                         <div className="flex w-max  flex-row items-center justify-center gap-1">
-                                            <Icon name={'forward'} className="h-4 fill-gray-1" />
+                                            <Icon name={'forward'} className="h-4 fill-grey-1" />
                                             <label className="font-bold">Route</label>
                                         </div>
                                         <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -746,8 +746,8 @@ export const OfframpConfirmView = ({
                                                     (chain) => chain.chainId === claimLinkData?.chainId
                                                 )?.name
                                             }{' '}
-                                            <Icon name={'arrow-next'} className="h-4 fill-gray-1" /> Offramp{' '}
-                                            <Icon name={'arrow-next'} className="h-4 fill-gray-1" />{' '}
+                                            <Icon name={'arrow-next'} className="h-4 fill-grey-1" /> Offramp{' '}
+                                            <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '}
                                             {recipientType?.toUpperCase()}{' '}
                                             <MoreInfo
                                                 text={`Wait, crypto can be converted to real money??? How cool!`}
@@ -756,9 +756,9 @@ export const OfframpConfirmView = ({
                                     </div>
                                 )}
 
-                                <div className="flex w-full flex-row items-center px-2 text-h8 text-gray-1">
+                                <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1">
                                     <div className="flex w-1/3 flex-row items-center gap-1">
-                                        <Icon name={'gas'} className="h-4 fill-gray-1" />
+                                        <Icon name={'gas'} className="h-4 fill-grey-1" />
                                         <label className="font-bold">Fee</label>
                                     </div>
                                     <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal">
@@ -811,9 +811,9 @@ export const OfframpConfirmView = ({
                                     </div>
                                 </div>
 
-                                <div className="flex w-full flex-row items-center px-2 text-h8 text-gray-1">
+                                <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1">
                                     <div className="flex w-1/3 flex-row items-center gap-1">
-                                        <Icon name={'transfer'} className="h-4 fill-gray-1" />
+                                        <Icon name={'transfer'} className="h-4 fill-grey-1" />
                                         <label className="font-bold">Total</label>
                                     </div>
                                     <div className="flex flex-1 items-center justify-end gap-1 text-sm font-normal">
@@ -841,9 +841,9 @@ export const OfframpConfirmView = ({
                                     </div>
                                 </div>
 
-                                <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                                <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                                     <div className="flex w-max flex-row items-center gap-1">
-                                        <Icon name={'transfer'} className="h-4 fill-gray-1" />
+                                        <Icon name={'transfer'} className="h-4 fill-grey-1" />
                                         <label className="font-bold">You will receive</label>
                                     </div>
                                     <div className="flex items-center justify-end gap-1 text-sm font-normal">
@@ -939,7 +939,7 @@ export const OfframpConfirmView = ({
                         )}
 
                         {errorState.showError && (
-                            <div className="text-center">
+                            <div className="text-start">
                                 {errorState.errorMessage === 'offramp unavailable' ? (
                                     <label className="text-h8 font-normal text-red">
                                         This token cannot be cashed out directly.{' '}
diff --git a/src/components/Offramp/PromoCodeChecker.tsx b/src/components/Offramp/PromoCodeChecker.tsx
index dc24c627a..0ae4209cd 100644
--- a/src/components/Offramp/PromoCodeChecker.tsx
+++ b/src/components/Offramp/PromoCodeChecker.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react'
 import Icon from '@/components/Global/Icon'
+import { useEffect, useState } from 'react'
 import { VALID_PROMO_CODES } from './Offramp.consts'
 
 interface PromoState {
@@ -82,15 +82,15 @@ const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeChe
             {!promoCheckerState.isApplied && (
                 <div
                     onClick={handleExpandToggle}
-                    className="flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1 transition-colors duration-200 hover:bg-gray-50"
+                    className="flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1 transition-colors duration-200 hover:bg-gray-50"
                 >
                     <div className="flex w-max flex-row items-center justify-center gap-1">
-                        <Icon name="ticket" className="h-4 fill-gray-1" />
+                        <Icon name="ticket" className="h-4 fill-grey-1" />
                         <label className="font-bold">Apply Promo Code</label>
                     </div>
                     <Icon
                         name={promoCheckerState.isExpanded ? 'chevron-up' : 'arrow-bottom'}
-                        className={`h-4 fill-gray-1 transition-all duration-300`}
+                        className={`h-4 fill-grey-1 transition-all duration-300`}
                     />
                 </div>
             )}
@@ -103,7 +103,7 @@ const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeChe
             `}
             >
                 {promoCheckerState.isApplied ? (
-                    <p className="text-center text-sm text-green-600">
+                    <p className="text-start text-sm text-green-600">
                         Promo code {promoCheckerState.code} applied successfully!
                     </p>
                 ) : (
diff --git a/src/components/Offramp/Success.view.tsx b/src/components/Offramp/Success.view.tsx
index ac57c0732..1ba5c7b06 100644
--- a/src/components/Offramp/Success.view.tsx
+++ b/src/components/Offramp/Success.view.tsx
@@ -44,22 +44,22 @@ export const OfframpSuccessView = ({
 
     return (
         <Card className="shadow-none sm:shadow-primary-4">
-            <Card.Header className="mx-auto text-center">
-                <Card.Title className="mx-auto text-center">Yay!</Card.Title>
-                <Card.Description className="text-center">
+            <Card.Header>
+                <Card.Title>Yay!</Card.Title>
+                <Card.Description>
                     Your funds are on the way. A confirmation email will be sent to {offrampForm.email} shortly. Please
                     keep in mind that it may take up to 2 days for the funds to arrive.
                 </Card.Description>
             </Card.Header>
             <Card.Content className="col gap-2">
-                <label className="text-center text-h2">Yay!</label>
-                <label className="text-center text-h8 font-bold">
+                <label className="text-start text-h2">Yay!</label>
+                <label className="text-start text-h8 font-bold">
                     Your funds are on the way. A confirmation email will be sent to {offrampForm.email} shortly. Please
                     keep in mind that it may take up to 2 days for the funds to arrive.
                 </label>
-                <div className="flex w-full flex-row items-center px-2 text-h8 text-gray-1">
+                <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1">
                     <div className="flex w-1/3 flex-row items-center gap-1">
-                        <Icon name={'gas'} className="h-4 fill-gray-1" />
+                        <Icon name={'gas'} className="h-4 fill-grey-1" />
                         <label className="font-bold">Fee</label>
                     </div>
                     <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal">
@@ -79,9 +79,9 @@ export const OfframpSuccessView = ({
                 </div>
 
                 {/* You will receive section */}
-                <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                     <div className="flex w-max flex-row items-center gap-1">
-                        <Icon name={'transfer'} className="h-4 fill-gray-1" />
+                        <Icon name={'transfer'} className="h-4 fill-grey-1" />
                         <label className="font-bold">You will receive</label>
                     </div>
                     <div className="flex items-center justify-end gap-1 text-sm font-normal">
diff --git a/src/components/Profile/Components/OptionsComponent.tsx b/src/components/Profile/Components/OptionsComponent.tsx
index c8951d8ef..c2d422b29 100644
--- a/src/components/Profile/Components/OptionsComponent.tsx
+++ b/src/components/Profile/Components/OptionsComponent.tsx
@@ -31,7 +31,7 @@ export const OptionsComponent = ({
                         <Menu.Item
                             as={'button'}
                             onClick={actionItem.action}
-                            className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
+                            className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20"
                             key={index}
                         >
                             <div className="text-h8">{actionItem.name}</div>
diff --git a/src/components/Profile/Components/ProfileSection.tsx b/src/components/Profile/Components/ProfileSection.tsx
index dee05ebde..097ee9492 100644
--- a/src/components/Profile/Components/ProfileSection.tsx
+++ b/src/components/Profile/Components/ProfileSection.tsx
@@ -26,11 +26,11 @@ const ProfileSection = ({}: ProfileSectionProps) => {
                         className="size-11 rounded-full border border-black object-contain"
                     />
                     <div className="text-md space-y-1 font-semibold">
-                        <div className="text-gray-1">peanut.me/</div>
+                        <div className="text-grey-1">peanut.me/</div>
                         <div className="flex items-center gap-3">
                             <div className="">{user?.user.username}</div>
                             {user?.user.kycStatus !== null && (
-                                <Badge color="purple" className="bg-white text-purple-1">
+                                <Badge color="purple" className="bg-white text-primary-1">
                                     No KYC
                                 </Badge>
                             )}
diff --git a/src/components/Profile/Components/ProfileWalletBalance.tsx b/src/components/Profile/Components/ProfileWalletBalance.tsx
index 3a25a0f9a..cbf524b47 100644
--- a/src/components/Profile/Components/ProfileWalletBalance.tsx
+++ b/src/components/Profile/Components/ProfileWalletBalance.tsx
@@ -1,6 +1,6 @@
 import { ARBITRUM_ICON } from '@/assets'
 import { Card } from '@/components/0_Bruddle'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { printableUsdc } from '@/utils'
 import Image from 'next/image'
 import { useMemo } from 'react'
@@ -49,7 +49,7 @@ const ProfileWalletBalance = () => {
                             $ {printableUsdc(BigInt(Math.floor(Number(getMaxBalanceToken?.value || 0) * 10 ** 6)))}
                         </div>
                         {getMaxBalanceToken?.symbol && getMaxBalanceToken?.name && (
-                            <div className="text-xs text-gray-1">
+                            <div className="text-xs text-grey-1">
                                 {getMaxBalanceToken?.symbol} on {getMaxBalanceToken?.name}
                             </div>
                         )}
diff --git a/src/components/Profile/Components/SkeletonPage.tsx b/src/components/Profile/Components/SkeletonPage.tsx
index 194459827..66fbd4edb 100644
--- a/src/components/Profile/Components/SkeletonPage.tsx
+++ b/src/components/Profile/Components/SkeletonPage.tsx
@@ -2,7 +2,7 @@ import * as assets from '@/assets'
 import Loading from '@/components/Global/Loading'
 import { GlobalLoginComponent } from '@/components/Global/LoginComponent'
 import { GlobalRegisterComponent } from '@/components/Global/RegisterComponent'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { useState } from 'react'
 
 type ProfileSkeletonProps = {
@@ -196,7 +196,7 @@ export const ProfileSkeleton = ({ onClick, showOverlay = true, errorState, isLoa
                                 'Connect Wallet'
                             )}
                             {errorState.showError && (
-                                <div className="text-center">
+                                <div className="text-start">
                                     <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                                 </div>
                             )}
diff --git a/src/components/Profile/Components/TableComponent.tsx b/src/components/Profile/Components/TableComponent.tsx
index 6adf131b9..ceb1297f0 100644
--- a/src/components/Profile/Components/TableComponent.tsx
+++ b/src/components/Profile/Components/TableComponent.tsx
@@ -1,13 +1,13 @@
 'use client'
-import * as utils from '@/utils'
-import * as interfaces from '@/interfaces'
-import Sorting from '@/components/Global/Sorting'
-import Loading from '@/components/Global/Loading'
 import AddressLink from '@/components/Global/AddressLink'
-import { OptionsComponent } from './OptionsComponent'
+import Loading from '@/components/Global/Loading'
+import Sorting from '@/components/Global/Sorting'
 import * as consts from '@/constants'
-import { useCallback } from 'react'
+import * as interfaces from '@/interfaces'
+import * as utils from '@/utils'
 import { useRouter } from 'next/navigation'
+import { useCallback } from 'react'
+import { OptionsComponent } from './OptionsComponent'
 
 /**
  * TableComponent renders a responsive table for displaying profile-related data based on the selected tab (e.g., history, contacts, or accounts).
@@ -119,7 +119,7 @@ export const TableComponent = ({
 
                                     <td className="td-custom">
                                         {!data.dashboardItem.status ? (
-                                            <div className="border border-gray-1 px-2 py-1 text-center text-gray-1">
+                                            <div className="border border-grey-1 px-2 py-1 text-center text-grey-1">
                                                 <Loading />
                                             </div>
                                         ) : data.dashboardItem.status === 'claimed' ? (
@@ -135,11 +135,11 @@ export const TableComponent = ({
                                                 paid
                                             </div>
                                         ) : data.dashboardItem.status ? (
-                                            <div className="border border-gray-1 px-2 py-1 text-center text-gray-1">
+                                            <div className="border border-grey-1 px-2 py-1 text-center text-grey-1">
                                                 {data.dashboardItem.status.toLowerCase().replaceAll('_', ' ')}
                                             </div>
                                         ) : (
-                                            <div className="border border-gray-1 px-2 py-1 text-center text-gray-1">
+                                            <div className="border border-grey-1 px-2 py-1 text-center text-grey-1">
                                                 pending
                                             </div>
                                         )}
diff --git a/src/components/Profile/Components/Tabs.tsx b/src/components/Profile/Components/Tabs.tsx
index afe93880d..f90c2702e 100644
--- a/src/components/Profile/Components/Tabs.tsx
+++ b/src/components/Profile/Components/Tabs.tsx
@@ -22,7 +22,7 @@ export const Tabs = ({ className, classButton, items, value, setValue }: TabsPro
         <div className={` flex flex-wrap ${className}`}>
             {items.map((item, index) => (
                 <button
-                    className={`text-md whitespace-nowrap rounded px-5 py-1 font-bold outline-none transition-colors tap-highlight-color hover:text-n-3  ${
+                    className={`text-md whitespace-nowrap rounded px-5 py-1 font-bold outline-none transition-colors tap-highlight-color hover:text-grey-1  ${
                         value === item.value ? 'bg-n-1 !text-white dark:bg-white/[0.08]' : ''
                     } ${classButton}`}
                     onClick={() => handleClick(item.value, item.onClick)}
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index da17eeb3b..4b26db4d4 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -2,7 +2,7 @@
 
 import * as context from '@/context'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import * as utils from '@/utils'
 import { useContext, useState } from 'react'
 import { useSignMessage } from 'wagmi'
diff --git a/src/components/Refund/index.tsx b/src/components/Refund/index.tsx
index 6915d4bec..4a84f65f7 100644
--- a/src/components/Refund/index.tsx
+++ b/src/components/Refund/index.tsx
@@ -5,7 +5,7 @@ import { useConfig, useSendTransaction } from 'wagmi'
 
 import * as consts from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import * as utils from '@/utils'
 import { useAppKit } from '@reown/appkit/react'
 import { useContext, useState } from 'react'
@@ -120,9 +120,9 @@ export const Refund = () => {
     return (
         <PageContainer>
             <Card className="shadow-none sm:shadow-primary-4">
-                <Card.Header>
-                    <Card.Title>Refund</Card.Title>
-                    <Card.Description>
+                <Card.Header className="mx-auto text-center">
+                    <Card.Title className="text-center">Refund</Card.Title>
+                    <Card.Description className="mx-auto text-center">
                         This is a page specific for refunding links that failed while creating, but the funds did leave
                         your wallet. Please provide the transaction hash and chainId, and you will be able to claim.
                         Please note that you will have to be connected with the same wallet that you tried creating the
@@ -197,14 +197,14 @@ export const Refund = () => {
                                     <a
                                         href={claimedExploredUrlWithHash ?? ''}
                                         target="_blank"
-                                        className="cursor-pointer text-center text-sm text-black underline "
+                                        className="cursor-pointer text-start text-sm text-black underline "
                                     >
                                         Your transaction hash
                                     </a>
                                 </p>
                             ) : (
                                 errorState.showError && (
-                                    <div className="text-center">
+                                    <div className="text-start">
                                         <label className="font-bold text-red ">{errorState.errorMessage}</label>
                                     </div>
                                 )
diff --git a/src/components/Register/index.tsx b/src/components/Register/index.tsx
index 10982d1c0..744cfa539 100644
--- a/src/components/Register/index.tsx
+++ b/src/components/Register/index.tsx
@@ -1,12 +1,12 @@
 'use client'
-import { GlobalRegisterComponent } from '../Global/RegisterComponent'
+import * as assets from '@/assets'
+import * as context from '@/context'
 import { useAuth } from '@/context/authContext'
 import { Divider } from '@chakra-ui/react'
+import Link from 'next/link'
 import { useContext, useState } from 'react'
-import * as context from '@/context'
 import Loading from '../Global/Loading'
-import Link from 'next/link'
-import * as assets from '@/assets'
+import { GlobalRegisterComponent } from '../Global/RegisterComponent'
 
 const RegisterComponent = () => {
     const { user, logoutUser, isFetchingUser } = useAuth()
@@ -61,7 +61,7 @@ const RegisterComponent = () => {
                         )}
                     </button>
                     {errorState.showError && (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                     )}
diff --git a/src/components/Request/Components/ReferenceAndAttachment.tsx b/src/components/Request/Components/ReferenceAndAttachment.tsx
index 5696fb0c2..2875b5192 100644
--- a/src/components/Request/Components/ReferenceAndAttachment.tsx
+++ b/src/components/Request/Components/ReferenceAndAttachment.tsx
@@ -21,7 +21,7 @@ export const ReferenceAndAttachment = ({
                         href={attachmentUrl}
                         download
                         target="_blank"
-                        className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
+                        className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline "
                     >
                         <Icon name={'download'} />
                         Download attachment
diff --git a/src/components/Request/Create/Create.tsx b/src/components/Request/Create/Create.tsx
index a78842b7f..e061f3a39 100644
--- a/src/components/Request/Create/Create.tsx
+++ b/src/components/Request/Create/Create.tsx
@@ -2,7 +2,7 @@
 
 import PageContainer from '@/components/0_Bruddle/PageContainer'
 import { IAttachmentOptions } from '@/components/Create/Create.consts'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { useRouter } from 'next/navigation'
 import { createElement, useEffect, useState } from 'react'
 import * as _consts from './Create.consts'
diff --git a/src/components/Request/Create/Views/Initial.view.tsx b/src/components/Request/Create/Views/Initial.view.tsx
index 83f2cc8eb..347317b4b 100644
--- a/src/components/Request/Create/Views/Initial.view.tsx
+++ b/src/components/Request/Create/Views/Initial.view.tsx
@@ -8,7 +8,7 @@ import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
 import { InputUpdate } from '@/components/Global/ValidatedInput'
 import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { IToken, IUserBalance } from '@/interfaces'
 import { fetchTokenSymbol, isNativeCurrency, saveRequestLinkToLocalStorage } from '@/utils'
 import { peanut, interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
@@ -167,8 +167,8 @@ export const InitialView = ({
     return (
         <Card className="shadow-none sm:shadow-primary-4">
             <Card.Header>
-                <Card.Title className="mx-auto">Request a payment</Card.Title>
-                <Card.Description className="text-center">
+                <Card.Title>Request a payment</Card.Title>
+                <Card.Description>
                     Choose the amount, token and chain. You will request a payment to your wallet. Add an invoice if you
                     want to.
                 </Card.Description>
@@ -234,7 +234,7 @@ export const InitialView = ({
                     </Button>
                 </div>
                 {errorState.showError && (
-                    <div className="text-center">
+                    <div className="text-start">
                         <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                     </div>
                 )}
diff --git a/src/components/Request/Create/Views/Success.view.tsx b/src/components/Request/Create/Views/Success.view.tsx
index bb9b70409..5cb1ddcc6 100644
--- a/src/components/Request/Create/Views/Success.view.tsx
+++ b/src/components/Request/Create/Views/Success.view.tsx
@@ -9,11 +9,11 @@ export const SuccessView = ({ link }: _consts.ICreateScreenProps) => {
     return (
         <Card className="shadow-none sm:shadow-primary-4">
             <Card.Header className="relative">
-                <Card.Title className="mx-auto">Yay!</Card.Title>
+                <Card.Title>Yay!</Card.Title>
             </Card.Header>
             <Card.Content className="flex flex-col gap-3">
                 <QRCodeWrapper url={link} />
-                <label className="text-center text-h8">
+                <label className="text-start text-h8">
                     Share this link or QR with anyone. They will be able to pay you from any chain in any token.
                 </label>
                 <CopyField text={link} />
diff --git a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
index 53c1ab270..7ac4d9def 100644
--- a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
+++ b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
@@ -20,7 +20,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
 
     return (
         <Card className="shadow-none sm:shadow-primary-4">
-            <Card.Header className="text-center">
+            <Card.Header>
                 <Card.Title>Payment Receipt</Card.Title>
             </Card.Header>
             <Card.Content className="col gap-4">
@@ -29,11 +29,11 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
                     attachmentUrl={requestLinkData?.attachmentUrl}
                 />
                 {dataAvailable && (
-                    <div className="flex w-full flex-col items-center justify-center gap-2">
-                        <label className="text-h8 ">This link previously contained:</label>
+                    <div className="flex w-full flex-col items-start justify-center gap-2 py-2">
+                        <label className="text-h8">This link previously contained:</label>
                         {tokenSymbolAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
-                                <div className="flex w-max  flex-row items-center justify-center gap-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 text-h8  text-grey-1">
+                                <div className="flex w-max flex-row items-center justify-center gap-1 px-2">
                                     <label className="font-bold">Token</label>
                                 </div>
                                 <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -42,7 +42,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
                             </div>
                         )}
                         {tokenAmountAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Amount</label>
                                 </div>
@@ -52,7 +52,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
                             </div>
                         )}
                         {chainAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Chain</label>
                                 </div>
@@ -70,7 +70,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
                             </div>
                         )}
                         {recipientAddressAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Requester</label>
                                 </div>
@@ -82,7 +82,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
                     </div>
                 )}
                 <PaymentsFooter href={'/request/create'} text="Request a payment yourself!" icon="send" />
-                <label className="text-center text-h9 font-normal">
+                <label className="text-start text-h9 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a
                         className="cursor-pointer text-black underline dark:text-white"
diff --git a/src/components/Request/Pay/Views/GeneralViews/Canceled.view.tsx b/src/components/Request/Pay/Views/GeneralViews/Canceled.view.tsx
index 2b1dd55d3..d7550bfe1 100644
--- a/src/components/Request/Pay/Views/GeneralViews/Canceled.view.tsx
+++ b/src/components/Request/Pay/Views/GeneralViews/Canceled.view.tsx
@@ -5,31 +5,29 @@ import Link from 'next/link'
 
 export const CanceledClaimLink = () => {
     return (
-        <Card>
-            <Card.Header>
-                <Card.Title>Sorryyy</Card.Title>
-                <Card.Header>This request had been canceled</Card.Header>
+        <Card className="space-y-3 shadow-none sm:shadow-primary-4">
+            <Card.Header className="mx-auto space-y-2">
+                <Card.Title className="mx-auto text-center">Sorryyy</Card.Title>
+                <Card.Description className="mx-auto text-center">This request had been canceled</Card.Description>
             </Card.Header>
-            <Card.Content>
-                <label className="text-h9 font-normal">
-                    We would like to hear from your experience. Hit us up on{' '}
-                    <a
-                        className="cursor-pointer text-black underline dark:text-white"
-                        target="_blank"
-                        href="https://discord.gg/BX9Ak7AW28"
-                    >
+            <Card.Content className="mx-auto space-y-2 text-center">
+                <div className="block text-h8 font-normal">
+                    Deposit not found. Are you sure your link is correct?
+                    <a className="text-link-decoration" target="_blank" href="https://discord.gg/BX9Ak7AW28">
                         Discord!
                     </a>
-                </label>
+                </div>
 
-                <Link href={'/request/create'}>
-                    <Button variant="stroke">
-                        <div className=" border border-n-1 p-0 px-1">
-                            <Icon name="send" className="-mt-0.5" />
-                        </div>
-                        Make a request yourself!
-                    </Button>
-                </Link>
+                <div className="w-full">
+                    <Link href={'/request/create'}>
+                        <Button variant="stroke">
+                            <div className=" border border-n-1 p-0 px-1">
+                                <Icon name="send" className="-mt-0.5" />
+                            </div>
+                            Make a request yourself!
+                        </Button>
+                    </Link>
+                </div>
             </Card.Content>
         </Card>
     )
diff --git a/src/components/Request/Pay/Views/GeneralViews/Error.view.tsx b/src/components/Request/Pay/Views/GeneralViews/Error.view.tsx
index 474251e95..1ccb6cc1d 100644
--- a/src/components/Request/Pay/Views/GeneralViews/Error.view.tsx
+++ b/src/components/Request/Pay/Views/GeneralViews/Error.view.tsx
@@ -6,31 +6,29 @@ import Link from 'next/link'
 
 export const ErrorView = ({ errorMessage }: { errorMessage: string }) => {
     return (
-        <Card>
-            <Card.Header>
-                <Card.Title>Sorryyyy</Card.Title>
-                <Card.Description>{errorMessage}</Card.Description>
+        <Card className="space-y-3 shadow-none sm:shadow-primary-4">
+            <Card.Header className="mx-auto space-y-2">
+                <Card.Title className="mx-auto text-center">Sorryyy</Card.Title>
+                <Card.Description className="mx-auto text-center">{errorMessage}</Card.Description>
             </Card.Header>
-            <Card.Content className="col gap-4">
-                <label className="text-h9 font-normal">
-                    We would like to hear from your experience. Hit us up on{' '}
-                    <a
-                        className="cursor-pointer text-black underline dark:text-white"
-                        target="_blank"
-                        href="https://discord.gg/BX9Ak7AW28"
-                    >
+            <Card.Content className="mx-auto space-y-2 text-center">
+                <div className="block text-h8 font-normal">
+                    Deposit not found. Are you sure your link is correct?
+                    <a className="text-link-decoration" target="_blank" href="https://discord.gg/BX9Ak7AW28">
                         Discord!
                     </a>
-                </label>
+                </div>
 
-                <Link href={'/request/create'}>
-                    <Button variant="stroke">
-                        <div className=" border border-n-1 p-0 px-1">
-                            <Icon name="send" className="-mt-0.5" />
-                        </div>
-                        Make a request yourself!
-                    </Button>
-                </Link>
+                <div className="w-full">
+                    <Link href={'/request/create'}>
+                        <Button variant="stroke">
+                            <div className=" border border-n-1 p-0 px-1">
+                                <Icon name="send" className="-mt-0.5" />
+                            </div>
+                            Make a request yourself!
+                        </Button>
+                    </Link>
+                </div>
             </Card.Content>
         </Card>
     )
diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx
index be23e9c52..34fc8744d 100644
--- a/src/components/Request/Pay/Views/Initial.view.tsx
+++ b/src/components/Request/Pay/Views/Initial.view.tsx
@@ -10,8 +10,8 @@ import { ReferenceAndAttachment } from '@/components/Request/Components/Referenc
 import * as consts from '@/constants'
 import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
 import * as context from '@/context'
-import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { type ITokenPriceData } from '@/interfaces'
 import {
     areEvmAddressesEqual,
@@ -360,7 +360,7 @@ export const InitialView = ({
             <FlowHeader />
             <Card className="shadow-none sm:shadow-primary-4">
                 <Card.Header>
-                    <Card.Title className="text-center text-h3">
+                    <Card.Title className="text-h3">
                         <AddressLink address={requestLinkData.recipientAddress} /> is requesting
                     </Card.Title>
                 </Card.Header>
@@ -399,7 +399,7 @@ export const InitialView = ({
                             </div>
                         </div>
                         {tokenSupportsXChain ? (
-                            <label className="text-center text-h9 font-light">
+                            <label className="text-start text-h9 font-light">
                                 You can fulfill this payment request with any token on any chain. Pick the token and
                                 chain that you want to fulfill this request with.
                             </label>
@@ -415,9 +415,9 @@ export const InitialView = ({
                     )}
                     {!isFeeEstimationError && (
                         <>
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
-                                    <Icon name={'gas'} className="h-4 fill-gray-1" />
+                                    <Icon name={'gas'} className="h-4 fill-grey-1" />
                                     <label className="font-bold">Network cost</label>
                                 </div>
                                 <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -443,9 +443,9 @@ export const InitialView = ({
                             </div>
 
                             {null !== calculatedSlippage && (
-                                <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                                <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1">
                                     <div className="flex w-max flex-row items-center justify-center gap-1">
-                                        <Icon name={'money-out'} className="h-4 fill-gray-1" />
+                                        <Icon name={'money-out'} className="h-4 fill-grey-1" />
                                         <label className="font-bold">Max slippage</label>
                                     </div>
                                     <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -458,9 +458,9 @@ export const InitialView = ({
                             )}
 
                             {/* TODO: correct points estimation
-                        <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1">
+                        <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                             <div className="flex w-max flex-row items-center justify-center gap-1">
-                                <Icon name={'plus-circle'} className="h-4 fill-gray-1" />
+                                <Icon name={'plus-circle'} className="h-4 fill-grey-1" />
                                 <label className="font-bold">Points</label>
                             </div>
                             <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -509,7 +509,7 @@ export const InitialView = ({
                             {!isConnected && !isPeanutWallet ? 'Connect Wallet' : 'Pay'}
                         </Button>
                         {errorState.showError && (
-                            <div className="text-center">
+                            <div className="text-start">
                                 <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                             </div>
                         )}
diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx
index 2c2e5277a..6e544588a 100644
--- a/src/components/Request/Pay/Views/Success.view.tsx
+++ b/src/components/Request/Pay/Views/Success.view.tsx
@@ -97,7 +97,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
     return (
         <Card className="w-full shadow-none sm:shadow-primary-4">
             <Card.Header>
-                <Card.Title className="mx-auto">Yay!</Card.Title>
+                <Card.Title>Yay!</Card.Title>
                 <Card.Description>
                     You have successfully paid <AddressLink address={requestLinkData.recipientAddress} />!
                 </Card.Description>
@@ -108,7 +108,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
                     attachmentUrl={requestLinkData?.attachmentUrl}
                 />
                 <div className="flex w-full flex-col items-start justify-center gap-1.5 text-h9 font-normal">
-                    <label className="text-center text-h8 font-normal text-gray-1">Transaction details</label>
+                    <label className="text-start text-h8 font-normal text-grey-1">Transaction details</label>
                     <div className="flex w-full flex-row items-center justify-between gap-1">
                         <label className="">Source chain:</label>
                         <Link className="cursor-pointer underline" href={sourceUrlWithTx}>
@@ -139,7 +139,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
                         </>
                     )}
                 </div>
-                <label className="text-center text-h9 font-normal">
+                <label className="text-start text-h9 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a
                         className="cursor-pointer text-black underline dark:text-white"
diff --git a/src/components/Setup/Views/AddWallets.tsx b/src/components/Setup/Views/AddWallets.tsx
index 925d016de..5b15b6a69 100644
--- a/src/components/Setup/Views/AddWallets.tsx
+++ b/src/components/Setup/Views/AddWallets.tsx
@@ -1,26 +1,24 @@
 import { Button } from '@/components/0_Bruddle'
 import { useSetupFlow } from '@/hooks/useSetupFlow'
-import { useAppKit } from '@reown/appkit/react'
-import { useAccount } from 'wagmi'
+import { useWallet } from '@/hooks/wallet/useWallet'
+import { useWalletConnection } from '@/hooks/wallet/useWalletConnection'
 
 const AddWallets = () => {
-    const { open } = useAppKit()
-    const { isConnected, isConnecting } = useAccount()
     const { handleNext } = useSetupFlow()
+    const { isExternalWallet } = useWallet()
+    const { connectWallet: connectNewWallet } = useWalletConnection()
 
-    // todo: replace with new add-wallet component when ready
-    const handleWalletConnect = () => {
-        if (isConnected) {
+    const handleConnect = async () => {
+        if (isExternalWallet) return
+        connectNewWallet().then(() => {
             handleNext()
-        } else {
-            open()
-        }
+        })
     }
 
     return (
         <div className="flex h-full flex-col justify-end gap-2">
-            <Button variant="purple" disabled={isConnecting} onClick={handleWalletConnect} shadowSize="4">
-                {isConnected ? 'Next' : 'Connect'}
+            <Button variant="purple" onClick={handleConnect} shadowSize="4">
+                {isExternalWallet ? 'Next' : 'Connect'}
             </Button>
         </div>
     )
diff --git a/src/components/Setup/Views/SetupPasskey.tsx b/src/components/Setup/Views/SetupPasskey.tsx
index aac60985d..4cc032613 100644
--- a/src/components/Setup/Views/SetupPasskey.tsx
+++ b/src/components/Setup/Views/SetupPasskey.tsx
@@ -10,7 +10,8 @@ const SetupPasskey = () => {
     const { handle } = useSetupStore()
     const { handleNext, isLoading } = useSetupFlow()
     const { handleRegister, address } = useZeroDev()
-    const { addAccount, user } = useAuth()
+    const { user } = useAuth()
+    const { addAccount } = useAuth()
     const [error, setError] = useState<string | null>(null)
 
     useEffect(() => {
@@ -38,14 +39,14 @@ const SetupPasskey = () => {
                     try {
                         await handleRegister(handle)
                     } catch (e) {
-                        console.error('Error registering passkey', e)
-                        setError('Error registering passkey')
+                        console.error('Error registering passkey:', e)
+                        setError('Error registering passkey.')
                     }
                 }}
                 className="text-nowrap"
                 shadowSize="4"
             >
-                Add a passkey
+                Add a Passkey
             </Button>
             {error && <p className="text-sm font-bold text-error">{error}</p>}
         </div>
diff --git a/src/components/Setup/Views/Signup.tsx b/src/components/Setup/Views/Signup.tsx
index 83d94a3eb..d5cdb3b58 100644
--- a/src/components/Setup/Views/Signup.tsx
+++ b/src/components/Setup/Views/Signup.tsx
@@ -102,7 +102,7 @@ const SignupStep = () => {
                     {error && <p className="text-sm font-bold text-error">{error}</p>}
                 </div>
                 <div>
-                    <p className="border-t border-gray-1 pt-2 text-center text-xs text-gray-1">
+                    <p className="border-t border-grey-1 pt-2 text-center text-xs text-grey-1">
                         <span>By creating account you agree with </span>
                         <Link
                             rel="noopener noreferrer"
diff --git a/src/components/Setup/components/SetupWrapper.tsx b/src/components/Setup/components/SetupWrapper.tsx
index 70af56d19..bce9b3567 100644
--- a/src/components/Setup/components/SetupWrapper.tsx
+++ b/src/components/Setup/components/SetupWrapper.tsx
@@ -67,7 +67,7 @@ const Navigation = memo(
                 )}
                 {showSkipButton && (
                     <Button onClick={onSkip} variant="transparent-dark" className="h-auto w-fit p-0">
-                        <span className="text-gray-1">Skip</span>
+                        <span className="text-grey-1">Skip</span>
                     </Button>
                 )}
             </div>
@@ -99,7 +99,7 @@ const ImageSection = ({
             <div
                 className={twMerge(
                     containerClass,
-                    'bg-blue-1/100 relative flex w-full flex-row items-center justify-center overflow-hidden px-4 md:h-[100dvh] md:w-7/12 md:px-6'
+                    'relative flex w-full flex-row items-center justify-center overflow-hidden bg-secondary-3/100 px-4 md:h-[100dvh] md:w-7/12 md:px-6'
                 )}
             >
                 {/* render animated star decorations */}
@@ -134,8 +134,8 @@ const ImageSection = ({
         <div
             className={classNames(
                 containerClass,
-                'bg-blue-1/100 flex w-full flex-row items-center justify-center md:h-[100dvh] md:w-7/12',
-                screenId === 'success' && 'bg-yellow-1/15'
+                'flex w-full flex-row items-center justify-center bg-secondary-3/100 md:h-[100dvh] md:w-7/12',
+                screenId === 'success' && 'bg-secondary-1/15'
             )}
         >
             <Image
diff --git a/src/components/Welcome/welcomeSDK.tsx b/src/components/Welcome/welcomeSDK.tsx
index c5936b0db..9a683b8ad 100644
--- a/src/components/Welcome/welcomeSDK.tsx
+++ b/src/components/Welcome/welcomeSDK.tsx
@@ -1,37 +1,37 @@
 'use client'
 import '@/styles/globals.css'
-import { useEffect, useState } from 'react'
 import { getCalApi } from '@calcom/embed-react'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 
 import {
-    WALLETCONNECT_LOGO,
-    CLAVE_LOGO,
-    ECO_LOGO,
-    MANTLE_ICON,
     BRUME_LOGO,
-    WOOFI_LOGO,
-    TIMESWAP_LOGO,
+    BYBIT_LOGO,
+    CLAVE_LOGO,
     CLEO_LOGO,
+    DEREK_PERSON,
+    DROPDOWN_ICON,
+    ECO_LOGO,
+    IZUMI_LOGO,
+    KOFIME_PERSON,
     KTX_LOGO,
     LENDLE_LOGO,
-    IZUMI_LOGO,
     LOGX_LOGO,
-    BYBIT_LOGO,
-    DEREK_PERSON,
-    SHARUK_PERSON,
-    KOFIME_PERSON,
-    SBF_PERSON,
-    SmileStars,
+    MANTLE_ICON,
     PEANUTMAN_HAPPY,
     REDPACKET_LOTTIE,
+    SBF_PERSON,
+    SHARUK_PERSON,
+    SmileStars,
     TEAL_MOCKUP_1,
-    DROPDOWN_ICON,
+    TIMESWAP_LOGO,
+    WALLETCONNECT_LOGO,
+    WOOFI_LOGO,
 } from '@/assets'
 
 import * as chain_logos from '@/assets/chains'
-import { MarqueeWrapper, MarqueeComp } from '../Global/MarqueeWrapper'
 import Lottie from 'lottie-react'
+import { MarqueeComp, MarqueeWrapper } from '../Global/MarqueeWrapper'
 
 const logoCloudLogos = [
     { icon: WALLETCONNECT_LOGO, link: 'https://walletconnect.com/' },
@@ -54,7 +54,7 @@ const features = [
         name: 'Brand ',
         description:
             'Your brand deserves to be front and center for new users. It’s nuts but you can completely whitelabel these links and use your own domain and branding.',
-        bg: 'bg-yellow-1',
+        bg: 'bg-secondary-1',
         primaryRedirectUrl: 'https://docs.peanut.to/integrate/sdk/branded-links',
         primaryRedirectText: 'Docs',
     },
@@ -62,7 +62,7 @@ const features = [
         name: 'Gasless',
         description:
             'Users should not have to worry about gas, being on the right chain or wallet addresses. Claim and send links solve the cold start problem.',
-        bg: 'bg-pink-1',
+        bg: 'bg-primary-1',
         primaryRedirectUrl: 'https://docs.peanut.to/integrate/sdk/claim/claim-link-gasless',
         primaryRedirectText: 'Docs',
     },
@@ -95,7 +95,7 @@ const features = [
     {
         name: 'Web2 Airdrops',
         description: 'Airdrop your web2 audience (think Discord, Mailchimp, Twitter)',
-        bg: 'bg-yellow-1',
+        bg: 'bg-secondary-1',
         calModal: true,
     },
 ]
@@ -164,7 +164,7 @@ const testimonials = [
         name: 'Kofi.me',
         detail: 'Kofi.me',
         detailRedirectUrl: 'https://www.kofime.xyz/',
-        bgColorClass: 'bg-pink-1',
+        bgColorClass: 'bg-primary-1',
     },
     {
         imageSrc: SBF_PERSON.src, // TODO: replace with actual image@
@@ -172,7 +172,7 @@ const testimonials = [
         comment: 'I have a peanut allergy. Help!',
         name: 'CEx CEO',
         detail: 'Probably FTX',
-        bgColorClass: 'bg-yellow-1',
+        bgColorClass: 'bg-secondary-1',
     },
 ]
 const defaultLottieOptions = {
@@ -269,7 +269,7 @@ export function WelcomeSDK() {
                     </div>
                 </div>
 
-                <div className="center-xy z-index-1 relative hidden w-1/3 items-center justify-center overflow-hidden border-l-2 border-black bg-purple-1 py-3 lg:flex lg:pb-16 lg:pt-16 ">
+                <div className="center-xy z-index-1 relative hidden w-1/3 items-center justify-center overflow-hidden border-l-2 border-black bg-primary-1 py-3 lg:flex lg:pb-16 lg:pt-16 ">
                     <img
                         src={PEANUTMAN_HAPPY.src}
                         className="absolute duration-200 hover:rotate-12"
@@ -279,11 +279,11 @@ export function WelcomeSDK() {
             </div>
 
             <div className="grid w-full grid-cols-1  gap-4 px-4 py-2 text-black lg:grid-cols-3">
-                <label className="flex items-center justify-center border border-n-2 bg-pink-1 px-4 py-8 text-center text-h3 font-black sm:px-16">
+                <label className="flex items-center justify-center border border-n-2 bg-primary-1 px-4 py-8 text-center text-h3 font-black sm:px-16">
                     300k+ Transactions
                 </label>
 
-                <label className="flex items-center justify-center border border-n-2 bg-yellow-1 px-4 py-8 text-center text-h3 font-black sm:px-16">
+                <label className="flex items-center justify-center border border-n-2 bg-secondary-1 px-4 py-8 text-center text-h3 font-black sm:px-16">
                     105k+ Unique wallet addresses
                 </label>
 
@@ -292,7 +292,7 @@ export function WelcomeSDK() {
                 </label>
             </div>
             <div className="w-full px-4 text-black">
-                <div className="flex w-full flex-col items-center justify-between gap-4 border border-n-2 bg-purple-1 py-8 lg:flex-row ">
+                <div className="flex w-full flex-col items-center justify-between gap-4 border border-n-2 bg-primary-1 py-8 lg:flex-row ">
                     <div className="relative flex items-center justify-center px-8 lg:h-1/3 lg:w-1/3">
                         <a href="https://docs.peanut.to/overview/what-are-links" target="_blank">
                             <img
@@ -326,7 +326,7 @@ export function WelcomeSDK() {
                 </div>
             </div>
             <div className="w-full px-4 text-black">
-                <div className="flex w-full flex-col items-center justify-between gap-4 border border-n-2 bg-yellow-1 py-8 lg:flex-row-reverse ">
+                <div className="flex w-full flex-col items-center justify-between gap-4 border border-n-2 bg-secondary-1 py-8 lg:flex-row-reverse ">
                     <div className="relative flex items-center justify-center px-8 lg:h-1/3 lg:w-1/3">
                         <a
                             href="https://docs.peanut.to/overview/case-studies/raffles-to-boost-uwas-and-transactions"
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
deleted file mode 100644
index 2d3cf4d0c..000000000
--- a/src/hooks/useWallet.ts
+++ /dev/null
@@ -1,258 +0,0 @@
-'use client'
-
-import { useToast } from '@/components/0_Bruddle/Toast'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
-import { peanutPublicClient } from '@/constants/viem.consts'
-import { useAuth } from '@/context/authContext'
-import * as interfaces from '@/interfaces'
-import { useAppDispatch, useWalletStore } from '@/redux/hooks'
-import { walletActions } from '@/redux/slices/wallet-slice'
-import { areEvmAddressesEqual, backgroundColorFromAddress, fetchWalletBalances } from '@/utils'
-import { useQuery } from '@tanstack/react-query'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { erc20Abi, getAddress, parseUnits } from 'viem'
-import { useAccount } from 'wagmi'
-import { useZeroDev } from './useZeroDev'
-
-// utility functions
-const isPeanut = (wallet?: interfaces.IDBWallet): boolean =>
-    wallet?.walletProviderType === interfaces.WalletProviderType.PEANUT
-
-const isExternalWallet = (wallet?: interfaces.IDBWallet): boolean =>
-    wallet?.walletProviderType === interfaces.WalletProviderType.BYOW
-
-const createDefaultDBWallet = (address: string): interfaces.IDBWallet => ({
-    walletProviderType: interfaces.WalletProviderType.BYOW,
-    protocolType: interfaces.WalletProtocolType.EVM,
-    address,
-})
-
-export const useWallet = () => {
-    const dispatch = useAppDispatch()
-    const toast = useToast()
-    const { address: kernelClientAddress, isKernelClientReady } = useZeroDev()
-    const { isConnected: isWagmiConnected, addresses: wagmiAddresses, connector } = useAccount()
-    const { addAccount, user } = useAuth()
-    const { selectedAddress, wallets, signInModalVisible, walletColor } = useWalletStore()
-
-    // use a ref to persist processed addresses across renders
-    const processedAddressesRef = useRef(new Set<string>())
-
-    const isWalletConnected = useCallback(
-        (wallet: interfaces.IDBWallet): boolean => {
-            if (isPeanut(wallet) && kernelClientAddress) {
-                return isKernelClientReady && areEvmAddressesEqual(kernelClientAddress, wallet.address)
-            }
-            if (wagmiAddresses) {
-                return isWagmiConnected && wagmiAddresses.some((addr) => areEvmAddressesEqual(addr, wallet.address))
-            }
-            return false
-        },
-        [isKernelClientReady, kernelClientAddress, isWagmiConnected, wagmiAddresses]
-    )
-
-    useQuery({
-        queryKey: ['wallets', user?.accounts, wagmiAddresses],
-        queryFn: async () => {
-            if (!user && !wagmiAddresses) return []
-
-            const processedWallets = user
-                ? await Promise.all(
-                      user.accounts
-                          .filter((account) =>
-                              Object.values(interfaces.WalletProviderType).includes(
-                                  account.account_type as unknown as interfaces.WalletProviderType
-                              )
-                          )
-                          .sort((a, b) => {
-                              if (interfaces.AccountType.PEANUT_WALLET === a.account_type) {
-                                  return -1
-                              } else if (interfaces.AccountType.PEANUT_WALLET === b.account_type) {
-                                  return 1
-                              }
-                              const dateA = new Date(a.created_at)
-                              const dateB = new Date(b.created_at)
-                              return dateA.getTime() - dateB.getTime()
-                          })
-                          .map(async (account) => {
-                              const dbWallet: interfaces.IDBWallet = {
-                                  walletProviderType: account.account_type as unknown as interfaces.WalletProviderType,
-                                  protocolType: interfaces.WalletProtocolType.EVM,
-                                  address: account.account_identifier,
-                                  connector: {
-                                      iconUrl: connector?.icon || account.connector?.iconUrl!,
-                                      name: connector?.name || account.connector?.name!,
-                                  },
-                              }
-
-                              let balance = BigInt(0)
-                              let balances: interfaces.IUserBalance[] | undefined
-
-                              if (isPeanut(dbWallet)) {
-                                  balance = await peanutPublicClient.readContract({
-                                      address: PEANUT_WALLET_TOKEN,
-                                      abi: erc20Abi,
-                                      functionName: 'balanceOf',
-                                      args: [getAddress(dbWallet.address)],
-                                  })
-                              } else {
-                                  const { balances: fetchedBalances, totalBalance } = await fetchWalletBalances(
-                                      dbWallet.address
-                                  )
-                                  balances = fetchedBalances
-                                  balance = parseUnits(totalBalance.toString(), 6)
-                              }
-
-                              return { ...dbWallet, balance, balances, connected: isWalletConnected(dbWallet) }
-                          })
-                  )
-                : wagmiAddresses
-                  ? await Promise.all(
-                        wagmiAddresses.map(async (address) => {
-                            const { balances, totalBalance } = await fetchWalletBalances(address)
-                            return {
-                                ...createDefaultDBWallet(address),
-                                connected: isWalletConnected(createDefaultDBWallet(address)),
-                                balances,
-                                balance: parseUnits(totalBalance.toString(), PEANUT_WALLET_TOKEN_DECIMALS),
-                                connector: {
-                                    iconUrl: connector?.icon,
-                                    name: connector?.name,
-                                },
-                            }
-                        })
-                    )
-                  : []
-            dispatch(walletActions.setWallets(processedWallets))
-            return processedWallets
-        },
-        staleTime: 30 * 1000, // 30 seconds
-        gcTime: 1 * 60 * 1000, // 1 minute
-    })
-
-    const selectedWallet = useMemo(() => {
-        if (!selectedAddress || !wallets.length) return undefined
-        const wallet = wallets.find((w) => w.address === selectedAddress)
-        return wallet ? { ...wallet, connected: isWalletConnected(wallet) } : undefined
-    }, [selectedAddress, wallets, isWalletConnected])
-
-    useEffect(() => {
-        if (!selectedAddress && wallets.length) {
-            const initialWallet = wallets.find(isPeanut) || wallets[0]
-            if (initialWallet) {
-                dispatch(walletActions.setSelectedAddress(initialWallet.address))
-            }
-        }
-    }, [wallets, selectedAddress, dispatch])
-
-    useEffect(() => {
-        if (selectedWallet?.address) {
-            dispatch(walletActions.setWalletColor(backgroundColorFromAddress(selectedWallet.address)))
-        }
-    }, [selectedWallet, dispatch])
-
-    useEffect(() => {
-        if (!user || !wagmiAddresses || !wallets.length) return
-
-        // create a Set of existing wallet addresses for faster lookup
-        const existingAddresses = new Set(wallets.map((wallet) => wallet.address.toLowerCase()))
-
-        // gilter and process new addresses only once
-        const newAddresses = wagmiAddresses.filter((addr) => {
-            const lowerAddr = addr.toLowerCase()
-            if (!existingAddresses.has(lowerAddr) && !processedAddressesRef.current.has(lowerAddr)) {
-                processedAddressesRef.current.add(lowerAddr)
-                return true
-            }
-            return false
-        })
-
-        if (newAddresses.length) {
-            const connectorInfo =
-                connector && connector.icon
-                    ? {
-                          iconUrl: connector.icon,
-                          name: connector.name,
-                      }
-                    : undefined
-
-            // Promise.allSettled to ensure all API calls are handled correctly
-            ;(async () => {
-                const addAccountPromises = newAddresses.map((address) =>
-                    addAccount({
-                        accountIdentifier: address,
-                        accountType: interfaces.WalletProviderType.BYOW,
-                        userId: user.user.userId,
-                        connector: connectorInfo,
-                    }).catch((error) => {
-                        console.error(`Error adding wallet ${address}:`, error)
-                        const errorMsg = error.message.includes('Account already exists')
-                            ? 'Could not add external wallet, already associated with another account'
-                            : 'Unexpected error adding external wallet'
-                        toast.error(errorMsg)
-                    })
-                )
-
-                await Promise.allSettled(addAccountPromises)
-            })()
-        }
-    }, [wagmiAddresses, user?.user.userId, wallets, connector])
-
-    const refetchBalances = useCallback(
-        async (address: string) => {
-            const wallet = wallets.find((w) => w.address === address)
-            if (!wallet) return
-
-            try {
-                if (isPeanut(wallet)) {
-                    const balance = await peanutPublicClient.readContract({
-                        address: PEANUT_WALLET_TOKEN,
-                        abi: erc20Abi,
-                        functionName: 'balanceOf',
-                        args: [getAddress(address)],
-                    })
-                    dispatch(walletActions.updateWalletBalance({ address, balance }))
-                } else {
-                    const { balances, totalBalance } = await fetchWalletBalances(address)
-                    dispatch(
-                        walletActions.updateWalletBalance({
-                            address,
-                            balances,
-                            balance: parseUnits(totalBalance.toString(), PEANUT_WALLET_TOKEN_DECIMALS),
-                        })
-                    )
-                }
-            } catch (error) {
-                console.error('Error refetching balance:', error)
-            }
-        },
-        [wallets]
-    )
-
-    const selectExternalWallet = useCallback(() => {
-        if (wagmiAddresses?.length) {
-            dispatch(walletActions.setSelectedAddress(wagmiAddresses[0]))
-        }
-    }, [wagmiAddresses, dispatch])
-
-    return {
-        wallets,
-        selectedWallet,
-        setSelectedWallet: (wallet: interfaces.IWallet) => {
-            dispatch(walletActions.setSelectedAddress(wallet.address))
-        },
-        address: selectedWallet?.address,
-        chain: PEANUT_WALLET_CHAIN,
-        isConnected: !!selectedWallet?.connected,
-        signInModal: {
-            visible: signInModalVisible,
-            open: () => dispatch(walletActions.setSignInModalVisible(true)),
-            close: () => dispatch(walletActions.setSignInModalVisible(false)),
-        },
-        walletColor,
-        refetchBalances,
-        isPeanutWallet: isPeanut(selectedWallet),
-        isExternalWallet: isExternalWallet(selectedWallet),
-        selectExternalWallet,
-    }
-}
diff --git a/src/hooks/useWalletType.tsx b/src/hooks/useWalletType.tsx
index 217a23c12..2adc55c05 100644
--- a/src/hooks/useWalletType.tsx
+++ b/src/hooks/useWalletType.tsx
@@ -1,6 +1,6 @@
 import SafeAppsSDK from '@safe-global/safe-apps-sdk'
 import { useEffect, useRef, useState } from 'react'
-import { useWallet } from './useWallet'
+import { useWallet } from './wallet/useWallet'
 
 type Opts = {
     allowedDomains?: RegExp[]
diff --git a/src/hooks/wallet/useWallet.ts b/src/hooks/wallet/useWallet.ts
new file mode 100644
index 000000000..2770e0cc6
--- /dev/null
+++ b/src/hooks/wallet/useWallet.ts
@@ -0,0 +1,216 @@
+'use client'
+
+import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
+import { peanutPublicClient } from '@/constants/viem.consts'
+import { useAuth } from '@/context/authContext'
+import * as interfaces from '@/interfaces'
+import { useAppDispatch, useWalletStore } from '@/redux/hooks'
+import { walletActions } from '@/redux/slices/wallet-slice'
+import { areEvmAddressesEqual, backgroundColorFromAddress, fetchWalletBalances } from '@/utils'
+import { useAppKitAccount } from '@reown/appkit/react'
+import { useQuery } from '@tanstack/react-query'
+import { useCallback, useEffect, useMemo } from 'react'
+import { erc20Abi, getAddress, parseUnits } from 'viem'
+import { useAccount } from 'wagmi'
+import { useZeroDev } from '../useZeroDev'
+
+// utility functions
+const isPeanut = (wallet?: interfaces.IDBWallet): boolean =>
+    wallet?.walletProviderType === interfaces.WalletProviderType.PEANUT
+
+const isExternalWallet = (wallet?: interfaces.IDBWallet): boolean =>
+    wallet?.walletProviderType === interfaces.WalletProviderType.BYOW
+
+const createDefaultDBWallet = (address: string): interfaces.IDBWallet => ({
+    walletProviderType: interfaces.WalletProviderType.BYOW,
+    protocolType: interfaces.WalletProtocolType.EVM,
+    address,
+})
+
+export const useWallet = () => {
+    const dispatch = useAppDispatch()
+    const { user } = useAuth()
+    const { address: kernelClientAddress, isKernelClientReady } = useZeroDev()
+    const { addresses: wagmiAddress, connector } = useAccount()
+    const { isConnected: isWagmiConnected } = useAppKitAccount()
+
+    const { selectedAddress, wallets, signInModalVisible, walletColor } = useWalletStore()
+
+    const isWalletConnected = useCallback(
+        (wallet: interfaces.IDBWallet): boolean => {
+            if (isPeanut(wallet) && kernelClientAddress) {
+                return isKernelClientReady && areEvmAddressesEqual(kernelClientAddress, wallet.address)
+            }
+            if (wagmiAddress) {
+                return isWagmiConnected && wagmiAddress.some((addr) => areEvmAddressesEqual(addr, wallet.address))
+            }
+            return false
+        },
+        [isKernelClientReady, kernelClientAddress, isWagmiConnected, wagmiAddress]
+    )
+
+    const fetchWalletDetails = useCallback(
+        async (address: string, walletProviderType: interfaces.WalletProviderType) => {
+            const dbWallet: interfaces.IDBWallet = {
+                walletProviderType,
+                protocolType: interfaces.WalletProtocolType.EVM,
+                address,
+                connector: {
+                    iconUrl: connector?.icon || '',
+                    name: connector?.name || 'External Wallet',
+                },
+            }
+
+            let balance = BigInt(0)
+            let balances: interfaces.IUserBalance[] | undefined
+
+            if (isPeanut(dbWallet)) {
+                balance = await peanutPublicClient.readContract({
+                    address: PEANUT_WALLET_TOKEN,
+                    abi: erc20Abi,
+                    functionName: 'balanceOf',
+                    args: [getAddress(address)],
+                })
+            } else {
+                const { balances: fetchedBalances, totalBalance } = await fetchWalletBalances(address)
+                balances = fetchedBalances
+                balance = parseUnits(totalBalance.toString(), PEANUT_WALLET_TOKEN_DECIMALS)
+            }
+
+            return { ...dbWallet, balance, balances, connected: isWalletConnected(dbWallet) }
+        },
+        [connector, isWalletConnected]
+    )
+
+    const mergeAndProcessWallets = useCallback(async () => {
+        const userAccounts = user?.accounts || []
+        const wagmiAddressesList = wagmiAddress || []
+
+        const processedAccounts = await Promise.all(
+            userAccounts
+                .filter((account) =>
+                    Object.values(interfaces.WalletProviderType).includes(
+                        account.account_type as unknown as interfaces.WalletProviderType
+                    )
+                )
+                .sort((a, b) => {
+                    if (interfaces.AccountType.PEANUT_WALLET === a.account_type) {
+                        return -1
+                    } else if (interfaces.AccountType.PEANUT_WALLET === b.account_type) {
+                        return 1
+                    }
+                    const dateA = new Date(a.created_at)
+                    const dateB = new Date(b.created_at)
+                    return dateA.getTime() - dateB.getTime()
+                })
+                .map((account) =>
+                    fetchWalletDetails(
+                        account.account_identifier,
+                        account.account_type as unknown as interfaces.WalletProviderType
+                    )
+                )
+        )
+
+        const processedExternalWallets = await Promise.all(
+            wagmiAddressesList.map((address) => fetchWalletDetails(address, interfaces.WalletProviderType.BYOW))
+        )
+
+        const mergedWallets = [...processedAccounts, ...processedExternalWallets].reduce((unique, wallet) => {
+            if (!unique.some((w) => areEvmAddressesEqual(w.address, wallet.address))) {
+                unique.push(wallet)
+            }
+            return unique
+        }, [] as interfaces.IDBWallet[])
+
+        dispatch(walletActions.setWallets(mergedWallets))
+        return mergedWallets
+    }, [fetchWalletDetails, wagmiAddress, user?.accounts, dispatch])
+
+    useQuery({
+        queryKey: ['wallets', user?.accounts, wagmiAddress],
+        queryFn: mergeAndProcessWallets,
+        enabled: !!user || !!wagmiAddress,
+        staleTime: 30 * 1000, // 30 seconds
+        gcTime: 1 * 60 * 1000, // 1 minute
+    })
+
+    const selectedWallet = useMemo(() => {
+        if (!selectedAddress || !wallets.length) return undefined
+        const wallet = wallets.find((w) => w.address === selectedAddress)
+        return wallet ? { ...wallet, connected: isWalletConnected(wallet) } : undefined
+    }, [selectedAddress, wallets, isWalletConnected])
+
+    useEffect(() => {
+        if (!selectedAddress && wallets.length) {
+            const initialWallet = wallets.find(isPeanut) || wallets[0]
+            if (initialWallet) {
+                dispatch(walletActions.setSelectedAddress(initialWallet.address))
+            }
+        }
+    }, [wallets, selectedAddress, dispatch])
+
+    useEffect(() => {
+        if (selectedWallet?.address) {
+            dispatch(walletActions.setWalletColor(backgroundColorFromAddress(selectedWallet.address)))
+        }
+    }, [selectedWallet, dispatch])
+
+    const refetchBalances = useCallback(
+        async (address: string) => {
+            const wallet = wallets.find((w) => w.address === address)
+            if (!wallet) return
+
+            try {
+                if (isPeanut(wallet)) {
+                    const balance = await peanutPublicClient.readContract({
+                        address: PEANUT_WALLET_TOKEN,
+                        abi: erc20Abi,
+                        functionName: 'balanceOf',
+                        args: [getAddress(address)],
+                    })
+                    dispatch(walletActions.updateWalletBalance({ address, balance }))
+                } else {
+                    const { balances, totalBalance } = await fetchWalletBalances(address)
+                    dispatch(
+                        walletActions.updateWalletBalance({
+                            address,
+                            balances,
+                            balance: parseUnits(totalBalance.toString(), PEANUT_WALLET_TOKEN_DECIMALS),
+                        })
+                    )
+                }
+            } catch (error) {
+                console.error('Error refetching balance:', error)
+            }
+        },
+        [wallets]
+    )
+
+    const selectExternalWallet = useCallback(() => {
+        if (wagmiAddress?.length) {
+            dispatch(walletActions.setSelectedAddress(wagmiAddress[0]))
+        }
+    }, [wagmiAddress, dispatch])
+
+    return {
+        wallets,
+        selectedWallet,
+        setSelectedWallet: (wallet: interfaces.IWallet) => {
+            dispatch(walletActions.setSelectedAddress(wallet.address))
+        },
+        address: selectedWallet?.address,
+        chain: PEANUT_WALLET_CHAIN,
+        isConnected: !!selectedWallet?.connected,
+        signInModal: {
+            visible: signInModalVisible,
+            open: () => dispatch(walletActions.setSignInModalVisible(true)),
+            close: () => dispatch(walletActions.setSignInModalVisible(false)),
+        },
+        walletColor,
+        refetchBalances,
+        isPeanutWallet: isPeanut(selectedWallet),
+        isExternalWallet: isExternalWallet(selectedWallet),
+        selectExternalWallet,
+        isWalletConnected,
+    }
+}
diff --git a/src/hooks/wallet/useWalletConnection.ts b/src/hooks/wallet/useWalletConnection.ts
new file mode 100644
index 000000000..e7378c684
--- /dev/null
+++ b/src/hooks/wallet/useWalletConnection.ts
@@ -0,0 +1,105 @@
+'use client'
+
+import { useToast } from '@/components/0_Bruddle/Toast'
+import { useAuth } from '@/context/authContext'
+import * as interfaces from '@/interfaces'
+import { useAppKit, useAppKitAccount, useDisconnect } from '@reown/appkit/react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+
+export const useWalletConnection = () => {
+    const { open: openWalletModal } = useAppKit()
+    const { disconnect: disconnectWallet } = useDisconnect()
+    const { status, address: connectedAddress } = useAppKitAccount()
+    const { user, addAccount, fetchUser } = useAuth()
+    const toast = useToast()
+
+    const processedAddresses = useRef(new Set<string>())
+    const isProcessing = useRef(false)
+
+    // helper function to check if an address already exists in user accounts
+    const isAddressInUserAccounts = useCallback(
+        (address: string) =>
+            user?.accounts.some((acc) => acc.account_identifier.toLowerCase() === address.toLowerCase()),
+        [user]
+    )
+
+    // Memoized list of user addresses
+    const userAddresses = useMemo(() => user?.accounts.map((acc) => acc.account_identifier.toLowerCase()) || [], [user])
+
+    // add wallet to backend and fetch updated user data
+    const addWalletToBackend = useCallback(
+        async (address: string) => {
+            const lowerAddress = address.toLowerCase()
+            if (!address || !user || isProcessing.current || processedAddresses.current.has(lowerAddress)) {
+                return false
+            }
+
+            if (isAddressInUserAccounts(lowerAddress)) {
+                processedAddresses.current.add(lowerAddress)
+                return false
+            }
+
+            try {
+                isProcessing.current = true
+                await addAccount({
+                    accountIdentifier: address,
+                    accountType: interfaces.WalletProviderType.BYOW,
+                    userId: user.user.userId,
+                })
+                await fetchUser()
+                processedAddresses.current.add(lowerAddress)
+                toast.success('Wallet added successfully')
+                return true
+            } catch (error) {
+                console.error('Error adding wallet:', error)
+                toast.error('Failed to add wallet')
+                return false
+            } finally {
+                isProcessing.current = false
+            }
+        },
+        [user, addAccount, fetchUser, toast, isAddressInUserAccounts]
+    )
+
+    // automatically add connected wallet to backend if not already present
+    useEffect(() => {
+        if (connectedAddress && !userAddresses.includes(connectedAddress.toLowerCase())) {
+            addWalletToBackend(connectedAddress)
+        }
+    }, [connectedAddress, userAddresses])
+
+    // connect wallet and add it to backend
+    const connectWallet = useCallback(async () => {
+        try {
+            if (status === 'connected' && connectedAddress) {
+                await disconnectWallet()
+            }
+
+            await openWalletModal({ view: 'Connect' })
+
+            // todo: not a very elegant solution, but it works, need to refine this later
+            // wait for connection and attempt to add wallet
+            for (let attempt = 0; attempt < 10 && !isProcessing.current; attempt++) {
+                if (status === 'connected' && connectedAddress) {
+                    await addWalletToBackend(connectedAddress)
+                    break
+                }
+                await new Promise((resolve) => setTimeout(resolve, 500))
+            }
+        } catch (error) {
+            // todo: add-account throughs 500 error sometimes without proper error handling from backend, need to fix this later
+            console.error('Connection error:', error)
+            if ((error as any).response?.status === 500) {
+                console.error('Server error:', error)
+            } else {
+                toast.error('Failed to connect wallet')
+            }
+        }
+    }, [openWalletModal, status, connectedAddress, addWalletToBackend, toast])
+
+    return {
+        connectWallet,
+        isConnecting: status === 'connecting' || isProcessing.current,
+        connectionStatus: status,
+    }
+}
diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts
index 5cde23c80..d699189e9 100644
--- a/src/interfaces/interfaces.ts
+++ b/src/interfaces/interfaces.ts
@@ -386,7 +386,7 @@ export type ChainIdType =
     | '7777777'
     | '1313161554'
 
-interface Account {
+export interface Account {
     account_id: string
     user_id: string
     bridge_account_id: string
diff --git a/src/redux/slices/wallet-slice.ts b/src/redux/slices/wallet-slice.ts
index f0b957407..48d0f0d64 100644
--- a/src/redux/slices/wallet-slice.ts
+++ b/src/redux/slices/wallet-slice.ts
@@ -5,6 +5,7 @@ import { WalletUIState } from '../types/wallet.types'
 
 const initialState: WalletUIState = {
     selectedAddress: getUserPreferences()?.lastSelectedWallet?.address,
+    focusedWallet: getUserPreferences()?.lastFocusedWallet?.address,
     signInModalVisible: false,
     wallets: [],
     isConnected: false,
@@ -21,6 +22,12 @@ const walletSlice = createSlice({
                 lastSelectedWallet: { address: action.payload },
             })
         },
+        setFocusedWallet: (state, action) => {
+            state.focusedWallet = action.payload.address
+            updateUserPreferences({
+                lastFocusedWallet: { address: action.payload.address },
+            })
+        },
         setSignInModalVisible: (state, action) => {
             state.signInModalVisible = action.payload
         },
diff --git a/src/redux/types/wallet.types.ts b/src/redux/types/wallet.types.ts
index cda2cbe76..932c9d5f3 100644
--- a/src/redux/types/wallet.types.ts
+++ b/src/redux/types/wallet.types.ts
@@ -2,6 +2,7 @@ import { IWallet } from '@/interfaces'
 
 export interface WalletUIState {
     selectedAddress?: string | undefined
+    focusedWallet?: string | undefined
     signInModalVisible: boolean
     wallets: IWallet[]
     isConnected: boolean
diff --git a/src/styles/globals.bruddle.css b/src/styles/globals.bruddle.css
deleted file mode 100644
index ad354c3b7..000000000
--- a/src/styles/globals.bruddle.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@config "../../tailwind.bruddle.js";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6ec1f7af1..149920608 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,27 +1,29 @@
-@config "../../tailwind.config.js";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-    --primary-color: theme('colors.purple.1');
-    --secondary-color: theme('colors.violet.3');
-    --background-color: theme('colors.teal.2');
-    --accent-color: theme('colors.violet.3');
+    --primary-color: #ff90e8;
+    --secondary-color: #6340df;
+    --background-color: #90a8ed;
+    --accent-color: #6340df;
 }
 
 @layer components {
     .splide__pagination.splide__pagination-cards {
         @apply static mt-2;
     }
+
     .splide__pagination.splide__pagination-crypto {
         @apply -top-10 bottom-auto left-auto right-0;
     }
+
     .splide__pagination .splide__pagination__page {
         @apply mx-1 bg-purple-3;
     }
+
     .splide__pagination .splide__pagination__page.is-active {
-        @apply scale-100 bg-purple-1;
+        @apply scale-100 bg-primary-1;
     }
 }
 
@@ -66,14 +68,17 @@ Firefox input[type='number'] {
     0% {
         top: 0;
     }
+
     25% {
         /* top: -3rem; */
         top: -100%;
     }
+
     50% {
         /* top: -6rem; */
         top: -200%;
     }
+
     75% {
         /* top: -9rem; */
         top: -300%;
@@ -95,44 +100,33 @@ Firefox input[type='number'] {
     0% {
         background-position: 0% 50%;
     }
+
     50% {
         background-position: 100% 50%;
     }
+
     100% {
         background-position: 0% 50%;
     }
 }
 
 .gradient-text {
-    font-size: 2rem; /* Adjust font size as needed */
-    font-weight: bold; /* Make the text bold */
+    font-size: 2rem;
+    /* Adjust font size as needed */
+    font-weight: bold;
+    /* Make the text bold */
     height: auto;
     width: 100%;
-    background: linear-gradient(to right, #9747ff, #ff90e8); /* Gradient direction and colors */
+    background: linear-gradient(to right, #9747ff, #ff90e8);
+    /* Gradient direction and colors */
     -webkit-background-clip: text;
     background-clip: text;
-    color: transparent; /* Make the text color transparent */
-    animation: slide 3s linear infinite; /* Animation named 'slide', adjust timing as needed */
+    color: transparent;
+    /* Make the text color transparent */
+    animation: slide 3s linear infinite;
+    /* Animation named 'slide', adjust timing as needed */
 }
 
-/* .testimonial { */
-/* position: relative; */
-/* z-index: 9; */
-/* @apply bg-white rounded-3xl shadow-lg border-2 border-n-1 ring-2 ring-white; */
-/* } */
-
-/* .testimonial:after {
-    content: '';
-    z-index: -1;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    @apply bg-white rounded-3xl shadow-lg border-2 border-n-1 ring-2 ring-white;
-} */
-
 .testimonial-0-bg {
     top: 0.8rem;
     left: -0.7rem;
@@ -245,6 +239,7 @@ Firefox input[type='number'] {
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(-360deg);
     }
@@ -259,11 +254,11 @@ Firefox input[type='number'] {
 }
 
 .text-link-decoration {
-    @apply underline decoration-neutral-400 decoration-2 underline-offset-4 transition-colors duration-200 hover:decoration-purple-1;
+    @apply underline decoration-neutral-400 decoration-2 underline-offset-4 transition-colors duration-200 hover:decoration-primary-1;
 }
 
 .text-link {
-    @apply font-black text-black underline decoration-neutral-400 decoration-2 underline-offset-4 transition-colors duration-200 hover:decoration-purple-1;
+    @apply font-black text-black underline decoration-neutral-400 decoration-2 underline-offset-4 transition-colors duration-200 hover:decoration-primary-1;
 }
 
 .text-h2 {
@@ -285,20 +280,20 @@ Firefox input[type='number'] {
 
 /* Feature styling */
 .feature {
-    @apply mx-auto flex w-auto justify-center rounded-full border-2 border-secondary bg-white px-5 py-3 text-center text-[1.375rem] font-black uppercase text-secondary shadow-md ring-2 ring-white md:mr-auto;
+    @apply mx-auto flex w-auto justify-center rounded-full border-2 border-violet-3 bg-white px-5 py-3 text-center text-[1.375rem] font-black uppercase text-violet-3 shadow-md ring-2 ring-white md:mr-auto;
 }
 
 .feature-primary {
-    @apply bg-primary text-white;
+    @apply bg-primary-1 text-white;
 }
 
 .feature-secondary {
-    @apply border-secondary bg-secondary text-white;
+    @apply border-violet-3 bg-violet-3 text-white;
 }
 
 /* Form styling */
 .input-text {
-    @apply h-12 w-full border border-n-1 bg-white px-3 font-medium outline-none ring-2 ring-white transition-colors focus:border-purple-1 dark:border-white dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1;
+    @apply h-12 w-full border border-n-1 bg-white px-3 font-medium outline-none ring-2 ring-white transition-colors focus:border-primary-1 dark:border-white dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-primary-1;
 }
 
 .input-text-inset {
diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts
index a686f0baa..cf778eb5a 100644
--- a/src/utils/general.utils.ts
+++ b/src/utils/general.utils.ts
@@ -815,6 +815,9 @@ export type UserPreferences = {
     lastSelectedWallet?: {
         address: string
     }
+    lastFocusedWallet?: {
+        address: string
+    }
     balanceHidden?: boolean
 }
 
diff --git a/tailwind.bruddle.js b/tailwind.bruddle.js
deleted file mode 100644
index f53af1533..000000000
--- a/tailwind.bruddle.js
+++ /dev/null
@@ -1,375 +0,0 @@
-const { fontFamily } = require('tailwindcss/defaultTheme')
-const plugin = require('tailwindcss/plugin')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    darkMode: ['class', '[data-theme="dark"]'],
-    content: ['./src/app/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
-    theme: {
-        extend: {
-            colors: {
-                purple: {
-                    1: '#FF90E7',
-                    2: '#ffb3ee',
-                    3: '#ffe3f8',
-                },
-                blue: {
-                    1: '#90A8ED',
-                },
-                yellow: {
-                    1: '#FFC900',
-                    2: '#FEFAED',
-                },
-                pink: {
-                    1: '#E99898',
-                    2: '#FBEAEA',
-                },
-                green: {
-                    1: '#98E9AB',
-                    2: '#EAFBEE',
-                },
-                n: {
-                    1: '#000000',
-                    2: '#161616',
-                    3: '#5F646D',
-                    4: '#E7E8E9',
-                },
-                white: '#FFFFFF',
-                background: '#FAF4F0',
-            },
-            zIndex: {
-                1: '1',
-                2: '2',
-                3: '3',
-                4: '4',
-                5: '5',
-            },
-            spacing: {
-                0.25: '0.0625rem',
-                0.75: '0.1875rem',
-                4.5: '1.125rem',
-                5.5: '1.375rem',
-                6.5: '1.75rem',
-                7.5: '1.875rem',
-                8.5: '2.125rem',
-                9.5: '2.375rem',
-                13: '3.25rem',
-                15: '3.75rem',
-                17: '4.25rem',
-                18: '4.5rem',
-                19: '4.75rem',
-                21: '5.25rem',
-                22: '5.5rem',
-                26: '6.5rem',
-                30: '7.5rem',
-                34: '8.5rem',
-                38: '9.5rem',
-                42: '10.5rem',
-                58: '14.5rem',
-            },
-            transitionDuration: {
-                DEFAULT: '200ms',
-            },
-            transitionTimingFunction: {
-                DEFAULT: 'linear',
-            },
-            keyframes: {
-                loaderDots: {
-                    '0%': { opacity: 1 },
-                    '50%,100%': { opacity: 0.15 },
-                },
-                rock: {
-                    '0%, 100%': { transform: 'rotate(-10deg)' },
-                    '50%': { transform: 'rotate(10deg)' },
-                },
-                float: {
-                    '0%, 100%': { transform: 'translateY(0)' },
-                    '50%': { transform: 'translateY(-30px)' },
-                },
-            },
-            animation: {
-                colorPulse: 'colorPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                rock: 'rock 1.5s ease-in-out infinite',
-                'rock-delay-1': 'rock 1.5s ease-in-out infinite 0.3s',
-                'rock-delay-2': 'rock 1.5s ease-in-out infinite 0.6s',
-                float: 'float 3s ease-in-out infinite',
-            },
-            opacity: {
-                85: '.85',
-                95: '.95',
-            },
-            borderRadius: {
-                1: '0.0625rem',
-            },
-            fontFamily: {
-                sans: ['var(--font-roboto)', ...fontFamily.sans],
-                display: ['var(--font-sniglet)', ...fontFamily.sans],
-                condensed: [
-                    'var(--font-roboto)',
-                    {
-                        fontVariationSettings: '"wdth" 50',
-                    },
-                ],
-                'knerd-outline': ['var(--font-knerd-outline)', ...fontFamily.sans],
-                'knerd-filled': ['var(--font-knerd-filled)', ...fontFamily.sans],
-                roboto: ['var(--font-roboto)', ...fontFamily.sans],
-            },
-            fontSize: {
-                0: ['0px', '0px'],
-                sm: ['0.875rem', '1.3125rem'],
-                h1: [
-                    '3rem',
-                    {
-                        lineHeight: '3.5rem',
-                        fontWeight: '800',
-                    },
-                ],
-                h2: [
-                    '2.25rem',
-                    {
-                        lineHeight: '2.875rem',
-                        fontWeight: '800',
-                    },
-                ],
-                h3: [
-                    '1.875rem',
-                    {
-                        lineHeight: '2.375rem',
-                        fontWeight: '800',
-                    },
-                ],
-                h4: [
-                    '1.5rem',
-                    {
-                        lineHeight: '2rem',
-                        fontWeight: '800',
-                    },
-                ],
-                h5: [
-                    '1.25rem',
-                    {
-                        lineHeight: '1.75rem',
-                        fontWeight: '800',
-                    },
-                ],
-                h6: [
-                    '1.125rem',
-                    {
-                        lineHeight: '1.5rem',
-                        fontWeight: '800',
-                    },
-                ],
-            },
-        },
-    },
-    plugins: [
-        require('@headlessui/tailwindcss')({ prefix: 'ui' }),
-        require('tailwind-scrollbar'),
-        plugin(function ({ addBase, addComponents, addUtilities }) {
-            addBase({
-                html: {
-                    '@apply text-[1rem]': {},
-                },
-                body: {
-                    '@apply bg-background text-base antialiased dark:bg-n-2': {},
-                },
-            })
-            addComponents({
-                '.row': {
-                    '@apply flex flex-row items-center gap-2': {},
-                },
-                '.col': {
-                    '@apply flex flex-col gap-2': {},
-                },
-                '.btn': {
-                    '@apply inline-flex items-center gap-2 justify-center h-13 px-5 border border-n-1 rounded-sm text-base text-n-1 fill-n-1 font-bold transition-colors':
-                        {},
-                },
-                '.btn svg': {
-                    '@apply icon-18 fill-inherit first:mr-1.5 last:ml-1.5': {},
-                },
-                '.btn-transparent-light': {
-                    '@apply btn border-transparent text-white fill-white hover:text-purple-1 hover:fill-purple-1': {},
-                },
-                '.btn-transparent-dark': {
-                    '@apply btn border-transparent text-n-1 fill-n-1 hover:text-purple-1 hover:fill-purple-1 dark:text-white dark:fill-white dark:hover:text-purple-1 hover:dark:fill-purple-1':
-                        {},
-                },
-                '.btn-purple': {
-                    '@apply btn bg-purple-1 text-n-1 fill-n-1 hover:bg-purple-1/90': {},
-                },
-                '.btn-dark': {
-                    '@apply btn bg-n-1 text-white fill-white hover:bg-n-1/80 dark:bg-white/10 dark:hover:bg-white/20':
-                        {},
-                },
-                '.btn-stroke': {
-                    '@apply btn hover:bg-n-1 hover:text-white hover:fill-white dark:border-white dark:text-white dark:fill-white dark:hover:bg-white dark:hover:text-n-1 dark:hover:fill-n-1':
-                        {},
-                },
-                '.btn-shadow': {
-                    '@apply shadow-primary-4': {},
-                },
-                '.btn-square': {
-                    '@apply !px-0': {},
-                },
-                '.btn-square svg': {
-                    '@apply !ml-0 !mr-0': {},
-                },
-                '.btn-small': {
-                    '@apply h-8 px-3 text-xs': {},
-                },
-                '.btn-medium': {
-                    '@apply h-9 px-2 text-xs': {},
-                },
-                '.btn-small svg, .btn-medium svg': {
-                    '@apply icon-16': {},
-                },
-                '.btn-square.btn-small': {
-                    '@apply w-8': {},
-                },
-                '.btn-square.btn-medium': {
-                    '@apply w-9': {},
-                },
-                '.label': {
-                    '@apply inline-flex justify-center items-center h-6 px-3 border rounded-sm text-center text-xs font-bold text-n-1':
-                        {},
-                },
-                '.label-stroke': {
-                    '@apply label border-n-1 dark:border-white dark:text-white': {},
-                },
-                '.label-stroke-yellow': {
-                    '@apply label border-yellow-1 text-yellow-1': {},
-                },
-                '.label-stroke-pink': {
-                    '@apply label border-pink-1 text-pink-1': {},
-                },
-                '.label-stroke-purple': {
-                    '@apply label border-purple-1 text-purple-1': {},
-                },
-                '.label-stroke-green': {
-                    '@apply label border-green-1 text-green-1': {},
-                },
-                '.label-purple': {
-                    '@apply label border-purple-1 bg-purple-1': {},
-                },
-                '.label-green': {
-                    '@apply label border-green-1 bg-green-1': {},
-                },
-                '.label-yellow': {
-                    '@apply label border-yellow-1 bg-yellow-1': {},
-                },
-                '.label-black': {
-                    '@apply label border-n-1 bg-n-1 text-white dark:bg-white/10': {},
-                },
-                '.table-custom': {
-                    '@apply table w-full border border-n-1 bg-white dark:bg-n-1 dark:border-white': {},
-                },
-                '.table-select': {
-                    '@apply table-custom [&>thead>tr>*:nth-child(2)]:pl-0 [&>thead>tr>*:nth-child(1)]:w-13 [&>thead>tr>*:nth-child(1)]:px-0 [&>thead>tr>*:nth-child(1)]:text-0 [&>thead>tr>*:nth-child(1)]:text-center [&>tbody>tr>*:nth-child(2)]:pl-0 [&>tbody>tr>*:nth-child(1)]:w-13 [&>tbody>tr>*:nth-child(1)]:px-0 [&>tbody>tr>*:nth-child(1)]:text-center [&>tbody>tr>*:nth-child(1)]:text-0':
-                        {},
-                },
-                '.th-custom': {
-                    '@apply table-cell h-12 px-3 py-2 align-middle text-left first:pl-5 last:pr-5': {},
-                },
-                '.td-custom': {
-                    '@apply table-cell h-[3.875rem] px-3 py-2.5 align-middle border-t border-n-1 text-sm first:pl-5 last:pr-5 dark:border-white':
-                        {},
-                },
-                '.card': {
-                    '@apply flex flex-col bg-white border border-n-1 dark:bg-n-1 relative mx-auto items-center justify-center dark:border-white':
-                        {},
-                },
-                '.card-head': {
-                    '@apply flex justify-between flex-col items-start min-h-[4rem] px-3 sm:px-5 py-3 border-b border-n-1 dark:border-white':
-                        {},
-                },
-                '.card-content': {
-                    '@apply px-3 sm:px-5 py-3 border-n-1 dark:border-white': {},
-                },
-                '.card-title': {
-                    '@apply p-5 border-b border-n-1 text-h6 dark:border-white': {},
-                },
-                '.icon-16': {
-                    '@apply !w-4 !h-4': {},
-                },
-                '.icon-18': {
-                    '@apply !w-4.5 !h-4.5': {},
-                },
-                '.icon-20': {
-                    '@apply !w-5 !h-5': {},
-                },
-                '.icon-22': {
-                    '@apply !w-5.5 !h-5.5': {},
-                },
-                '.icon-24': {
-                    '@apply !w-6 !h-6': {},
-                },
-                '.icon-28': {
-                    '@apply !w-7 !h-7': {},
-                },
-                '.shadow-primary-4': {
-                    '@apply shadow-[0.25rem_0.25rem_0_#000000] dark:shadow-[0.25rem_0.25rem_0_rgba(255,255,255,.25)]':
-                        {},
-                },
-                '.shadow-primary-6': {
-                    '@apply shadow-[0.375rem_0.375rem_0_#000000] dark:shadow-[0.375rem_0.375rem_0_rgba(255,255,255,.25)]':
-                        {},
-                },
-                '.shadow-primary-8': {
-                    '@apply shadow-[0.5rem_0.5rem_0_#000000] dark:shadow-[0.5rem_0.5rem_0_rgba(255,255,255,.25)]': {},
-                },
-                '.shadow-secondary-4': {
-                    '@apply shadow-[0.25rem_-0.25rem_0_#000000] dark:shadow-[0.25rem_-0.25rem_0_rgba(255,255,255,.25)]':
-                        {},
-                },
-                '.shadow-secondary-6': {
-                    '@apply shadow-[0.375rem_-0.375rem_0_#000000] dark:shadow-[0.375rem_-0.375rem_0_rgba(255,255,255,.25)]':
-                        {},
-                },
-                '.shadow-secondary-8': {
-                    '@apply shadow-[0.5rem_-0.5rem_0_#000000] dark:shadow-[0.5rem_-0.5rem_0_rgba(255,255,255,.25)]': {},
-                },
-                '.btn-shadow-primary-4': {
-                    '@apply shadow-[0.25rem_0.25rem_0_#000000] dark:shadow-[0.25rem_0.25rem_0_rgba(255,255,255,.25)]':
-                        {},
-                },
-                '.btn-shadow-primary-6': {
-                    '@apply shadow-[0.375rem_0.375rem_0_#000000] dark:shadow-[0.375rem_0.375rem_0_rgba(255,255,255,.25)]':
-                        {},
-                },
-                '.btn-shadow-primary-8': {
-                    '@apply shadow-[0.5rem_0.5rem_0_#000000] dark:shadow-[0.5rem_0.5rem_0_rgba(255,255,255,.25)]': {},
-                },
-                '.btn-shadow-secondary-4': {
-                    '@apply shadow-[0.25rem_-0.25rem_0_#000000] dark:shadow-[0.25rem_-0.25rem_0_rgba(255,255,255,.25)]':
-                        {},
-                },
-                '.btn-shadow-secondary-6': {
-                    '@apply shadow-[0.375rem_-0.375rem_0_#000000] dark:shadow-[0.375rem_-0.375rem_0_rgba(255,255,255,.25)]':
-                        {},
-                },
-                '.btn-shadow-secondary-8': {
-                    '@apply shadow-[0.5rem_-0.5rem_0_#000000] dark:shadow-[0.5rem_-0.5rem_0_rgba(255,255,255,.25)]': {},
-                },
-                '.input': {
-                    '@apply h-16 w-full rounded-sm border border-n-1 bg-white px-5 text-sm font-bold text-n-1 outline-none transition-colors placeholder:text-n-3 focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1':
-                        {},
-                },
-                '.bg-peanut-repeat-normal': {
-                    '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:100px_100px]': {},
-                },
-                '.bg-peanut-repeat-large': {
-                    '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:200px_200px]': {},
-                },
-                '.bg-peanut-repeat-small': {
-                    '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:50px_50px]': {},
-                },
-            })
-            addUtilities({
-                '.tap-highlight-color': {
-                    '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
-                },
-            })
-        }),
-    ],
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index a87327fb4..db3c91a67 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,18 +4,47 @@ const plugin = require('tailwindcss/plugin')
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     darkMode: ['class', '[data-theme="dark"]'],
-    content: ['./src/app/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
+    content: [
+        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
     theme: {
         extend: {
             colors: {
+                primary: {
+                    1: '#FF90E8',
+                    2: '#CC73BA',
+                    3: '#EFE4FF',
+                },
+                secondary: {
+                    1: '#FFC900',
+                    2: '#E99898',
+                    3: '#90A8ED',
+                    4: '#FFF4CC',
+                    5: '#FBEAEA',
+                    6: '#E9EEFB',
+                },
+                grey: {
+                    1: '#5F646D',
+                    2: '#E7E8E9',
+                    3: '#FAF4F0',
+                },
+                outline: {
+                    1: '#98E9AB',
+                    2: '#AE7AFF',
+                    3: '#E99898',
+                },
+                // todo: remove these colors
                 purple: {
                     1: '#FF90E8',
                     2: '#dc78b5',
                     3: '#fffae8',
                     4: '#AE7AFF',
+                    5: '#EDE4FD',
                 },
                 yellow: {
-                    1: '#ffc900',
+                    1: '#FFC900',
                     2: '#f5ff7c',
                     3: '#fbfdd8',
                     4: '#FAE8A4',
@@ -23,11 +52,13 @@ module.exports = {
                 pink: {
                     1: '#FF90E8',
                     2: '#FCD8DB',
-                    3: '#E99898',
+                },
+                green: {
+                    1: '#98E9AB',
+                    2: '#EAFBEE',
                 },
                 teal: {
                     1: '#23A094',
-                    2: '#90A8ED',
                     3: '#00577d',
                 },
                 gray: {
@@ -35,6 +66,7 @@ module.exports = {
                     2: '#9CA3AF',
                     3: '#e5e7eb',
                     4: '#d1d5db',
+                    5: '#60646C',
                 },
                 n: {
                     1: '#000000',
@@ -57,11 +89,12 @@ module.exports = {
                 },
                 white: '#FFFFFF',
                 red: '#FF0000',
-                'kyc-red': '#C80000', // TODO: this is bad and needs to be changed
+                'kyc-red': '#C80000',
                 black: '#000000',
-                'kyc-green': '#00C800', // TODO: this is bad and needs to be changed
-                primary: 'var(--primary-color)',
-                secondary: 'var(--secondary-color)',
+                'kyc-green': '#00C800',
+
+                'primary-base': 'var(--primary-color)',
+                'secondary-base': 'var(--secondary-color)',
                 background: '#FAF4F0',
                 accent: 'var(--accent-color)',
                 error: '#B3261E',
@@ -138,6 +171,9 @@ module.exports = {
                         fontVariationSettings: '"wdth" 50',
                     },
                 ],
+                'knerd-outline': ['var(--font-knerd-outline)', ...fontFamily.sans],
+                'knerd-filled': ['var(--font-knerd-filled)', ...fontFamily.sans],
+                roboto: ['var(--font-roboto)', ...fontFamily.sans],
             },
             fontSize: {
                 0: ['0px', '0px'],
@@ -232,38 +268,39 @@ module.exports = {
                 },
             })
             addComponents({
+                '.row': {
+                    '@apply flex flex-row items-center gap-2': {},
+                },
+                '.col': {
+                    '@apply flex flex-col gap-2': {},
+                },
                 '.btn': {
-                    '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-n-3 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border border-n-1 rounded-sm text-base text-n-1 fill-n-1 font-bold transition-colors':
-                        // '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-n-3 disabled:cursor-not-allowed inline-flex items-center justify-center h-12 px-3 border-2 ring-2 ring-white shadow-md border-n-1 rounded-md text-base text-n-1 fill-n-1 font-bold transition-colors hover:bg-n-4/40 hover:text-n-1':
+                    '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-grey-1 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border border-n-1 rounded-sm text-base text-n-1 fill-n-1 font-bold transition-colors':
                         {},
                 },
                 '.btn svg': {
                     '@apply icon-18 fill-inherit first:mr-1.5 last:ml-1.5': {},
                 },
                 '.btn-transparent-light': {
-                    '@apply btn border-transparent text-white fill-white hover:text-purple-1 hover:fill-purple-1': {},
+                    '@apply btn border-transparent text-white fill-white hover:text-primary-1 hover:fill-primary-1': {},
                 },
                 '.btn-transparent-dark': {
-                    '@apply btn border-transparent text-n-1 fill-n-1 hover:text-purple-1 hover:fill-purple-1 dark:text-white dark:fill-white dark:hover:text-purple-1 hover:dark:fill-purple-1':
+                    '@apply btn border-transparent text-n-1 fill-n-1 hover:text-primary-1 hover:fill-primary-1 dark:text-white dark:fill-white dark:hover:text-primary-1 hover:dark:fill-primary-1':
                         {},
                 },
                 '.btn-purple': {
-                    '@apply btn bg-purple-1 text-n-1 fill-n-1 hover:bg-purple-1/90': {},
+                    '@apply btn bg-primary-1 text-n-1 fill-n-1 hover:bg-primary-1/90': {},
                 },
                 '.btn-purple-2': {
                     '@apply btn bg-purple-3 text-n-1 fill-n-1 hover:bg-purple-3/90': {},
                 },
                 '.btn-yellow': {
-                    '@apply btn bg-yellow-1 text-n-1 fill-n-1 hover:bg-yellow-1/90': {},
+                    '@apply btn bg-secondary-1 text-n-1 fill-n-1 hover:bg-secondary-1/90': {},
                 },
                 '.btn-dark': {
                     '@apply btn bg-n-1 text-white fill-white hover:bg-n-1/80 dark:bg-white/10 dark:hover:bg-white/20':
                         {},
                 },
-                '.btn-ghost': {
-                    '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-n-3 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border-2 border-transparent rounded-md text-base text-n-1 fill-n-1 font-bold transition-colors duration-200 hover:border-n-1 hover:bg-n-4/25':
-                        {},
-                },
                 '.btn-stroke': {
                     '@apply btn hover:bg-n-1 hover:text-white hover:fill-white dark:border-white dark:text-white dark:fill-white dark:hover:bg-white dark:hover:text-n-1 dark:hover:fill-n-1':
                         {},
@@ -315,25 +352,25 @@ module.exports = {
                     '@apply label border-n-1 dark:border-white dark:text-white': {},
                 },
                 '.label-stroke-yellow': {
-                    '@apply label border-yellow-1 text-yellow-1': {},
+                    '@apply label border-secondary-1 text-secondary-1': {},
                 },
                 '.label-stroke-pink': {
-                    '@apply label border-pink-1 text-pink-1': {},
+                    '@apply label border-primary-1 text-primary-1': {},
                 },
                 '.label-stroke-purple': {
-                    '@apply label border-purple-1 text-purple-1': {},
+                    '@apply label border-primary-1 text-primary-1': {},
                 },
                 '.label-stroke-teal': {
                     '@apply label border-teal-1 text-teal-1': {},
                 },
                 '.label-purple': {
-                    '@apply label border-purple-1 bg-purple-1': {},
+                    '@apply label border-primary-1 bg-primary-1': {},
                 },
                 '.label-teal': {
                     '@apply label border-teal-1 bg-teal-1': {},
                 },
                 '.label-yellow': {
-                    '@apply label border-yellow-1 bg-yellow-1': {},
+                    '@apply label border-secondary-1 bg-secondary-1': {},
                 },
                 '.label-black': {
                     '@apply label border-n-1 bg-n-1 text-white dark:bg-white/10': {},
@@ -361,13 +398,16 @@ module.exports = {
                         {},
                 },
                 '.card': {
-                    '@apply bg-white border border-n-1 dark:bg-n-1 max-w-[27rem] relative mx-auto w-11/12 items-center justify-center px-4 py-6 xl:w-1/2 lg:w-2/3 dark:border-white':
+                    '@apply bg-white border border-n-1 dark:bg-n-1 max-w-[27rem] relative mx-auto w-11/12 items-center justify-center px-4 py-6 xl:w-1/2 lg:w-2/3 dark:border-white flex flex-col relative mx-auto items-center justify-center':
                         {},
                 },
                 '.card-head': {
-                    '@apply flex justify-between items-center min-h-[4rem] px-5 py-3 border-b border-n-1 dark:border-white':
+                    '@apply flex justify-between flex-col items-start min-h-[4rem] px-3 sm:px-5 py-3 border-b border-n-1 dark:border-white':
                         {},
                 },
+                '.card-content': {
+                    '@apply px-3 sm:px-5 py-3 border-n-1 dark:border-white': {},
+                },
                 '.card-title': {
                     '@apply p-5 border-b border-n-1 text-h6 dark:border-white': {},
                 },
@@ -415,16 +455,47 @@ module.exports = {
                     '@apply border-2 border-black': {},
                 },
                 '.custom-input': {
-                    '@apply w-full border border-n-1 transition-colors h-12 w-full rounded-none bg-transparent bg-white px-4 text-h8 font-medium outline-none placeholder:text-sm focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1':
+                    '@apply w-full border border-n-1 transition-colors h-12 w-full rounded-none bg-transparent bg-white px-4 text-h8 font-medium outline-none placeholder:text-sm focus:border-primary-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-primary-1':
                         {},
                 },
                 '.custom-input-xs': {
                     '@apply h-8': {},
                 },
-                '.kyc-badge': {
-                    '@apply relative flex items-center justify-center text-h10 font-normal text-black h-4 w-8 rounded-full':
+                '.btn-shadow-primary-4': {
+                    '@apply shadow-[0.25rem_0.25rem_0_#000000] dark:shadow-[0.25rem_0.25rem_0_rgba(255,255,255,.25)]':
                         {},
                 },
+                '.btn-shadow-primary-6': {
+                    '@apply shadow-[0.375rem_0.375rem_0_#000000] dark:shadow-[0.375rem_0.375rem_0_rgba(255,255,255,.25)]':
+                        {},
+                },
+                '.btn-shadow-primary-8': {
+                    '@apply shadow-[0.5rem_0.5rem_0_#000000] dark:shadow-[0.5rem_0.5rem_0_rgba(255,255,255,.25)]': {},
+                },
+                '.btn-shadow-secondary-4': {
+                    '@apply shadow-[0.25rem_-0.25rem_0_#000000] dark:shadow-[0.25rem_-0.25rem_0_rgba(255,255,255,.25)]':
+                        {},
+                },
+                '.btn-shadow-secondary-6': {
+                    '@apply shadow-[0.375rem_-0.375rem_0_#000000] dark:shadow-[0.375rem_-0.375rem_0_rgba(255,255,255,.25)]':
+                        {},
+                },
+                '.btn-shadow-secondary-8': {
+                    '@apply shadow-[0.5rem_-0.5rem_0_#000000] dark:shadow-[0.5rem_-0.5rem_0_rgba(255,255,255,.25)]': {},
+                },
+                '.input': {
+                    '@apply h-16 w-full rounded-sm border border-n-1 bg-white px-5 text-sm font-bold text-n-1 outline-none transition-colors placeholder:text-n-3 focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1':
+                        {},
+                },
+                '.bg-peanut-repeat-normal': {
+                    '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:100px_100px]': {},
+                },
+                '.bg-peanut-repeat-large': {
+                    '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:200px_200px]': {},
+                },
+                '.bg-peanut-repeat-small': {
+                    '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:50px_50px]': {},
+                },
             })
             addUtilities({
                 '.tap-highlight-color': {