diff --git a/src/app/globals.css b/src/app/globals.css
index 8267f75..f1c3f0b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -74,6 +74,13 @@ input::-webkit-inner-spin-button {
 }
 
 /* Firefox */
-input[type=number] {
+input[type='number'] {
   -moz-appearance: textfield;
-}
\ No newline at end of file
+}
+
+.dark .fill-current {
+  fill: #ffffff;
+}
+.fill-current {
+  fill: #000000;
+}
diff --git a/src/app/wallet-adapter/page.tsx b/src/app/wallet-adapter/page.tsx
index 3ffd6db..4d979e2 100644
--- a/src/app/wallet-adapter/page.tsx
+++ b/src/app/wallet-adapter/page.tsx
@@ -79,7 +79,7 @@ const page = () => {
       <TopBar />
 
       <section className="w-full py-12 md:py-24 lg:py-32 xl:py-30">
-        <div className="container px-4 md:px-6">
+        <div className="container mx-auto px-4 md:px-6">
           <div className="flex flex-col items-center space-y-4 text-center">
             <div className="space-y-2">
               <span className="inline-block bg-blue-100 text-gray-600 py-1 px-3 rounded-full text-sm font-semibold mb-4">
@@ -87,7 +87,9 @@ const page = () => {
               </span>
               <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
                 Making Solana apps
-                <span className="text-black/70">consumer ready</span>
+                <span className="text-black/70 dark:text-white/70">
+                  consumer ready
+                </span>
               </h1>
               <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
                 Let your users login with just a Google account and start
@@ -104,14 +106,14 @@ const page = () => {
         </div>
       </section>
 
-      <section className="py-20 px-4 bg-gray-200">
+      <section className="py-20 px-4 bg-gray-200 dark:bg-zinc-600">
         <div className="max-w-6xl mx-auto">
           <h2 className="text-3xl font-bold mb-12 text-center">Key Features</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {features.map((feature, index) => (
               <div
                 key={index}
-                className="flex flex-col bg-white items-center text-center p-6 bg-background rounded-lg shadow-lg hover:shadow-xl duration-300 hover:scale-110 transition-transform animate-fade-in-up"
+                className="flex flex-col dark:bg-[#1c1b22] bg-white items-center text-center p-6 bg-background rounded-lg shadow-lg hover:shadow-xl duration-300 hover:scale-110 transition-transform animate-fade-in-up"
                 style={{ animationDelay: `${index * 100}ms` }}
               >
                 <div className="bg-primary text-primary-foreground rounded-full p-4 mb-4">
diff --git a/src/app/wallet/page.tsx b/src/app/wallet/page.tsx
index 9f1fbaa..ee0fc10 100644
--- a/src/app/wallet/page.tsx
+++ b/src/app/wallet/page.tsx
@@ -18,13 +18,12 @@ const Wallet = async () => {
       },
     })
     if (user) {
-      wallet = user?.publicKey ? user.publicKey :  await createWallet(user) 
+      wallet = user?.publicKey ? user.publicKey : await createWallet(user)
       balance = await fetchUserBalance(wallet)
       console.log(balance)
     }
   }
 
-
   return (
     <div className="h-full flex flex-col items-center">
       <TopBar />
@@ -33,7 +32,11 @@ const Wallet = async () => {
           <LeftSideBar />
         </div>
         <div>
-          <WalletDetail wallet={wallet} usdbalance={Number(balance?.usdBalance)} solbalance={Number(balance?.solBalance)}/>
+          <WalletDetail
+            wallet={wallet}
+            usdbalance={Number(balance?.usdBalance)}
+            solbalance={Number(balance?.solBalance)}
+          />
         </div>
         <div className=" hidden md:block">{/* <RightSideBar /> */}</div>
       </div>
diff --git a/src/components/WalletPage/LeftSideBar.tsx b/src/components/WalletPage/LeftSideBar.tsx
index f7a3f33..0a90d71 100644
--- a/src/components/WalletPage/LeftSideBar.tsx
+++ b/src/components/WalletPage/LeftSideBar.tsx
@@ -76,8 +76,10 @@ const LeftSideBar = () => {
           <button
             key={index}
             className={cn(
-              'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white rounded-lg',
-              pathName === option?.href ? 'sm:bg-black text-white' : 'text-black',
+              'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white rounded-lg dark:text-white',
+              pathName === option?.href
+                ? 'sm:bg-black text-white'
+                : 'text-black',
             )}
           >
             {option.svg}
@@ -91,7 +93,7 @@ const LeftSideBar = () => {
           <button
             key={index}
             className={cn(
-              'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white text-nowrap rounded-lg',
+              'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black dark:text-white hover:text-white text-nowrap rounded-lg',
               pathName === option?.href ? 'bg-black text-white' : 'text-black',
             )}
           >
diff --git a/src/components/WalletPage/Send/LinkTransfer.tsx b/src/components/WalletPage/Send/LinkTransfer.tsx
index 1bcc3f6..1b4e058 100644
--- a/src/components/WalletPage/Send/LinkTransfer.tsx
+++ b/src/components/WalletPage/Send/LinkTransfer.tsx
@@ -1,24 +1,30 @@
-"use client"
+'use client'
 
-import { useState, useEffect } from "react"
-import { ArrowLeft, RefreshCw } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { useState, useEffect } from 'react'
+import { ArrowLeft, RefreshCw } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import Image from "next/image"
-import solIcon from "@/components/icons/solana.png"
-import { IoMdArrowBack } from "react-icons/io"
+} from '@/components/ui/select'
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import Image from 'next/image'
+import solIcon from '@/components/icons/solana.png'
+import { IoMdArrowBack } from 'react-icons/io'
 
 export default function LinkTransfer({ setType }: { setType: () => void }) {
-  const [amount, setAmount] = useState("0")
-  const [asset, setAsset] = useState("SOL")
+  const [amount, setAmount] = useState('0')
+  const [asset, setAsset] = useState('SOL')
   const [isUSD, setIsUSD] = useState(true)
   const [solPrice, setSolPrice] = useState(0)
   const [isLoading, setIsLoading] = useState(true)
@@ -27,7 +33,9 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
   useEffect(() => {
     const fetchSolPrice = async () => {
       try {
-        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd')
+        const response = await fetch(
+          'https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd',
+        )
         if (!response.ok) {
           throw new Error('Failed to fetch SOL price')
         }
@@ -48,10 +56,9 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
   }
 
   const toggleCurrency = () => {
-
     if (!amount) {
-      setAmount('0');
-      return;
+      setAmount('0')
+      return
     }
 
     setIsUSD(!isUSD)
@@ -63,7 +70,6 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
   }
 
   const getEquivalentAmount = () => {
-
     if (!amount) {
       return `~$0.00`
     }
@@ -75,7 +81,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
     }
   }
 
-  const quickSelectAmounts = isUSD ? ["1", "2", "5"] : ["0.01", "0.02", "0.05"]
+  const quickSelectAmounts = isUSD ? ['1', '2', '5'] : ['0.01', '0.02', '0.05']
 
   if (isLoading) {
     return <div>Loading...</div>
@@ -89,7 +95,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
     <Card className="w-full mx-auto border-none shadow-none ">
       <CardHeader>
         <span
-          className="cursor-pointer text-gray-600 flex gap-x-2 items-center"
+          className="cursor-pointer text-gray-600 dark:text-gray-200 flex gap-x-2 items-center"
           onClick={setType}
         >
           <IoMdArrowBack />
@@ -106,7 +112,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
             <SelectTrigger className="w-full">
               <SelectValue placeholder="Select asset" />
             </SelectTrigger>
-            <SelectContent className="bg-white">
+            <SelectContent className="bg-white dark:bg-[#121212]">
               <SelectItem value="SOL" className="">
                 <div className="flex items-center gap-x-2">
                   <Image src={solIcon} height={30} width={30} alt="sol" />
@@ -132,10 +138,10 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
               className="text-3xl font-semibold pl-8 pr-12 py-6"
             />
             <span className="absolute left-3 top-1/2 -translate-y-1/2 text-3xl font-semibold text-muted-foreground">
-              {isUSD ? "$" : ""}
+              {isUSD ? '$' : ''}
             </span>
             <span className="absolute right-3 top-1/2 -translate-y-1/2 text-lg text-muted-foreground">
-              {isUSD ? "USD" : asset}
+              {isUSD ? 'USD' : asset}
             </span>
             <Button
               variant="ghost"
@@ -146,20 +152,30 @@ export default function LinkTransfer({ setType }: { setType: () => void }) {
               <RefreshCw className="h-4 w-4" />
             </Button>
           </div>
-          <p className="text-sm text-right text-muted-foreground mt-1">{getEquivalentAmount()}</p>
+          <p className="text-sm text-right text-muted-foreground mt-1">
+            {getEquivalentAmount()}
+          </p>
         </div>
         <div className="flex justify-between gap-2">
           {quickSelectAmounts.map((quickAmount) => (
-            <Button key={quickAmount} variant="outline" onClick={() => setAmount(quickAmount)} className="flex-1">
-              {isUSD ? "$" : ""}{quickAmount}
+            <Button
+              key={quickAmount}
+              variant="outline"
+              onClick={() => setAmount(quickAmount)}
+              className="flex-1"
+            >
+              {isUSD ? '$' : ''}
+              {quickAmount}
             </Button>
           ))}
         </div>
       </CardContent>
       <CardFooter className="flex justify-between">
-        <Button variant="ghost" onClick={setType}>Cancel</Button>
+        <Button variant="ghost" onClick={setType}>
+          Cancel
+        </Button>
         <Button onClick={handleCreateLink}>Create new TipLink</Button>
       </CardFooter>
     </Card>
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/WalletPage/Send/Send.tsx b/src/components/WalletPage/Send/Send.tsx
index fb4ccff..f310987 100644
--- a/src/components/WalletPage/Send/Send.tsx
+++ b/src/components/WalletPage/Send/Send.tsx
@@ -1,74 +1,92 @@
 'use client'
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { ChevronRight, Wand2, Wallet } from "lucide-react"
-import { useState } from "react"
-import LinkTransfer from "./LinkTransfer"
-import WalletTransfer from "./WalletTransfer"
-import { ActionType } from "../actions";
-
-
-
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { ChevronRight, Wand2, Wallet } from 'lucide-react'
+import { useState } from 'react'
+import LinkTransfer from './LinkTransfer'
+import WalletTransfer from './WalletTransfer'
+import { ActionType } from '../actions'
 
 interface SendTokenProps {
-    setCurrent: (action: ActionType | null) => void;
-  }
+  setCurrent: (action: ActionType | null) => void
+}
 export default function SendToken({ setCurrent }: SendTokenProps) {
+  const [typeOfSend, setTypeOfSend] = useState('')
+  return (
+    <>
+      {!typeOfSend && (
+        <div className="w-full max-w-2xl mx-auto  space-y-6">
+          <h1 className="text-3xl font-medium text-gray-700 dark:text-gray-300">
+            Send
+          </h1>
+          <p className="text-lg  text-gray-600">
+            Send assets to a new TipLink or to a Solana wallet address:
+          </p>
+          <Card>
+            <CardContent className="p-0">
+              <Button
+                variant="ghost"
+                className="w-full justify-between py-8 text-left hover:bg-blue-400/10"
+                onClick={() => {
+                  setTypeOfSend('type1')
+                }}
+              >
+                <div className="flex items-center space-x-4">
+                  <Wand2 className="h-6 w-6 text-gray-500" />
+                  <div>
+                    <CardTitle className="text-lg font-normal ">
+                      Send via new TipLink
+                    </CardTitle>
+                    <CardDescription className="text-gray-500">
+                      Create a new TipLink using assets from this wallet.
+                    </CardDescription>
+                  </div>
+                </div>
+                <ChevronRight className="h-6 w-6 text-gray-400" />
+              </Button>
+              <Button
+                variant="ghost"
+                className="w-full justify-between py-8 text-left border-t hover:bg-blue-400/10"
+                onClick={() => setTypeOfSend('type2')}
+              >
+                <div className="flex items-center space-x-4">
+                  <Wallet className="h-6 w-6 text-gray-500" />
+                  <div>
+                    <CardTitle className="text-lg font-normal  ">
+                      Send to Solana wallet address
+                    </CardTitle>
+                    <CardDescription className="text-gray-500">
+                      Send assets to a Solana wallet address you specify.
+                    </CardDescription>
+                  </div>
+                </div>
+                <ChevronRight className="h-6 w-6 text-gray-400" />
+              </Button>
+            </CardContent>
+          </Card>
+          <Button
+            variant="outline"
+            className="w-full hover:bg-blue-400/10"
+            onClick={() => setCurrent(null)}
+          >
+            Cancel
+          </Button>
+        </div>
+      )}
 
-    const [typeOfSend, setTypeOfSend] = useState('');
-    return (
-        <>
-        {
-            !typeOfSend && <div className="w-full max-w-2xl mx-auto  space-y-6">
-                <h1 className="text-3xl font-medium text-gray-700">Send</h1>
-                <p className="text-lg  text-gray-600">
-                    Send assets to a new TipLink or to a Solana wallet address:
-                </p>
-                <Card>
-                    <CardContent className="p-0">
-                        <Button variant="ghost" className="w-full justify-between py-8 text-left hover:bg-blue-400/10" onClick={() => {
-                            setTypeOfSend('type1');
-                        }}>
-                            <div className="flex items-center space-x-4">
-                                <Wand2 className="h-6 w-6 text-gray-500" />
-                                <div>
-                                    <CardTitle className="text-lg font-normal text-gray-900">Send via new TipLink</CardTitle>
-                                    <CardDescription className="text-gray-500">
-                                        Create a new TipLink using assets from this wallet.
-                                    </CardDescription>
-                                </div>
-                            </div>
-                            <ChevronRight className="h-6 w-6 text-gray-400" />
-                        </Button>
-                        <Button variant="ghost" className="w-full justify-between py-8 text-left border-t hover:bg-blue-400/10"
-                            onClick={() => setTypeOfSend('type2')}
-                        >
-                            <div className="flex items-center space-x-4">
-                                <Wallet className="h-6 w-6 text-gray-500" />
-                                <div>
-                                    <CardTitle className="text-lg font-normal  ">Send to Solana wallet address</CardTitle>
-                                    <CardDescription className="text-gray-500">
-                                        Send assets to a Solana wallet address you specify.
-                                    </CardDescription>
-                                </div>
-                            </div>
-                            <ChevronRight className="h-6 w-6 text-gray-400" />
-                        </Button>
-                    </CardContent>
-                </Card>
-                <Button variant="outline" className="w-full hover:bg-blue-400/10" onClick={() =>  setCurrent(null)}>Cancel</Button>
-            </div>
-        }
-
-
-        {
-            typeOfSend === 'type1' && <LinkTransfer setType = { () => setTypeOfSend('')}/>
-        }
+      {typeOfSend === 'type1' && (
+        <LinkTransfer setType={() => setTypeOfSend('')} />
+      )}
 
-        {
-            typeOfSend === 'type2' && <WalletTransfer setType = {() => setTypeOfSend('')}/>
-        }
-           
-        </>
-    )
-}
\ No newline at end of file
+      {typeOfSend === 'type2' && (
+        <WalletTransfer setType={() => setTypeOfSend('')} />
+      )}
+    </>
+  )
+}
diff --git a/src/components/WalletPage/Send/WalletTransfer.tsx b/src/components/WalletPage/Send/WalletTransfer.tsx
index 8856509..af9d29e 100644
--- a/src/components/WalletPage/Send/WalletTransfer.tsx
+++ b/src/components/WalletPage/Send/WalletTransfer.tsx
@@ -5,7 +5,7 @@ const WalletTransfer = ({ setType }: { setType: () => void }) => {
   return (
     <div className="w-full max-w-2xl mx-auto space-y-6 flex flex-col">
       <span
-        className="cursor-pointer text-gray-600 flex gap-2"
+        className="cursor-pointer text-gray-600 dark:text-gray-200 flex gap-2"
         onClick={setType}
       >
         <IoMdArrowBack className="mt-1" />
@@ -13,7 +13,7 @@ const WalletTransfer = ({ setType }: { setType: () => void }) => {
       </span>
       <div>
         <div className="flex flex-col">
-          <span className="text-3xl font-semibold text-gray-900">
+          <span className="text-3xl font-semibold text-gray-900 dark:text-gray-200">
             Send to solana wallet address
           </span>
           <span className="text-gray-500">
@@ -46,7 +46,10 @@ const WalletTransfer = ({ setType }: { setType: () => void }) => {
             </p>
           </div>
           <div className="flex justify-between items-center w-full my-4">
-            <button className="bg-gray-200 text-black px-4 py-2 rounded-lg" onClick={setType}>
+            <button
+              className="bg-gray-200 text-black px-4 py-2 rounded-lg"
+              onClick={setType}
+            >
               Cancel
             </button>
             <button className="bg-black text-white px-4 py-2 rounded-lg">
diff --git a/src/components/WalletPage/Swap/Swap.tsx b/src/components/WalletPage/Swap/Swap.tsx
index 303ebcf..5c42a5f 100644
--- a/src/components/WalletPage/Swap/Swap.tsx
+++ b/src/components/WalletPage/Swap/Swap.tsx
@@ -1,86 +1,109 @@
-import { useState, useEffect } from "react";
-import { ArrowUpDown} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import axios from "axios";
-import Image from "next/image";
-import { tokens, TokensType } from "./token";
-import { ActionType } from "../actions";
+import { useState, useEffect } from 'react'
+import { ArrowUpDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import axios from 'axios'
+import Image from 'next/image'
+import { tokens, TokensType } from './token'
+import { ActionType } from '../actions'
 import { ThreeDots } from 'react-loader-spinner'
-import { Top } from "./Top";
-import { Bottom } from "./Bottom";
+import { Top } from './Top'
+import { Bottom } from './Bottom'
 
 interface TokenSwapProps {
-  setCurrent: (action: ActionType | null) => void;
+  setCurrent: (action: ActionType | null) => void
 }
 
 export default function TokenSwap({ setCurrent }: TokenSwapProps) {
-  const [payToken, setPayToken] = useState(tokens[0]);
-  const [receiveToken, setReceiveToken] = useState(tokens[1]);
-  const [payAmount, setPayAmount] = useState("");
-  const [receiveAmount, setReceiveAmount] = useState("");
-  const [fetchingQuote, setFetchingQuote] = useState(false);
+  const [payToken, setPayToken] = useState(tokens[0])
+  const [receiveToken, setReceiveToken] = useState(tokens[1])
+  const [payAmount, setPayAmount] = useState('')
+  const [receiveAmount, setReceiveAmount] = useState('')
+  const [fetchingQuote, setFetchingQuote] = useState(false)
 
   useEffect(() => {
     if (!payAmount || !/^\d*\.?\d*$/.test(payAmount)) {
-      setReceiveAmount("");
-      return;
+      setReceiveAmount('')
+      return
     }
-    setFetchingQuote(true);
+    setFetchingQuote(true)
 
     const fetchQuote = async () => {
       try {
-        const res = await axios.get(`https://quote-api.jup.ag/v6/quote?inputMint=${payToken.mint}&outputMint=${receiveToken.mint}&amount=${Number(payAmount) * (10 ** payToken.decimals)}&slippageBps=50`)
+        const res = await axios.get(
+          `https://quote-api.jup.ag/v6/quote?inputMint=${payToken.mint}&outputMint=${receiveToken.mint}&amount=${Number(payAmount) * 10 ** payToken.decimals}&slippageBps=50`,
+        )
 
-        const outputAmount = Number(res.data.outAmount) / 10 ** receiveToken.decimals;
-        setReceiveAmount(outputAmount.toString());
+        const outputAmount =
+          Number(res.data.outAmount) / 10 ** receiveToken.decimals
+        setReceiveAmount(outputAmount.toString())
       } catch (error) {
-        console.error("Error fetching swap price:", error);
-        setReceiveAmount("");
+        console.error('Error fetching swap price:', error)
+        setReceiveAmount('')
       } finally {
-        setFetchingQuote(false);
+        setFetchingQuote(false)
       }
-    };
+    }
 
-    const debounceFetch = setTimeout(fetchQuote, 500); // Debounce for 500ms
-    return () => clearTimeout(debounceFetch); // Clean up previous timeout if the amount changes
-  }, [payAmount, payToken, receiveToken]);
+    const debounceFetch = setTimeout(fetchQuote, 500) // Debounce for 500ms
+    return () => clearTimeout(debounceFetch) // Clean up previous timeout if the amount changes
+  }, [payAmount, payToken, receiveToken])
 
   const handleSwap = () => {
-    setPayToken(receiveToken);
-    setReceiveToken(payToken);
-    setPayAmount(receiveAmount);
-    setReceiveAmount(payAmount);
-  };
+    setPayToken(receiveToken)
+    setReceiveToken(payToken)
+    setPayAmount(receiveAmount)
+    setReceiveAmount(payAmount)
+  }
 
   const selectTokenValue = (value: TokensType) => {
-      const newToken = tokens.find((t) => t.symbol === value);
-      if (newToken && newToken !== receiveToken) setPayToken(newToken);
-    }
-  
+    const newToken = tokens.find((t) => t.symbol === value)
+    if (newToken && newToken !== receiveToken) setPayToken(newToken)
+  }
+
   return (
-    <div className="w-full max-w-md mx-auto space-y-6 bg-white rounded-lg">
-       <Top setCurrent={setCurrent}/>
+    <div className="w-full max-w-md mx-auto space-y-6  rounded-lg">
+      <Top setCurrent={setCurrent} />
       <div className="space-y-4">
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">You Pay:</label>
+          <label className="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-200">
+            You Pay:
+          </label>
           <div className="flex items-center space-x-2">
             <Select
               value={payToken.symbol}
               onValueChange={(value: TokensType) => {
-                const newToken = tokens.find((t) => t.symbol === value);
-                if (newToken && newToken !== receiveToken) setPayToken(newToken);
+                const newToken = tokens.find((t) => t.symbol === value)
+                if (newToken && newToken !== receiveToken) setPayToken(newToken)
               }}
             >
               <SelectTrigger className="w-[250px]">
                 <SelectValue />
               </SelectTrigger>
-              <SelectContent className="bg-white">
+              <SelectContent className="bg-white dark:bg-[#121212]">
                 {tokens.map((token) => (
-                  <SelectItem key={token.symbol} value={token.symbol} disabled={token === receiveToken}>
+                  <SelectItem
+                    key={token.symbol}
+                    value={token.symbol}
+                    disabled={token === receiveToken}
+                  >
                     <div className="flex gap-3">
-                      <Image height={20} width={20} alt={token.name} src={token.icon || "https://solana.com/_next/static/media/solanaLogoMark.17260911.svg"} />
+                      <Image
+                        height={20}
+                        width={20}
+                        alt={token.name}
+                        src={
+                          token.icon ||
+                          'https://solana.com/_next/static/media/solanaLogoMark.17260911.svg'
+                        }
+                      />
                       <span>{token.name}</span>
                     </div>
                   </SelectItem>
@@ -94,13 +117,15 @@ export default function TokenSwap({ setCurrent }: TokenSwapProps) {
               value={payAmount}
               onChange={(e) => {
                 if (/^\d*\.?\d*$/.test(e.target.value)) {
-                  setPayAmount(e.target.value);
+                  setPayAmount(e.target.value)
                 }
               }}
               className="flex-grow text-right"
             />
           </div>
-          <p className="text-sm text-gray-500 mt-1">Current Balance: 0 {payToken.symbol}</p>
+          <p className="text-sm text-gray-500 mt-1 dark:text-gray-400">
+            Current Balance: 0 {payToken.symbol}
+          </p>
         </div>
 
         <div className="flex justify-center">
@@ -110,7 +135,9 @@ export default function TokenSwap({ setCurrent }: TokenSwapProps) {
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">You Receive:</label>
+          <label className="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-200">
+            You Receive:
+          </label>
           <div className="flex items-center space-x-2">
             <Select
               value={receiveToken.symbol}
@@ -119,11 +146,20 @@ export default function TokenSwap({ setCurrent }: TokenSwapProps) {
               <SelectTrigger className="w-[250px]">
                 <SelectValue />
               </SelectTrigger>
-              <SelectContent className="bg-white">
+              <SelectContent className="bg-white dark:bg-[#121212]">
                 {tokens.map((token) => (
-                  <SelectItem key={token.symbol} value={token.symbol} disabled={token === payToken}>
+                  <SelectItem
+                    key={token.symbol}
+                    value={token.symbol}
+                    disabled={token === payToken}
+                  >
                     <div className="flex gap-3">
-                      <Image height={20} width={20} alt={token.name} src={token.icon || ""} />
+                      <Image
+                        height={20}
+                        width={20}
+                        alt={token.name}
+                        src={token.icon || ''}
+                      />
                       <span>{token.name}</span>
                     </div>
                   </SelectItem>
@@ -131,16 +167,15 @@ export default function TokenSwap({ setCurrent }: TokenSwapProps) {
               </SelectContent>
             </Select>
             <div className="border-2 w-full rounded-lg h-10 flex justify-center items-center">
-
-              {
-                !fetchingQuote && <Input
+              {!fetchingQuote && (
+                <Input
                   type="text"
                   placeholder="0.00"
                   value={receiveAmount}
                   className="flex-grow text-right"
                   readOnly
                 />
-              }
+              )}
 
               <span className="">
                 {fetchingQuote && (
@@ -157,12 +192,13 @@ export default function TokenSwap({ setCurrent }: TokenSwapProps) {
                 )}
               </span>
             </div>
-
           </div>
-          <p className="text-sm text-gray-500 mt-1">Current Balance: 0 {receiveToken.symbol}</p>
+          <p className="text-sm text-gray-500 mt-1 dark:text-gray-400">
+            Current Balance: 0 {receiveToken.symbol}
+          </p>
         </div>
       </div>
-     <Bottom fetchingQuote={fetchingQuote} receiveAmount={receiveAmount}/>
+      <Bottom fetchingQuote={fetchingQuote} receiveAmount={receiveAmount} />
     </div>
-  );
+  )
 }
diff --git a/src/components/WalletPage/Swap/Top.tsx b/src/components/WalletPage/Swap/Top.tsx
index fdf13ed..e5da98a 100644
--- a/src/components/WalletPage/Swap/Top.tsx
+++ b/src/components/WalletPage/Swap/Top.tsx
@@ -1,15 +1,20 @@
-import { ActionType } from "../actions";
+import { ActionType } from '../actions'
 
 export interface TokenSwapProps {
-    setCurrent: (action: ActionType | null) => void;
-  }
+  setCurrent: (action: ActionType | null) => void
+}
 
 export const Top = ({ setCurrent }: TokenSwapProps) => {
-    return <div className="flex justify-between items-center">
-    <button className="text-sm font-medium text-gray-500" onClick={() => setCurrent(null)}>
-      ← Back
-    </button>
-    <h2 className="text-2xl font-bold">Swap Tokens</h2>
-    <div className="w-10" />
-  </div>
-}
\ No newline at end of file
+  return (
+    <div className="flex justify-between items-center">
+      <button
+        className="text-sm font-medium text-gray-500 dark:text-gray-200"
+        onClick={() => setCurrent(null)}
+      >
+        ← Back
+      </button>
+      <h2 className="text-2xl font-bold">Swap Tokens</h2>
+      <div className="w-10" />
+    </div>
+  )
+}
diff --git a/src/components/WalletPage/TopBar.tsx b/src/components/WalletPage/TopBar.tsx
index 578f0ce..8e1db5b 100644
--- a/src/components/WalletPage/TopBar.tsx
+++ b/src/components/WalletPage/TopBar.tsx
@@ -18,7 +18,7 @@ const TopBar = () => {
         {/* <Sidebar /> */}
         <AlignLeft onClick={() => setOpen(!open)} className="sm:hidden" />
         <div className="border h-10 w-10 rounded-lg inline-flex justify-center items-center flex-shrink-0">
-          <Logo className="h-8 w-8" fill="#000000" />
+          <Logo className="h-8 w-8" fill="currentColor" />
         </div>
       </div>
 
@@ -32,11 +32,17 @@ const TopBar = () => {
         )}
       </div>
 
-      <div className="hidden sm:flex sm:w-1/2 md:w-[50%] items-center border rounded-full p-2">
-        <Search color='gray' />
-        <input className="w-full text-center outline-none" placeholder="Search" />
+      <div className="hidden sm:flex sm:w-1/2 md:w-[50%] items-center border rounded-full p-2 dark:border-gray-600">
+        <Search className="text-gray-500" />
+        <input
+          className="w-full text-center outline-none text-gray-900 dark:text-gray-100 bg-transparent placeholder-gray-500"
+          placeholder="Search"
+        />
       </div>
-      {data && data?.user ? <ProfileDropDown /> : (
+
+      {data && data?.user ? (
+        <ProfileDropDown />
+      ) : (
         <div className="w-[3rem] flex items-center p-[0.2rem]  justify-center h-[2rem] transition outline-none">
           <div className="p-4 border-2 rounded-full bg-gray-300 animate-pulse"></div>
         </div>
diff --git a/src/components/WalletPage/WalletDetail.tsx b/src/components/WalletPage/WalletDetail.tsx
index 82a43c8..7ce75ca 100644
--- a/src/components/WalletPage/WalletDetail.tsx
+++ b/src/components/WalletPage/WalletDetail.tsx
@@ -11,92 +11,94 @@ export interface WalletDetailProps {
   solbalance?: number
 }
 
-const WalletDetail = ({ wallet, usdbalance , solbalance}: WalletDetailProps) => {
-  const [currentAction, setCurrentAction] = useState<null | ActionType>(null);
+const WalletDetail = ({
+  wallet,
+  usdbalance,
+  solbalance,
+}: WalletDetailProps) => {
+  const [currentAction, setCurrentAction] = useState<null | ActionType>(null)
 
   const handleActionClick = (action: ActionType) => {
-   setCurrentAction(action)
-    
-  };
-
+    setCurrentAction(action)
+  }
 
   const handleClose = () => {
-    setCurrentAction(null);
+    setCurrentAction(null)
   }
 
-
   return (
-    <div className="rounded-[22px] flex flex-col items-center gap-3 sm:w-[450px] md:w-[600px] border-2 p-7 sm:p-10 shadow-md">
+    <div className="rounded-[22px] flex flex-col items-center gap-3 sm:w-[450px] md:w-[600px] border-2 p-7 sm:p-10 shadow-md dark:border dark:border-gray-500">
       <div className="flex flex-col items-start gap-2 w-full">
         <div className="text-gray-200">
           <p className="text-gray-400 text-xs sm:text-sm font-semibold">
             Total Balance
           </p>
         </div>
-        <div className=" text-black opacity-80 text-xl  mb-6">
-          {(solbalance === null || isNaN(Number(usdbalance))) ? (
+        <div className=" text-black dark:text-white opacity-80 text-xl  mb-6">
+          {solbalance === null || isNaN(Number(usdbalance)) ? (
             <div className=" bg-gray-200  rounded-lg animate-pulse w-[46px] h-[34px] mb-6">
               {''}
             </div>
           ) : (
-              <div>
-                <div className='font-bold sm:text-4xl'>$ {usdbalance}</div>
-                <div className='sm:text-md text-gray-500'>{solbalance} SOL</div>
-              </div>
+            <div>
+              <div className="font-bold sm:text-4xl">$ {usdbalance}</div>
+              <div className="sm:text-md text-gray-500">{solbalance} SOL</div>
+            </div>
           )}
         </div>
       </div>
-    {(currentAction !== 'send' && currentAction !== 'swap' ) &&
-      <div>
-        <div className="flex flex-col items-center w-full gap-5">
-          <div className="flex space-x-10 w-full items-center justify-between">
-            {actions.map((action, index) => (
-              <div key={index} className="flex flex-col items-center gap-1">
-                <button
-                  className="flex justify-center items-center w-[66px] h-[67px] bg-black opacity-80 rounded-[30%] text-white"
-                  onClick={() => handleActionClick(action.type)}
-                >
-                  {<action.icon />}
-                </button>
-                <p>{action.label}</p>
-              </div>
-            ))}
-          </div>
+      {currentAction !== 'send' && currentAction !== 'swap' && (
+        <div>
+          <div className="flex flex-col items-center w-full gap-5">
+            <div className="flex space-x-10 w-full items-center justify-between">
+              {actions.map((action, index) => (
+                <div key={index} className="flex flex-col items-center gap-1">
+                  <button
+                    className="flex justify-center items-center w-[66px] h-[67px] bg-black opacity-80 rounded-[30%] text-white"
+                    onClick={() => handleActionClick(action.type)}
+                  >
+                    {<action.icon />}
+                  </button>
+                  <p>{action.label}</p>
+                </div>
+              ))}
+            </div>
 
-          <div className="flex items-center justify-between bg-gray-200 w-full rounded-[16px] p-[2px]">
-            <button className="flex justify-center items-center py-3 bg-black opacity-80 rounded-[14px] w-[49%] text-white p-2 text-xl">
-              Token
-            </button>
+            <div className="flex items-center justify-between bg-gray-200 w-full rounded-[16px] p-[2px]">
+              <button className="flex justify-center items-center py-3 bg-black opacity-80 rounded-[14px] w-[49%] text-white p-2 text-xl">
+                Token
+              </button>
 
-            <button className="flex justify-center items-center py-3 opacity-80 rounded-[14px] w-[49%] text-black p-2 text-xl">
-              NFTs
-            </button>
+              <button className="flex justify-center items-center py-3 opacity-80 rounded-[14px] w-[49%] text-black p-2 text-xl">
+                NFTs
+              </button>
+            </div>
           </div>
-        </div>
 
-        <div className="w-full">
-          <div className="p-2">
-            <p className="flex justify-center text-slate-800 font-bold text-xl pt-4 pb-1">
-              You don&apos;t have any assets yet!
-            </p>
-            <p className="flex justify-center text-gray-300 text-sm pt-2">
-              Start by buying or depositing funds:
-            </p>
-          </div>
-          <div className="flex justify-center pt-2">
-            <button className="bg-black opacity-80 rounded-lg text-white font-bold p-3">
-              + Add Funds
-            </button>
+          <div className="w-full">
+            <div className="p-2">
+              <p className="flex justify-center text-slate-800 font-bold text-xl pt-4 pb-1 dark:text-slate-400">
+                You don&apos;t have any assets yet!
+              </p>
+              <p className="flex justify-center text-gray-300 text-sm pt-2">
+                Start by buying or depositing funds:
+              </p>
+            </div>
+            <div className="flex justify-center pt-2">
+              <button className="bg-black opacity-80 rounded-lg text-white font-bold p-3">
+                + Add Funds
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-    }
-     
-      {/*Now depends on current action render the components */}
-      {currentAction === 'receive' && <ReceiveQR wallet={wallet} onClose={handleClose}/>}
-      {currentAction === 'swap' &&  <TokenSwap setCurrent={setCurrentAction}/>}
-      {currentAction === 'send' && <SendToken  setCurrent={setCurrentAction}/>}
+      )}
 
+      {/*Now depends on current action render the components */}
+      {currentAction === 'receive' && (
+        <ReceiveQR wallet={wallet} onClose={handleClose} />
+      )}
+      {currentAction === 'swap' && <TokenSwap setCurrent={setCurrentAction} />}
+      {currentAction === 'send' && <SendToken setCurrent={setCurrentAction} />}
     </div>
   )
 }
diff --git a/src/components/common/ProfileDropDown.tsx b/src/components/common/ProfileDropDown.tsx
index e3deb73..258a794 100644
--- a/src/components/common/ProfileDropDown.tsx
+++ b/src/components/common/ProfileDropDown.tsx
@@ -1,89 +1,91 @@
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import UserImage from '@/components/Appbar/UserImage'
 import { LogOut, UserRound } from 'lucide-react'
 import { signOut, useSession } from 'next-auth/react'
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation'
 
 const ProfileDropDown = () => {
-    const { data } = useSession();
-    const router = useRouter();
+  const { data } = useSession()
+  const router = useRouter()
 
-    const dropDownData = [
-        {
-            name: 'Profile',
-            icon: <UserRound size={15} />,
-            href: '/profile',
-        }
-    ]
+  const dropDownData = [
+    {
+      name: 'Profile',
+      icon: <UserRound size={15} />,
+      href: '/profile',
+    },
+  ]
 
-    return <>
-        <DropdownMenu>
-            <DropdownMenuTrigger className="w-[3rem] flex items-center p-[0.2rem]  justify-center h-[2rem] transition outline-none">
-                {!data?.user?.image ? (
-                    <div className="p-1 border-2 rounded-md">
-                        <UserRound />
-                    </div>
-                ) : (
-                    <UserImage image={data?.user.image} />
-                )}
-            </DropdownMenuTrigger>
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger className="w-[3rem] flex items-center p-[0.2rem]  justify-center h-[2rem] transition outline-none">
+          {!data?.user?.image ? (
+            <div className="p-1 border-2 rounded-md">
+              <UserRound />
+            </div>
+          ) : (
+            <UserImage image={data?.user.image} />
+          )}
+        </DropdownMenuTrigger>
 
-            <DropdownMenuContent className="translate-y-8 scale-110 -translate-x-10 shadow-lg bg-white ">
-                <DropdownMenuLabel className="flex gap-4 items-center">
-                    <div className="!w-[2rem] flex items-center p-[0.2rem]  justify-center !h-[2rem]">
-                        {!data?.user?.image ? (
-                            <div className="p-1 border-2 rounded-full border-[#1a1a1a]">
-                                <UserRound />
-                            </div>
-                        ) : (
-                            <UserImage image={data?.user.image} />
-                        )}
-                    </div>
+        <DropdownMenuContent className="translate-y-8 scale-110 -translate-x-10 shadow-lg bg-white dark:bg-[#1c1b22]">
+          <DropdownMenuLabel className="flex gap-4 items-center">
+            <div className="!w-[2rem] flex items-center p-[0.2rem]  justify-center !h-[2rem]">
+              {!data?.user?.image ? (
+                <div className="p-1 border-2 rounded-full border-[#1a1a1a]">
+                  <UserRound />
+                </div>
+              ) : (
+                <UserImage image={data?.user.image} />
+              )}
+            </div>
 
-                    <div className="flex flex-col">
-                        <span className="max-w-[200px]">{data?.user?.name}</span>
-                        <span className="text-[0.8rem] max-w-[200px] text-gray-400 break-all">
-                            {data?.user?.email}
-                        </span>
-                    </div>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
+            <div className="flex flex-col">
+              <span className="max-w-[200px]">{data?.user?.name}</span>
+              <span className="text-[0.8rem] max-w-[200px] text-gray-400 break-all">
+                {data?.user?.email}
+              </span>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
 
-                {dropDownData.map((item, index) => {
-                    return (
-                        <DropdownMenuItem
-                            className="flex gap-2 cursor-pointer text-black/70 hover:text-black transition"
-                            onClick={() => router.push('/profile')}
-                            key={index}
-                        >
-                            <span>{item.icon}</span>
-                            <span>{item.name}</span>
-                        </DropdownMenuItem>
-                    )
-                })}
-                <DropdownMenuSeparator />
-                {data?.user && (
-                    <DropdownMenuItem
-                        onClick={async () => {
-                            await signOut()
-                            router.push('/')
-                        }}
-                        className="flex gap-2 cursor-pointer text-black/70 hover:text-black transition"
-                    >
-                        <LogOut size={15} />
-                        Logout
-                    </DropdownMenuItem>
-                )}
-            </DropdownMenuContent>
-        </DropdownMenu>
+          {dropDownData.map((item, index) => {
+            return (
+              <DropdownMenuItem
+                className="flex gap-2 cursor-pointer dark:text-white/70 text-black/70 hover:text-black transition"
+                onClick={() => router.push('/profile')}
+                key={index}
+              >
+                <span>{item.icon}</span>
+                <span>{item.name}</span>
+              </DropdownMenuItem>
+            )
+          })}
+          <DropdownMenuSeparator />
+          {data?.user && (
+            <DropdownMenuItem
+              onClick={async () => {
+                await signOut()
+                router.push('/')
+              }}
+              className="flex gap-2 cursor-pointer dark:text-white/70 text-black/70 hover:text-black transition"
+            >
+              <LogOut size={15} />
+              Logout
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
     </>
+  )
 }
 
-export default ProfileDropDown;
\ No newline at end of file
+export default ProfileDropDown