diff --git a/src/app/dashboard/components/receive.tsx b/src/app/dashboard/components/receive.tsx
index e201d12..132d094 100644
--- a/src/app/dashboard/components/receive.tsx
+++ b/src/app/dashboard/components/receive.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { DownloadIcon, CheckCircleIcon, ClockIcon, XCircleIcon, QrCodeIcon } from "lucide-react";
+import {
+  DownloadIcon,
+  CheckCircleIcon,
+  ClockIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { MdCallReceived } from "react-icons/md";
 import { CopyButton } from "./copy-button";
 import QrCode from "./qr-code";
 import { WalletInjectedProps } from "./wallet-wrapper";
@@ -43,81 +49,119 @@ interface IncomingPayment {
   status: string;
 }
 
-export const Receive: React.FC<WalletInjectedProps & {
-  recentPayments: IncomingPayment[];
-}> = ({ starknetId, address, recentPayments }) => {
-
+export const Receive: React.FC<
+  WalletInjectedProps & {
+    recentPayments: IncomingPayment[];
+  }
+> = ({ starknetId, address, recentPayments }) => {
   return (
-    <div className="flex flex-col items-center">
-    <div className="space-y-6 w-[600px] max-w-[600px]">
-      <div>
-        <h1 className="text-2xl font-semibold">Receive Money</h1>
-        <h3 className="text-md font-light opacity-65">Share your wallet details to recieve payments</h3>
-      </div>
-      <div className="rounded-lg border border-gray-800 dark:border-gray-300 p-6">
-        <div className="flex flex-col justify-center items-center">
-          <h2 className="text-2xl font-medium mb-1">Your Payment QR Code</h2>
-          <h2 className="text-sm font-light mb-4 opacity-65">Scan to send money to your wallet</h2>
+    <div className="flex flex-col items-center px-4 sm:px-0">
+      <div className="space-y-4 sm:space-y-6 w-full max-w-[600px]">
+        <div className="text-center sm:text-left">
+          <h1 className="text-xl sm:text-2xl font-semibold">Receive Money</h1>
+          <h3 className="text-sm sm:text-md font-light opacity-65">
+            Share your wallet details to receive payments
+          </h3>
         </div>
-        <QrCode walletAddress={address} starknetId={starknetId} />
-      </div>
 
-      <div className="rounded-lg border p-6  border-gray-800 dark:border-gray-300">
-        <div className="flex flex-col justify-center items-start">
-          <h2 className="text-lg font-medium">Wallet Details</h2>
-          <h2 className="text-sm font-light mb-4 opacity-65">Share these details to receive payments</h2>
+        <div className="rounded-lg border border-gray-800 dark:border-gray-300 p-4 sm:p-6">
+          <div className="flex flex-col justify-center items-center">
+            <h2 className="text-lg sm:text-2xl font-medium mb-1">
+              Your Payment QR Code
+            </h2>
+            <h2 className="text-xs sm:text-sm font-light mb-4 opacity-65 text-center">
+              Scan to send money to your wallet
+            </h2>
+          </div>
+          <QrCode walletAddress={address} starknetId={starknetId} />
         </div>
-        <div className="space-y-4">
-            { starknetId && <div>
-              <label className="block text-sm font-medium">StarkNet ID</label>
-              <div className="flex items-center gap-2 mt-1">
-                <input readOnly value={starknetId} className="w-full rounded border border-gray-300 dark:border-gray-800 px-3 py-1 bg-transparent" />
-                <CopyButton text={starknetId} />
+
+        <div className="rounded-lg border p-4 sm:p-6 border-gray-800 dark:border-gray-300">
+          <div className="flex flex-col justify-center items-start">
+            <h2 className="text-base sm:text-lg font-medium">Wallet Details</h2>
+            <h2 className="text-xs sm:text-sm font-light mb-4 opacity-65">
+              Share these details to receive payments
+            </h2>
+          </div>
+          <div className="space-y-3 sm:space-y-4">
+            {starknetId && (
+              <div>
+                <label className="block text-sm font-medium">StarkNet ID</label>
+                <div className="flex items-center gap-2 mt-1">
+                  <input
+                    readOnly
+                    value={starknetId}
+                    className="w-full rounded border border-gray-300 dark:border-gray-800 px-2 sm:px-3 py-1 bg-transparent text-sm overflow-hidden text-ellipsis"
+                  />
+                  <div className="flex-shrink-0">
+                    <CopyButton text={starknetId} />
+                  </div>
+                </div>
               </div>
-            </div>
-            }
-            { address 
-              ? <div>
-                <label className="block text-sm font-medium">Wallet Address</label>
+            )}
+            {address ? (
+              <div>
+                <label className="block text-sm font-medium">
+                  Wallet Address
+                </label>
                 <div className="flex items-center gap-2 mt-1">
-                  <input readOnly value={address} className="w-full rounded border border-gray-300 dark:border-gray-800 px-3 py-1 bg-transparent" />
-                  <CopyButton text={address} />
+                  <input
+                    readOnly
+                    value={address}
+                    className="w-full rounded border border-gray-300 dark:border-gray-800 px-2 sm:px-3 py-1 bg-transparent text-sm overflow-hidden text-ellipsis"
+                  />
+                  <div className="flex-shrink-0">
+                    <CopyButton text={address} />
+                  </div>
                 </div>
-              </div> 
-              : <p className="block text-sm font-medium">Connect wallet to view address</p>
-            }
+              </div>
+            ) : (
+              <p className="block text-sm font-medium">
+                Connect wallet to view address
+              </p>
+            )}
+          </div>
         </div>
-      </div>
 
-      <div className="rounded-lg border p-6  border-gray-800 dark:border-gray-300">
-        <div className="flex flex-col justify-center items-start">
-          <h2 className="text-lg font-medium">Recent Incoming Payments</h2>
-          <h2 className="text-sm font-light mb-4 opacity-65">Your latest recieved transactions</h2>
-        </div>
-        <div className="space-y-3">
-          {recentPayments.map((tx, i) => (
+        <div className="rounded-lg border p-4 sm:p-6 border-gray-800 dark:border-gray-300">
+          <div className="flex flex-col justify-center items-start">
+            <h2 className="text-base sm:text-lg font-medium">
+              Recent Incoming Payments
+            </h2>
+            <h2 className="text-xs sm:text-sm font-light mb-4 opacity-65">
+              Your latest received transactions
+            </h2>
+          </div>
+          <div className="space-y-3">
+            {recentPayments.map((tx, i) => (
               <div
                 key={i}
-                className="flex items-center gap-4 rounded-md border border-gray-800 dark:border-gray-300 p-3"
+                className="flex items-center gap-3 sm:gap-4 rounded-md border border-gray-800 dark:border-gray-300 p-3"
               >
-                <div className="bg-green-300/20 p-2 rounded-full">
-                  <DownloadIcon className="text-green-600" size={20} />
+                <div className="bg-green-300/20 p-2 rounded-full flex-shrink-0">
+                  <MdCallReceived className="text-green-600" size={16} />
                 </div>
-                <div className="flex-1">
-                  <div className="font-regular">From {tx.from}</div>
-                  <div className="text-sm text-gray-400">{tx.date}</div>
+                <div className="flex-1 min-w-0">
+                  <div className="font-regular text-sm sm:text-base truncate">
+                    From {tx.from}
+                  </div>
+                  <div className="text-xs sm:text-sm text-gray-400">
+                    {tx.date}
+                  </div>
                 </div>
-                <div className="text-right">
-                  <div className="text-green-500 font-medium">{tx.amount}</div>
-                  {getStatusBadge(tx.status)}
+                <div className="text-right flex-shrink-0">
+                  <div className="text-green-500 font-medium text-sm sm:text-base">
+                    {tx.amount}
+                  </div>
+                  <div className="mt-1">{getStatusBadge(tx.status)}</div>
                 </div>
               </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </div>
-    </div>
   );
 };
 
-export default Receive
+export default Receive;
diff --git a/src/app/dashboard/components/send.tsx b/src/app/dashboard/components/send.tsx
index 18aee35..d465af4 100644
--- a/src/app/dashboard/components/send.tsx
+++ b/src/app/dashboard/components/send.tsx
@@ -140,46 +140,48 @@ export const Send: React.FC<ISend> = ({
   }
 
   if(!isConnected) {
-    return <div className="flex flex-col items-center">
-      <div className="space-y-6 w-[600px] max-w-[600px]">
-        <div>
-          <h1 className="text-2xl font-semibold">Connect Wallet</h1>
-          <h3 className="text-md font-light opacity-65">Connect your wallet to send money</h3>
+    return <div className="w-full px-4 py-6">
+      <div className="space-y-4 sm:space-y-6 max-w-2xl mx-auto">
+        <div className="text-center sm:text-left">
+          <h1 className="text-xl sm:text-2xl font-semibold">Connect Wallet</h1>
+          <h3 className="text-sm sm:text-md font-light opacity-65">Connect your wallet to send money</h3>
         </div>
       </div>
     </div>
   }
 
   return (
-    <div className="flex flex-col items-center">
-    <div className="space-y-6 w-[600px] max-w-[600px]">
-      <div>
-        <h1 className="text-2xl font-semibold">Send Money</h1>
-        <h3 className="text-md font-light opacity-65">Transfer funds instantly across the globe</h3>
-      </div>
-        <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="rounded-lg border border-gray-800 dark:border-gray-300 p-6 space-y-4">
-        <div className="flex flex-col justify-center items-start">
-          <h2 className="text-xl font-medium">Send Funds</h2>
-          <h2 className="text-sm font-light mb-4 opacity-65">Enter recipient details and amount to transfer</h2>
-        </div>
-        <div>
-          <label className="block text-sm font-medium">Recipient Address or StarkNet ID</label>
-          <input
-            className="w-full rounded border border-gray-300 dark:border-gray-800 px-3 py-2 bg-transparent mt-1"
-            placeholder="0x... or username.stark"
-            {...register("recipient_address", { required: true })}
-          />
-          {errors.recipient_address?.message && <p className="text-sm text-red-700">{errors?.recipient_address?.message}</p>}
+    <div className="w-full px-4 py-6">
+      <div className="space-y-4 sm:space-y-6 max-w-2xl mx-auto">
+        <div className="text-center sm:text-left">
+          <h1 className="text-xl sm:text-2xl font-semibold">Send Money</h1>
+          <h3 className="text-sm sm:text-md font-light opacity-65">Transfer funds instantly across the globe</h3>
         </div>
+        
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="rounded-lg border border-gray-800 dark:border-gray-300 p-4 sm:p-6 space-y-4">
+            <div className="flex flex-col justify-center items-start">
+              <h2 className="text-lg sm:text-xl font-medium">Send Funds</h2>
+              <h2 className="text-xs sm:text-sm font-light mb-4 opacity-65">Enter recipient details and amount to transfer</h2>
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium">Recipient Address or StarkNet ID</label>
+              <input
+                className="w-full rounded border border-gray-300 dark:border-gray-800 px-3 py-2 bg-transparent mt-1 text-sm"
+                placeholder="0x... or username.stark"
+                {...register("recipient_address", { required: true })}
+              />
+              {errors.recipient_address?.message && <p className="text-sm text-red-700 mt-1">{errors?.recipient_address?.message}</p>}
+            </div>
 
-        <div className="flex gap-2">
-          <div className="flex-1 w-[50%]">
-            <div className="flex justify-between">
+            <div className="flex flex-col sm:flex-row gap-3 sm:gap-2">
+              <div className="flex-1">
+                <div className="flex justify-between items-center">
                   <label className="block text-sm font-medium">Amount</label>
                   { 
                     isBalanceAvailable && <button
-                      className="px-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-transparent rounded-sm hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition text-[10px]"
+                      className="px-2 py-1 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-transparent rounded-sm hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition text-[10px]"
                       onClick={(e) => {
                         e.preventDefault()
                         handleMaxAmount()
@@ -188,79 +190,80 @@ export const Send: React.FC<ISend> = ({
                       MAX 
                     </button>
                   }
-            </div>
-            <input
-              className="w-full rounded border border-gray-300 dark:border-gray-800 px-3 py-2 bg-transparent mt-1"
-              placeholder="0.00"
-              type="text"
-              pattern="[0-9]*[.,]?[0-9]*"
-              {...register("amount", { required: true })}
-            />
-            {errors.amount?.message && <p className="text-sm text-red-700">{errors?.amount?.message}</p>}
-          </div>
-          <div className="w-[50%]">
-            <label className="block text-sm font-medium">Currency</label>
-            <div className="relative mt-1">
+                </div>
+                <input
+                  className="w-full rounded border border-gray-300 dark:border-gray-800 px-3 py-2 bg-transparent mt-1 text-sm"
+                  placeholder="0.00"
+                  type="text"
+                  pattern="[0-9]*[.,]?[0-9]*"
+                  {...register("amount", { required: true })}
+                />
+                {errors.amount?.message && <p className="text-sm text-red-700 mt-1">{errors?.amount?.message}</p>}
+              </div>
+              
+              <div className="flex-1">
+                <label className="block text-sm font-medium">Currency</label>
+                <div className="relative mt-1">
                   <select
                     defaultValue="USDC"
-                    className="appearance-none w-full h-[43px] rounded border  border-gray-300 dark:border-gray-800 px-3 py-2 bg-transparent pr-8"
+                    className="appearance-none w-full h-[43px] rounded border border-gray-300 dark:border-gray-800 px-3 py-2 bg-transparent pr-8 text-sm"
                     {...register("currency", { required: true })}
                   >
                     {Object.keys(currentCurrencies ?? {}).map(key => {
-                      return <option value={key}>{key}</option>
+                      return <option key={key} value={key}>{key}</option>
                     })}
                   </select>
-              <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-                <ArrowDownIcon size={16} />
+                  <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
+                    <ArrowDownIcon size={16} />
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
 
-        <div>
-          <label className="block text-sm font-medium">Message (Optional)</label>
-          <textarea
-            className="w-full rounded border border-gray-300 dark:border-gray-800 px-3 py-2 bg-transparent mt-1"
-            placeholder="Add a note for the recipient..."
-            rows={3}
-            {...register("message", { required: true })}
-          />
-        </div>
-
-        <button 
-            className="w-full bg-gray-300 text-gray-800 dark:text-gray-200 dark:bg-gray-700 font-semibold py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-800  flex items-center justify-center gap-2 disabled:opacity-65"
-            type="submit"
-        >
-          <SendIcon size={18} /> Send Funds
-        </button>
-      </div>
-      </form>
+            <div>
+              <label className="block text-sm font-medium">Message (Optional)</label>
+              <textarea
+                className="w-full rounded border border-gray-300 dark:border-gray-800 px-3 py-2 bg-transparent mt-1 text-sm resize-none"
+                placeholder="Add a note for the recipient..."
+                rows={3}
+                {...register("message", { required: false })}
+              />
+            </div>
 
-      <div className="rounded-lg border border-gray-800 dark:border-gray-300 p-6">
-        <h2 className="text-lg font-semibold">Recent Recipients</h2>
-        <p className="text-sm font-light mb-4 opacity-65">Quick send to your frequent contacts</p>
-        <div className="space-y-3">
-          {recentRecipients.map((recipient, i) => (
-            <div
-              key={i}
-              className="flex items-center gap-4 rounded-md border border-gray-800 dark:border-gray-300 p-3 bg-transparent"
+            <button 
+              className="w-full bg-gray-300 text-gray-800 dark:text-gray-200 dark:bg-gray-700 font-semibold py-2.5 sm:py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-800 flex items-center justify-center gap-2 disabled:opacity-65 text-sm sm:text-base"
+              type="submit"
             >
-              <div className="bg-blue-800/10 p-2 rounded-md">
-                <SendIcon className="text-blue-600/50" size={20} />
-              </div>
-              <div className="flex-1">
-                <div className="font-medium">{recipient.name}</div>
-                <div className="text-sm">{recipient.id}</div>
-              </div>
-              <div className="flex flex-col justify-end items-end">
-                  <div className="text-sm">Last sent</div>
-                  <div className="text-sm">{recipient.amount}</div>
+              <SendIcon size={18} /> Send Funds
+            </button>
+          </div>
+        </form>
+
+        <div className="rounded-lg border border-gray-800 dark:border-gray-300 p-4 sm:p-6">
+          <h2 className="text-base sm:text-lg font-semibold">Recent Recipients</h2>
+          <p className="text-xs sm:text-sm font-light mb-4 opacity-65">Quick send to your frequent contacts</p>
+          <div className="space-y-3">
+            {recentRecipients.map((recipient, i) => (
+              <div
+                key={i}
+                className="flex items-center gap-3 sm:gap-4 rounded-md border border-gray-800 dark:border-gray-300 p-3 bg-transparent"
+              >
+                <div className="border p-2 rounded-md flex-shrink-0">
+                  <SendIcon className="text-white" size={16} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-sm sm:text-base truncate">{recipient.name}</div>
+                  <div className="text-xs sm:text-sm text-gray-400 truncate">{recipient.id}</div>
+                </div>
+                <div className="flex flex-col justify-end items-end flex-shrink-0">
+                  <div className="text-xs sm:text-sm">Last sent</div>
+                  <div className="text-xs sm:text-sm font-medium">{recipient.amount}</div>
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </div>
-    </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/app/dashboard/receive/page.tsx b/src/app/dashboard/receive/page.tsx
index ddb6e51..6df9603 100644
--- a/src/app/dashboard/receive/page.tsx
+++ b/src/app/dashboard/receive/page.tsx
@@ -1,8 +1,8 @@
-"use client" 
+"use client";
 
-import React from "react"
-import Receive from "../components/receive"
-import WalletWrapper from "../components/wallet-wrapper"
+import React from "react";
+import Receive from "../components/receive";
+import WalletWrapper from "../components/wallet-wrapper";
 
 const DUMMY_RECENT = [
   {
@@ -29,21 +29,23 @@ const DUMMY_RECENT = [
     amount: "+$200.00",
     status: "Failed",
   },
-]
+];
 
 const page = () => {
   return (
     <WalletWrapper>
       {({ address, starknetId, isStarknetIdLoading }) => {
-        return <Receive 
-          address={address}
-          starknetId={starknetId}
-          isStarknetIdLoading={isStarknetIdLoading}
-          recentPayments={DUMMY_RECENT}
-        />
+        return (
+          <Receive
+            address={address}
+            starknetId={starknetId}
+            isStarknetIdLoading={isStarknetIdLoading}
+            recentPayments={DUMMY_RECENT}
+          />
+        );
       }}
     </WalletWrapper>
-  )
-}
+  );
+};
 
-export default page
+export default page;
diff --git a/src/components/landing/navigation.tsx b/src/components/landing/navigation.tsx
index 6c5ffe3..697bdf1 100644
--- a/src/components/landing/navigation.tsx
+++ b/src/components/landing/navigation.tsx
@@ -116,7 +116,7 @@ export function Navigation({ setIsModalOpen }: NavigationProps) {
 
           {/* Mobile Menu */}
           <div className="fixed top-0 right-0 h-full w-full bg-white/95 dark:bg-gray-900/95 backdrop-blur-md shadow-2xl z-50 transform transition-transform duration-300 border-l border-gray-200 dark:border-gray-700">
-            <div className="flex flex-col h-full">
+            <div className="flex flex-col h-full bg-white/95 dark:bg-gray-900/95">
               {/* Header */}
               <div className="flex items-center justify-between p-4 border-b dark:border-gray-800">
                 <div className="flex items-center space-x-2">
@@ -170,7 +170,7 @@ export function Navigation({ setIsModalOpen }: NavigationProps) {
               </div>
 
               {/* Bottom Actions */}
-              <div className="p-4 border-t cursor-pointer dark:border-gray-800 space-y-3">
+              <div className="p-4 border-t bg-white/95 dark:bg-gray-900/95 cursor-pointer dark:border-gray-800 space-y-3">
                 <Button
                   variant="outline"
                   className="w-full"
diff --git a/src/components/microloans/LoanOfferCard.tsx b/src/components/microloans/LoanOfferCard.tsx
index b6df3a2..30c3d50 100644
--- a/src/components/microloans/LoanOfferCard.tsx
+++ b/src/components/microloans/LoanOfferCard.tsx
@@ -33,7 +33,7 @@ export default function LoanOfferCard({
   onApplyNow,
 }: LoanOfferCardProps) {
   return (
-    <Card className="border-2 border-t-[#9c9c9e] p-3 gap-2 md:gap-4 border-b-[#9c9c9e] border-l-[#d5d5d7] border-r-[#d5d5d7]">
+    <Card className="border p-3 gap-2 md:gap-4">
       <CardHeader className="p-0">
         <div className="flex justify-between items-start">
           <div>
diff --git a/src/components/profile/export-section.tsx b/src/components/profile/export-section.tsx
index f92fc20..83690a4 100644
--- a/src/components/profile/export-section.tsx
+++ b/src/components/profile/export-section.tsx
@@ -262,7 +262,7 @@ Detailed History:
 
   return (
     <div className="space-y-4 lg:space-y-6">
-      <Card className="bg-gray-50 border-gray-200 dark:border-gray-800">
+      <Card className="border-gray-200 dark:border-gray-800">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <Download className="h-5 w-5 mr-2" />
@@ -281,7 +281,7 @@ Detailed History:
             return (
               <div
                 key={item.id}
-                className="p-3 lg:p-4 bg-gray-100 dark:bg-black rounded-lg space-y-4"
+                className="p-3 lg:p-4 border rounded-lg space-y-4"
               >
                 <div className="flex flex-col sm:flex-row items-start justify-between space-y-3 sm:space-y-0">
                   <div className="flex items-start space-x-3 flex-1">
@@ -360,7 +360,7 @@ Detailed History:
       </Card>
 
       {/* Export History */}
-      <Card className="bg-gray-50 border-gray-200 dark:border-gray-800">
+      <Card className="border-gray-200 dark:border-gray-800">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <Calendar className="h-5 w-5 mr-2" />
@@ -372,7 +372,7 @@ Detailed History:
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-3">
-            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 bg-gray-100 dark:bg-black rounded-lg space-y-3 sm:space-y-0">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 border rounded-lg space-y-3 sm:space-y-0">
               <div className="flex items-center space-x-3">
                 <FileText className="h-4 w-4 lg:h-5 lg:w-5 text-gray-500 dark:text-gray-400" />
                 <div>
@@ -393,7 +393,7 @@ Detailed History:
                 Re-download
               </Button>
             </div>
-            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 bg-gray-100 dark:bg-black rounded-lg space-y-3 sm:space-y-0">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 border rounded-lg space-y-3 sm:space-y-0">
               <div className="flex items-center space-x-3">
                 <Shield className="h-4 w-4 lg:h-5 lg:w-5 text-gray-500 dark:text-gray-400" />
                 <div>
diff --git a/src/components/profile/privacy-section.tsx b/src/components/profile/privacy-section.tsx
index de19438..d7e7551 100644
--- a/src/components/profile/privacy-section.tsx
+++ b/src/components/profile/privacy-section.tsx
@@ -31,7 +31,7 @@ export default function PrivacySection() {
   return (
     <div className="space-y-6">
       {/* Profile Visibility */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <Eye className="h-5 w-5 mr-2" />
@@ -62,7 +62,7 @@ export default function PrivacySection() {
       </Card>
 
       {/* Activity Sharing */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <Share className="h-5 w-5 mr-2" />
@@ -109,7 +109,7 @@ export default function PrivacySection() {
       </Card>
 
       {/* Data Export */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <Download className="h-5 w-5 mr-2" />
@@ -135,7 +135,7 @@ export default function PrivacySection() {
       </Card>
 
       {/* Account Deletion */}
-      <Card className="bg-gray-50 bg-card  border-red-200 dark:border-red-800/50">
+      <Card className="border-red-200 dark:border-red-800/50">
         <CardHeader>
           <CardTitle className="text-red-600 dark:text-red-400 flex items-center text-lg lg:text-xl">
             <Trash2 className="h-5 w-5 mr-2" />
@@ -165,7 +165,7 @@ export default function PrivacySection() {
             <DialogTrigger asChild>
               <Button className="cursor-pointer" variant="destructive">Delete Account</Button>
             </DialogTrigger>
-            <DialogContent className="bg-white bg-card  border-gray-200 dark:border-gray-800">
+            <DialogContent className="border">
               <DialogHeader>
                 <DialogTitle className="text-red-600 dark:text-red-400">
                   Confirm Account Deletion
diff --git a/src/components/profile/profile-section.tsx b/src/components/profile/profile-section.tsx
index 5a3669b..e7788c8 100644
--- a/src/components/profile/profile-section.tsx
+++ b/src/components/profile/profile-section.tsx
@@ -68,7 +68,7 @@ export default function ProfileSection() {
   return (
     <div className="space-y-4 lg:space-y-6">
       {/* Profile Information */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="  border-gray-200 dark:border-gray-800">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white text-lg lg:text-xl">
             Profile Information
@@ -98,7 +98,7 @@ export default function ProfileSection() {
                     <Edit className="h-3 w-3 lg:h-4 lg:w-4" />
                   </Button>
                 </DialogTrigger>
-                <DialogContent className="bg-white bg-card  border-gray-200 dark:border-gray-800 mx-4">
+                <DialogContent className="border-gray-200 dark:border-gray-800 mx-4">
                   <DialogHeader>
                     <DialogTitle className="text-gray-900 dark:text-white">
                       Update Avatar
@@ -275,7 +275,7 @@ export default function ProfileSection() {
       </Card>
 
       {/* Wallet Information */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border-gray-200 dark:border-gray-800">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white text-lg lg:text-xl">
             Wallet Information
@@ -285,7 +285,7 @@ export default function ProfileSection() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 lg:p-4 bg-gray-100 dark:bg-black rounded-lg space-y-3 sm:space-y-0">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 lg:p-4 border rounded-lg space-y-3 sm:space-y-0">
             <div className="flex items-center space-x-3">
               <div className="h-8 w-8 lg:h-10 lg:w-10 bg-blue-600 rounded-lg flex items-center justify-center">
                 <User className="h-4 w-4 lg:h-5 lg:w-5 text-white" />
@@ -316,7 +316,7 @@ export default function ProfileSection() {
             </Button>
           </div>
 
-          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 lg:p-4 bg-gray-100 dark:bg-black  rounded-lg space-y-3 sm:space-y-0">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 lg:p-4 border  rounded-lg space-y-3 sm:space-y-0">
             <div className="flex items-center space-x-3">
               <div className="h-8 w-8 lg:h-10 lg:w-10 bg-purple-600 rounded-lg flex items-center justify-center">
                 <span className="text-white font-bold text-xs lg:text-sm">
@@ -343,7 +343,7 @@ export default function ProfileSection() {
       </Card>
 
       {/* Verification Status */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border-gray-200 dark:border-gray-800">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white text-lg lg:text-xl">
             Verification Status
@@ -377,7 +377,7 @@ export default function ProfileSection() {
           </div>
 
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            <div className="p-3 lg:p-4 bg-gray-100 dark:bg-black rounded-lg">
+            <div className="p-3 lg:p-4 border rounded-lg">
               <div className="flex items-center space-x-2 mb-2">
                 <Check className="h-4 w-4 text-green-500" />
                 <p className="text-gray-900 dark:text-white font-medium text-sm lg:text-base">
@@ -388,7 +388,7 @@ export default function ProfileSection() {
                 Government ID verified
               </p>
             </div>
-            <div className="p-3 lg:p-4 bg-gray-100 dark:bg-black rounded-lg">
+            <div className="p-3 lg:p-4 border rounded-lg">
               <div className="flex items-center space-x-2 mb-2">
                 <Check className="h-4 w-4 text-green-500" />
                 <p className="text-gray-900 dark:text-white font-medium text-sm lg:text-base">
diff --git a/src/components/profile/security-section.tsx b/src/components/profile/security-section.tsx
index 084434c..9d0afc9 100644
--- a/src/components/profile/security-section.tsx
+++ b/src/components/profile/security-section.tsx
@@ -49,7 +49,7 @@ export default function SecuritySection() {
   return (
     <div className="space-y-6">
       {/* Password Change */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border-gray-200 dark:border-gray-800">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <Lock className="h-5 w-5 mr-2" />
@@ -69,7 +69,7 @@ export default function SecuritySection() {
                 Change Password
               </Button>
             </DialogTrigger>
-            <DialogContent className="bg-white bg-card  border-gray-200 dark:border-gray-800">
+            <DialogContent className="border">
               <DialogHeader>
                 <DialogTitle className="text-gray-900 dark:text-white">
                   Change Password
@@ -126,7 +126,7 @@ export default function SecuritySection() {
       </Card>
 
       {/* Two-Factor Authentication */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <Shield className="h-5 w-5 mr-2" />
@@ -176,7 +176,7 @@ export default function SecuritySection() {
       </Card>
 
       {/* Login History */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <History className="h-5 w-5 mr-2" />
@@ -190,7 +190,7 @@ export default function SecuritySection() {
           {loginHistory.map((login, index) => (
             <div
               key={index}
-              className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 bg-gray-100 dark:bg-black rounded-lg space-y-2 sm:space-y-0"
+              className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 border rounded-lg space-y-2 sm:space-y-0"
             >
               <div className="flex items-center space-x-3">
                 <Monitor className="h-4 w-4 lg:h-5 lg:w-5 text-gray-500 dark:text-gray-400" />
@@ -217,7 +217,7 @@ export default function SecuritySection() {
       </Card>
 
       {/* Recovery Phrase */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="border">
         <CardHeader>
           <CardTitle className="text-gray-900 dark:text-white flex items-center text-lg lg:text-xl">
             <Key className="h-5 w-5 mr-2" />