diff --git a/public/connect.jpg b/public/connect.jpg
new file mode 100644
index 0000000..42bf40a
Binary files /dev/null and b/public/connect.jpg differ
diff --git a/public/logoText.png b/public/logoText.png
new file mode 100644
index 0000000..018c34d
Binary files /dev/null and b/public/logoText.png differ
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index b804449..c454b9e 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,9 +1,8 @@
-import { Card, CardContent } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
-  Send,
   Users,
   Globe,
   Shield,
@@ -11,55 +10,78 @@ import {
   Target,
   Heart,
   Award,
-  Linkedin,
-  Twitter,
-  Github,
   ArrowRight,
-} from "lucide-react"
-import Link from "next/link"
-import { ThemeToggle } from "@/components/theme-toggle"
+} from "lucide-react";
+import { FaXTwitter } from "react-icons/fa6";
+import { FaGithub } from "react-icons/fa";
+import { FaLinkedin } from "react-icons/fa";
+import Image from "next/image";
+import Link from "next/link";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 export default function AboutPage() {
   const teamMembers = [
     {
-      name: "Sarah Chen",
-      role: "CEO & Co-Founder",
+      name: "Victor Peter",
+      role: "CEO & Founder",
       bio: "Former Goldman Sachs VP with 10+ years in fintech and blockchain",
-      avatar: "SC",
+      avatar: "VP",
     },
     {
-      name: "Marcus Johnson",
-      role: "CTO & Co-Founder",
+      name: "Mercy Hassan",
+      role: "CTO",
       bio: "Ex-Ethereum Foundation developer, expert in Layer 2 solutions",
-      avatar: "MJ",
+      avatar: "MH",
     },
     {
-      name: "Priya Patel",
+      name: "Henry Sliq",
       role: "Head of Product",
       bio: "Former Stripe PM, passionate about financial inclusion",
-      avatar: "PP",
+      avatar: "HS",
     },
     {
-      name: "David Kim",
+      name: "Eleazer Musa",
       role: "Lead Engineer",
       bio: "StarkNet core contributor, smart contract security specialist",
-      avatar: "DK",
+      avatar: "EM",
     },
-  ]
+  ];
 
   const milestones = [
-    { year: "2023", event: "Company founded", description: "StarkRemit was born from a vision of financial inclusion" },
-    { year: "2023", event: "Seed funding", description: "Raised $2M from leading crypto VCs" },
-    { year: "2024", event: "Beta launch", description: "Launched beta version with 1,000+ users" },
-    { year: "2024", event: "StarkNet integration", description: "Full integration with StarkNet mainnet" },
-    { year: "2024", event: "Global expansion", description: "Expanded to 15+ countries" },
-  ]
+    {
+      year: "2024",
+      event: "Company founded",
+      description: "ChainRemit was born from a vision of financial inclusion",
+    },
+    {
+      year: "2024",
+      event: "Ideation",
+      description:
+        "Identified the need for accessible cross-border payments using blockchain technology to serve underbanked communities",
+    },
+    {
+      year: "2025",
+      event: "Building and beta launch",
+      description: "Launched beta version with 1,000+ users",
+    },
+    {
+      year: "2025",
+      event: "StarkNet integration",
+      description: "Full integration with StarkNet mainnet",
+    },
+    {
+      year: "2026",
+      event: "Global expansion",
+      description: "Plans to expand up to 10+ countries",
+    },
+  ];
 
   const values = [
     {
       icon: <Globe className="w-6 h-6" />,
       title: "Global Accessibility",
-      description: "Making financial services accessible to everyone, everywhere",
+      description:
+        "Making financial services accessible to everyone, everywhere",
     },
     {
       icon: <Shield className="w-6 h-6" />,
@@ -76,7 +98,7 @@ export default function AboutPage() {
       title: "Innovation",
       description: "Pushing the boundaries of what's possible in DeFi",
     },
-  ]
+  ];
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
@@ -84,10 +106,15 @@ export default function AboutPage() {
       <header className="border-b bg-white/80 backdrop-blur-sm dark:bg-gray-900/80">
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <Send className="w-4 h-4 text-white" />
-            </div>
-            <span className="text-xl font-bold">StarkRemit</span>
+            <Link href="/">
+              <Image
+                src="/Logo and text-3.png"
+                alt="ChainRemit Logo"
+                width={150}
+                height={50}
+                className="w-[150px] h-[50px] object-fill"
+              />
+            </Link>
           </div>
           <div className="flex items-center space-x-4">
             <Button variant="ghost" asChild>
@@ -104,8 +131,8 @@ export default function AboutPage() {
       <div className="container mx-auto px-4 py-12">
         {/* Hero Section */}
         <div className="text-center mb-16">
-          <Badge variant="secondary" className="mb-4">
-            About StarkRemit
+          <Badge variant="secondary" className="mb-4 animate-pulse">
+            About ChainRemit
           </Badge>
           <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
             Empowering Financial Freedom Through{" "}
@@ -114,8 +141,9 @@ export default function AboutPage() {
             </span>
           </h1>
           <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-            We're building the future of finance where everyone has access to fast, affordable, and secure financial
-            services, regardless of their location or background.
+            We're building the future of finance where everyone has access to
+            fast, affordable, and secure financial services, regardless of their
+            location or background.
           </p>
         </div>
 
@@ -126,12 +154,15 @@ export default function AboutPage() {
               <div>
                 <div className="flex items-center mb-6">
                   <Target className="w-8 h-8 text-blue-600 mr-3" />
-                  <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Our Mission</h2>
+                  <h2 className="text-3xl font-bold text-gray-900 dark:text-white">
+                    Our Mission
+                  </h2>
                 </div>
                 <p className="text-lg text-gray-600 dark:text-gray-300 mb-6">
-                  To democratize access to financial services by leveraging blockchain technology, creating a world
-                  where anyone can send money, save with their community, and access credit based on their on-chain
-                  reputation.
+                  To democratize access to financial services by leveraging
+                  blockchain technology, creating a world where anyone can send
+                  money, save with their community, and access credit based on
+                  their on-chain reputation.
                 </p>
                 <div className="space-y-4">
                   <div className="flex items-start space-x-3">
@@ -141,7 +172,8 @@ export default function AboutPage() {
                     <div>
                       <h4 className="font-semibold">Financial Inclusion</h4>
                       <p className="text-gray-600 dark:text-gray-300">
-                        Bringing financial services to the unbanked and underbanked
+                        Bringing financial services to the unbanked and
+                        underbanked
                       </p>
                     </div>
                   </div>
@@ -152,7 +184,8 @@ export default function AboutPage() {
                     <div>
                       <h4 className="font-semibold">Innovation</h4>
                       <p className="text-gray-600 dark:text-gray-300">
-                        Pioneering new solutions for age-old financial challenges
+                        Pioneering new solutions for age-old financial
+                        challenges
                       </p>
                     </div>
                   </div>
@@ -163,15 +196,21 @@ export default function AboutPage() {
                     <div>
                       <h4 className="font-semibold">Trust & Security</h4>
                       <p className="text-gray-600 dark:text-gray-300">
-                        Building transparent, secure systems that users can trust
+                        Building transparent, secure systems that users can
+                        trust
                       </p>
                     </div>
                   </div>
                 </div>
               </div>
               <div className="relative">
-                <div className="w-full h-96 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-3xl flex items-center justify-center">
-                  <Globe className="w-32 h-32 text-blue-600 animate-pulse" />
+                <div className="w-full h-96 rounded-xl flex items-center justify-center overflow-hidden shadow-slate-800 shadow-2x1">
+                  <Image
+                    src="/connect.jpg"
+                    alt=""
+                    fill
+                    className="w-full h-full object-fill rounded-xl"
+                  />
                 </div>
               </div>
             </div>
@@ -181,18 +220,27 @@ export default function AboutPage() {
         {/* Values Section */}
         <div className="mb-16">
           <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Our Values</h2>
-            <p className="text-xl text-gray-600 dark:text-gray-300">The principles that guide everything we do</p>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              Our Values
+            </h2>
+            <p className="text-xl text-gray-600 dark:text-gray-300">
+              The principles that guide everything we do
+            </p>
           </div>
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
             {values.map((value, index) => (
-              <Card key={index} className="text-center hover:shadow-lg transition-shadow">
+              <Card
+                key={index}
+                className="text-center hover:shadow-lg transition-shadow"
+              >
                 <CardContent className="p-6">
                   <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center mx-auto mb-4 text-white">
                     {value.icon}
                   </div>
                   <h3 className="font-semibold mb-2">{value.title}</h3>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">{value.description}</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    {value.description}
+                  </p>
                 </CardContent>
               </Card>
             ))}
@@ -202,31 +250,57 @@ export default function AboutPage() {
         {/* Team Section */}
         <div className="mb-16">
           <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Meet Our Team</h2>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              Meet Our Team
+            </h2>
             <p className="text-xl text-gray-600 dark:text-gray-300">
               Passionate experts building the future of finance
             </p>
           </div>
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
             {teamMembers.map((member, index) => (
-              <Card key={index} className="text-center hover:shadow-lg transition-shadow">
+              <Card
+                key={index}
+                className="text-center hover:shadow-lg transition-shadow"
+              >
                 <CardContent className="p-6">
                   <Avatar className="w-20 h-20 mx-auto mb-4">
-                    <AvatarImage src={`/team/${member.avatar.toLowerCase()}.jpg`} alt={member.name} />
-                    <AvatarFallback className="text-lg">{member.avatar}</AvatarFallback>
+                    <AvatarImage
+                      src={`/team/${member.avatar.toLowerCase()}.jpg`}
+                      alt={member.name}
+                    />
+                    <AvatarFallback className="text-lg">
+                      {member.avatar}
+                    </AvatarFallback>
                   </Avatar>
                   <h3 className="font-semibold mb-1">{member.name}</h3>
-                  <p className="text-blue-600 dark:text-blue-400 text-sm mb-3">{member.role}</p>
-                  <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{member.bio}</p>
+                  <p className="text-blue-600 dark:text-blue-400 text-sm mb-3">
+                    {member.role}
+                  </p>
+                  <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+                    {member.bio}
+                  </p>
                   <div className="flex justify-center space-x-2">
-                    <Button variant="ghost" size="sm">
-                      <Linkedin className="w-4 h-4" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="cursor-pointer"
+                    >
+                      <FaLinkedin />
                     </Button>
-                    <Button variant="ghost" size="sm">
-                      <Twitter className="w-4 h-4" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="cursor-pointer"
+                    >
+                      <FaXTwitter />
                     </Button>
-                    <Button variant="ghost" size="sm">
-                      <Github className="w-4 h-4" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="cursor-pointer"
+                    >
+                      <FaGithub />
                     </Button>
                   </div>
                 </CardContent>
@@ -238,8 +312,12 @@ export default function AboutPage() {
         {/* Timeline Section */}
         <div className="mb-16">
           <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Our Journey</h2>
-            <p className="text-xl text-gray-600 dark:text-gray-300">Key milestones in our mission</p>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              Our Journey
+            </h2>
+            <p className="text-xl text-gray-600 dark:text-gray-300">
+              Key milestones in our mission
+            </p>
           </div>
           <div className="max-w-4xl mx-auto">
             <div className="space-y-8">
@@ -256,7 +334,9 @@ export default function AboutPage() {
                         <h3 className="font-semibold">{milestone.event}</h3>
                         <Badge variant="outline">{milestone.year}</Badge>
                       </div>
-                      <p className="text-gray-600 dark:text-gray-300">{milestone.description}</p>
+                      <p className="text-gray-600 dark:text-gray-300">
+                        {milestone.description}
+                      </p>
                     </CardContent>
                   </Card>
                 </div>
@@ -270,7 +350,9 @@ export default function AboutPage() {
           <CardContent className="p-12">
             <div className="text-center mb-8">
               <h2 className="text-3xl font-bold mb-4">Our Impact</h2>
-              <p className="opacity-90">Making a difference in the global financial landscape</p>
+              <p className="opacity-90">
+                Making a difference in the global financial landscape
+              </p>
             </div>
             <div className="grid md:grid-cols-4 gap-8 text-center">
               <div>
@@ -300,10 +382,15 @@ export default function AboutPage() {
               <Award className="w-16 h-16 text-blue-600 mx-auto mb-4" />
               <h2 className="text-2xl font-bold mb-4">Join Our Mission</h2>
               <p className="text-gray-600 dark:text-gray-300 mb-6">
-                Be part of the financial revolution. Start using StarkRemit today and experience the future of money.
+                Be part of the financial revolution. Start using ChainRemit
+                today and experience the future of money.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button asChild size="lg" className="bg-gradient-to-r from-blue-600 to-purple-600">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-gradient-to-r from-blue-600 to-purple-600"
+                >
                   <Link href="/auth/signup">
                     Get Started
                     <ArrowRight className="ml-2 w-4 h-4" />
@@ -318,5 +405,5 @@ export default function AboutPage() {
         </div>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app/auth/login/login.tsx b/src/app/auth/login/login.tsx
index 6b40554..00d42f5 100644
--- a/src/app/auth/login/login.tsx
+++ b/src/app/auth/login/login.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import type React from "react";
-
+import { FcGoogle } from "react-icons/fc";
+import { FaApple } from "react-icons/fa";
 import { useState, useEffect } from "react";
 import {
   Card,
@@ -314,24 +315,7 @@ export default function LoginPage() {
                 onClick={() => handleSocialLogin("Google")}
                 disabled={isLoading}
               >
-                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
-                  <path
-                    fill="currentColor"
-                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                  />
-                </svg>
+                <FcGoogle />
                 Google
               </Button>
               <Button
@@ -340,13 +324,7 @@ export default function LoginPage() {
                 onClick={() => handleSocialLogin("Apple")}
                 disabled={isLoading}
               >
-                <svg
-                  className="mr-2 h-4 w-4"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-                </svg>
+                <FaApple />
                 Apple
               </Button>
             </div>
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
index b045bf1..7f28fe3 100644
--- a/src/app/auth/signup/page.tsx
+++ b/src/app/auth/signup/page.tsx
@@ -23,8 +23,6 @@ import {
   Lock,
   User,
   Loader2,
-  Send,
-  Wallet,
   Check,
   X,
 } from "lucide-react";
@@ -33,7 +31,8 @@ import { useRouter } from "next/navigation";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { PhoneInput } from "@/components/auth/phone-input";
 import { useWalletContext } from "../../../components/blockchain/walletProvider";
-
+import { FcGoogle } from "react-icons/fc";
+import { FaApple } from "react-icons/fa";
 import { ConnectButton } from "../../../components/blockchain/connect-button";
 import WalletDisconnectModal from "../../../components/blockchain/Wallet-disconnect-modal";
 // Utility to shorten wallet address
@@ -546,24 +545,7 @@ export default function SignUpPage() {
                 onClick={() => handleSocialSignUp("Google")}
                 disabled={isLoading}
               >
-                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
-                  <path
-                    fill="currentColor"
-                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                  />
-                </svg>
+                <FcGoogle />
                 Google
               </Button>
               <Button
@@ -572,13 +554,7 @@ export default function SignUpPage() {
                 onClick={() => handleSocialSignUp("Apple")}
                 disabled={isLoading}
               >
-                <svg
-                  className="mr-2 h-4 w-4"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-                </svg>
+                <FaApple />
                 Apple
               </Button>
             </div>
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 3287ec5..d24b26e 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -7,6 +7,7 @@ import QuickHelp from "@/components/contact/QuickHelp";
 import OfficeLocations from "@/components/contact/OfficeLocations";
 import { ThemeToggle } from "@/components/theme-toggle";
 import Link from "next/link";
+import Image from "next/image";
 import { Send } from "lucide-react";
 
 export default function ContactPage() {
@@ -15,10 +16,13 @@ export default function ContactPage() {
       <header className="border-b bg-white/80 backdrop-blur-sm dark:bg-gray-900/80">
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
           <Link href="/" className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <Send className="w-4 h-4 text-white" />
-            </div>
-            <span className="text-xl font-bold">ChainRemit</span>
+            <Image
+              src="/Logo and text-3.png"
+              alt="ChainRemit Logo"
+              width={150}
+              height={50}
+              className="w-[150px] h-[50px] object-fill"
+            />
           </Link>
           <div className="flex items-center space-x-4">
             <Link
@@ -56,4 +60,4 @@ export default function ContactPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/dashboard/components/sidebar.tsx b/src/app/dashboard/components/sidebar.tsx
index fa463d7..fa6bed9 100644
--- a/src/app/dashboard/components/sidebar.tsx
+++ b/src/app/dashboard/components/sidebar.tsx
@@ -177,14 +177,20 @@ const Sidebar: React.FC<SidebarProps> = ({
               isCollapsed ? "justify-center w-full" : "my-6"
             }`}
           >
-            {/* <motion.div
-              className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center flex-shrink-0"
+            <motion.div
+              className="rounded-lg flex items-center justify-center flex-shrink-0"
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               transition={smoothSpring}
             >
-              <Send className="w-6 h-6 text-primary-foreground rotate-45" />
-            </motion.div> */}
+              <Image
+                src="/Logo.png"
+                alt="ChainRemit Logo"
+                width={80}
+                height={60}
+                className="w-[80px] h-[60px] object-fill"
+              />
+            </motion.div>
             <AnimatePresence mode="wait">
               {!isCollapsed && (
                 <motion.div
@@ -193,18 +199,18 @@ const Sidebar: React.FC<SidebarProps> = ({
                   initial="hide"
                   animate="show"
                   exit="hide"
-                  className="ml-3 my-6 overflow-hidden"
+                  className="-ml-3 my-6 overflow-hidden"
                   style={{
                     originX: 0,
                     willChange: "transform, opacity",
                   }}
                 >
                   <Image
-                    src="/Logo and text-3.png"
+                    src="/logoText.png"
                     alt="ChainRemit Logo"
-                    width={200}
-                    height={70}
-                    className="w-[200px] h-[70px] object-fill"
+                    width={80}
+                    height={60}
+                    className="w-[80px] h-[60px] object-fill"
                   />
                 </motion.div>
               )}
diff --git a/src/app/demo/page.tsx b/src/app/demo/page.tsx
index a588412..859def9 100644
--- a/src/app/demo/page.tsx
+++ b/src/app/demo/page.tsx
@@ -1,12 +1,19 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Progress } from "@/components/ui/progress"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { useState } from "react";
+import Image from "next/image";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Progress } from "@/components/ui/progress";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
   Send,
   CreditCard,
@@ -18,14 +25,14 @@ import {
   RotateCcw,
   ArrowRight,
   CheckCircle,
-} from "lucide-react"
-import Link from "next/link"
-import { ThemeToggle } from "@/components/theme-toggle"
+} from "lucide-react";
+import Link from "next/link";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 export default function DemoPage() {
-  const [currentStep, setCurrentStep] = useState(0)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [demoProgress, setDemoProgress] = useState(0)
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [demoProgress, setDemoProgress] = useState(0);
 
   const demoSteps = [
     {
@@ -53,42 +60,42 @@ export default function DemoPage() {
       description: "Improve your on-chain financial reputation",
       component: "credit-score",
     },
-  ]
+  ];
 
   const startDemo = () => {
-    setIsPlaying(true)
-    setCurrentStep(0)
-    setDemoProgress(0)
+    setIsPlaying(true);
+    setCurrentStep(0);
+    setDemoProgress(0);
 
     const interval = setInterval(() => {
       setDemoProgress((prev) => {
         if (prev >= 100) {
-          clearInterval(interval)
-          setIsPlaying(false)
-          return 100
+          clearInterval(interval);
+          setIsPlaying(false);
+          return 100;
         }
-        return prev + 2
-      })
-    }, 100)
-  }
+        return prev + 2;
+      });
+    }, 100);
+  };
 
   const resetDemo = () => {
-    setIsPlaying(false)
-    setCurrentStep(0)
-    setDemoProgress(0)
-  }
+    setIsPlaying(false);
+    setCurrentStep(0);
+    setDemoProgress(0);
+  };
 
   const nextStep = () => {
     if (currentStep < demoSteps.length - 1) {
-      setCurrentStep(currentStep + 1)
+      setCurrentStep(currentStep + 1);
     }
-  }
+  };
 
   const prevStep = () => {
     if (currentStep > 0) {
-      setCurrentStep(currentStep - 1)
+      setCurrentStep(currentStep - 1);
     }
-  }
+  };
 
   const renderDemoComponent = (component: string) => {
     switch (component) {
@@ -101,7 +108,7 @@ export default function DemoPage() {
               </div>
               <h3 className="text-xl font-semibold">Connect StarkNet Wallet</h3>
               <p className="text-gray-600 dark:text-gray-300">
-                Securely connect your wallet to access all StarkRemit features
+                Securely connect your wallet to access all ChainRemit features
               </p>
               <Button className="bg-gradient-to-r from-blue-600 to-purple-600">
                 <Wallet className="mr-2 w-4 h-4" />
@@ -109,7 +116,7 @@ export default function DemoPage() {
               </Button>
             </CardContent>
           </Card>
-        )
+        );
 
       case "send-money":
         return (
@@ -124,11 +131,15 @@ export default function DemoPage() {
               <div className="grid grid-cols-2 gap-4">
                 <div>
                   <label className="text-sm font-medium">To</label>
-                  <div className="p-2 border rounded bg-gray-50 dark:bg-gray-800">alice.stark</div>
+                  <div className="p-2 border rounded bg-gray-50 dark:bg-gray-800">
+                    alice.stark
+                  </div>
                 </div>
                 <div>
                   <label className="text-sm font-medium">Amount</label>
-                  <div className="p-2 border rounded bg-gray-50 dark:bg-gray-800">$125.50</div>
+                  <div className="p-2 border rounded bg-gray-50 dark:bg-gray-800">
+                    $125.50
+                  </div>
                 </div>
               </div>
               <Button className="w-full">
@@ -137,7 +148,7 @@ export default function DemoPage() {
               </Button>
             </CardContent>
           </Card>
-        )
+        );
 
       case "savings-groups":
         return (
@@ -172,7 +183,7 @@ export default function DemoPage() {
               <Button className="w-full">Join Group</Button>
             </CardContent>
           </Card>
-        )
+        );
 
       case "microloans":
         return (
@@ -196,7 +207,7 @@ export default function DemoPage() {
               </div>
             </CardContent>
           </Card>
-        )
+        );
 
       case "credit-score":
         return (
@@ -216,29 +227,40 @@ export default function DemoPage() {
                 </div>
               </div>
               <div>
-                <Badge variant="secondary" className="bg-green-100 text-green-800">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-100 text-green-800"
+                >
                   Trust Level: A+
                 </Badge>
-                <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">Excellent Credit</p>
+                <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
+                  Excellent Credit
+                </p>
               </div>
             </CardContent>
           </Card>
-        )
+        );
 
       default:
-        return null
+        return null;
     }
-  }
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
       <header className="border-b bg-white/80 backdrop-blur-sm dark:bg-gray-900/80">
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <Send className="w-4 h-4 text-white" />
-            </div>
-            <span className="text-xl font-bold">StarkRemit Demo</span>
+            <Image
+              src="/Logo and text-3.png"
+              alt="ChainRemit Logo"
+              width={150}
+              height={50}
+              className="w-[150px] h-[50px] object-fill"
+            />
+            <span className="text-l font-semibold text-gray-900 dark:text-white">
+              Demo
+            </span>
           </div>
           <div className="flex items-center space-x-4">
             <Button variant="ghost" asChild>
@@ -254,10 +276,13 @@ export default function DemoPage() {
 
       <div className="container mx-auto px-4 py-12">
         <div className="text-center mb-12">
-          <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">Experience StarkRemit</h1>
+          <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            Experience ChainRemit
+          </h1>
           <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
-            Take an interactive tour of our decentralized finance platform and see how easy it is to send money, save
-            with groups, and access microloans.
+            Take an interactive tour of our decentralized finance platform and
+            see how easy it is to send money, save with groups, and access
+            microloans.
           </p>
 
           <div className="flex justify-center items-center space-x-4 mb-8">
@@ -308,7 +333,9 @@ export default function DemoPage() {
               <Card>
                 <CardHeader>
                   <CardTitle>Demo Steps</CardTitle>
-                  <CardDescription>Click on any step to explore that feature</CardDescription>
+                  <CardDescription>
+                    Click on any step to explore that feature
+                  </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-3">
                   {demoSteps.map((step, index) => (
@@ -333,7 +360,9 @@ export default function DemoPage() {
                         </div>
                         <div>
                           <h4 className="font-medium">{step.title}</h4>
-                          <p className="text-sm text-gray-600 dark:text-gray-300">{step.description}</p>
+                          <p className="text-sm text-gray-600 dark:text-gray-300">
+                            {step.description}
+                          </p>
                         </div>
                       </div>
                     </div>
@@ -343,9 +372,16 @@ export default function DemoPage() {
 
               <div className="space-y-4">
                 <div className="flex items-center justify-between">
-                  <h3 className="text-xl font-semibold">{demoSteps[currentStep].title}</h3>
+                  <h3 className="text-xl font-semibold">
+                    {demoSteps[currentStep].title}
+                  </h3>
                   <div className="flex space-x-2">
-                    <Button onClick={prevStep} disabled={currentStep === 0} variant="outline" size="sm">
+                    <Button
+                      onClick={prevStep}
+                      disabled={currentStep === 0}
+                      variant="outline"
+                      size="sm"
+                    >
                       Previous
                     </Button>
                     <Button
@@ -371,7 +407,9 @@ export default function DemoPage() {
                     <Send className="w-6 h-6 text-blue-600 dark:text-blue-400" />
                   </div>
                   <CardTitle>Instant Transfers</CardTitle>
-                  <CardDescription>Send money globally with minimal fees and instant settlement</CardDescription>
+                  <CardDescription>
+                    Send money globally with minimal fees and instant settlement
+                  </CardDescription>
                 </CardHeader>
                 <CardContent>
                   <ul className="space-y-2 text-sm">
@@ -397,7 +435,9 @@ export default function DemoPage() {
                     <Users className="w-6 h-6 text-green-600 dark:text-green-400" />
                   </div>
                   <CardTitle>Savings Groups</CardTitle>
-                  <CardDescription>Join community savings circles with automated payouts</CardDescription>
+                  <CardDescription>
+                    Join community savings circles with automated payouts
+                  </CardDescription>
                 </CardHeader>
                 <CardContent>
                   <ul className="space-y-2 text-sm">
@@ -423,7 +463,9 @@ export default function DemoPage() {
                     <CreditCard className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                   </div>
                   <CardTitle>Microloans</CardTitle>
-                  <CardDescription>Access small loans based on your credit score</CardDescription>
+                  <CardDescription>
+                    Access small loans based on your credit score
+                  </CardDescription>
                 </CardHeader>
                 <CardContent>
                   <ul className="space-y-2 text-sm">
@@ -460,7 +502,9 @@ export default function DemoPage() {
                       </div>
                     </div>
                   </CardHeader>
-                  <CardContent className="p-6">{renderDemoComponent(step.component)}</CardContent>
+                  <CardContent className="p-6">
+                    {renderDemoComponent(step.component)}
+                  </CardContent>
                 </Card>
               ))}
             </div>
@@ -472,10 +516,15 @@ export default function DemoPage() {
             <CardContent className="p-8">
               <h2 className="text-2xl font-bold mb-4">Ready to Get Started?</h2>
               <p className="mb-6 opacity-90">
-                Join thousands of users who are already using StarkRemit for their financial needs.
+                Join thousands of users who are already using ChainRemit for
+                their financial needs.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button asChild size="lg" className="bg-white text-blue-600 hover:bg-gray-100">
+                <Button
+                  asChild
+                  size="lg"
+                  className="bg-white text-blue-600 hover:bg-gray-100"
+                >
                   <Link href="/auth/signup">
                     Create Account
                     <ArrowRight className="ml-2 w-4 h-4" />
@@ -487,7 +536,7 @@ export default function DemoPage() {
                   size="lg"
                   className="border-white text-white hover:bg-white/10 bg-transparent"
                 >
-                  <Link href="/dashboard">View Dashboard</Link>
+                  {/* <Link href="/dashboard">View Dashboard</Link> */}
                 </Button>
               </div>
             </CardContent>
@@ -495,5 +544,5 @@ export default function DemoPage() {
         </div>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..55dd0e3 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/help/loading.tsx b/src/app/help/loading.tsx
new file mode 100644
index 0000000..4349ac3
--- /dev/null
+++ b/src/app/help/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null;
+}
diff --git a/src/app/help/page.tsx b/src/app/help/page.tsx
index cbc176b..ad47121 100644
--- a/src/app/help/page.tsx
+++ b/src/app/help/page.tsx
@@ -1,287 +1,372 @@
-"use client"
-  import {
-      Search,
-      MessageCircle,
-      Send,
-      Download,
-      Users,
-      CreditCard,
-      TrendingUp,
-      Shield,
-      HelpCircle,
-      Moon,
-      Video,
-      Book,
-      ArrowRight,
-      } from "lucide-react"
-    import Link from "next/link"
-    import { Button } from "@/components/ui/button"
-    import { Input } from "@/components/ui/input"
-    import { Card, CardContent } from "@/components/ui/card"
-    import { HiPaperAirplane } from "react-icons/hi"
-    import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-    import Faq from "@/components/help/faq"
-    import PopularArticles from "@/components/help/popular-articles"
-  
-  const helpTopics = [
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Send,
+  Search,
+  HelpCircle,
+  Book,
+  MessageCircle,
+  Video,
+  CreditCard,
+  Users,
+  Shield,
+  TrendingUp,
+  Download,
+  ArrowRight,
+} from "lucide-react";
+import Link from "next/link";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+export default function HelpPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const categories = [
     {
-      icon: Book,
+      id: "getting-started",
       title: "Getting Started",
+      icon: <Book className="w-5 h-5" />,
       description: "Learn the basics of using StarkRemit",
       articles: 12,
     },
     {
-      icon: Send,
+      id: "sending-money",
       title: "Sending Money",
+      icon: <Send className="w-5 h-5" />,
       description: "How to send money globally",
       articles: 8,
     },
     {
-      icon: Download,
+      id: "receiving-money",
       title: "Receiving Money",
+      icon: <Download className="w-5 h-5" />,
       description: "How to receive payments",
       articles: 6,
     },
     {
-      icon: Users,
+      id: "savings-groups",
       title: "Savings Groups",
+      icon: <Users className="w-5 h-5" />,
       description: "Join and manage savings circles",
       articles: 10,
     },
     {
-      icon: CreditCard,
+      id: "microloans",
       title: "Microloans",
+      icon: <CreditCard className="w-5 h-5" />,
       description: "Access and manage loans",
-      articles: 9, 
+      articles: 9,
     },
     {
-      icon: TrendingUp,
+      id: "credit-score",
       title: "Credit Score",
+      icon: <TrendingUp className="w-5 h-5" />,
       description: "Understanding your credit rating",
       articles: 7,
     },
     {
-      icon: Shield,
+      id: "wallet-security",
       title: "Wallet & Security",
+      icon: <Shield className="w-5 h-5" />,
       description: "Keep your account secure",
       articles: 11,
     },
     {
-      icon: HelpCircle,
+      id: "troubleshooting",
       title: "Troubleshooting",
+      icon: <HelpCircle className="w-5 h-5" />,
       description: "Common issues and solutions",
       articles: 15,
     },
-  ]
+  ];
 
-  const faqData = [
-        {
-          question: "How do I get started with StarkRemit?",
-          answer:
-            "Getting started with StarkRemit is simple. Download our app, create an account, verify your identity, and you can start sending money within minutes. We'll guide you through each step of the process.",
-        },
-        {
-          question: "What are the fees for sending money?",
-          answer:
-            "Our fees are transparent and competitive. Fees vary based on the destination country, amount sent, and payment method. You'll always see the exact fee before confirming your transaction.",
-        },
-        {
-          question: "How long do transactions take?",
-          answer:
-            "Most transactions are completed within minutes to a few hours. The exact time depends on the destination country, payment method, and local banking hours. We'll provide you with an estimated delivery time for each transaction.",
-        },
-        {
-          question: "Is my money safe with StarkRemit?",
-          answer:
-            "Yes, your money is protected by bank-level security measures. We use advanced encryption, secure data storage, and are regulated by financial authorities. Your funds are held in segregated accounts for additional protection.",
-        },
-        {
-          question: "How do savings groups work?",
-          answer:
-            "Savings groups allow you to pool money with friends and family for common goals. Create or join a group, set savings targets, and track progress together. It's a great way to save for events, emergencies, or investments.",
-        },
-        {
-          question: "What affects my credit score?",
-          answer:
-            "Your payment history, transaction patterns, and account activity can influence your StarkRemit credit score. Regular, on-time transactions and maintaining account security positively impact your score.",
-        },
-        {
-          question: "Can I use StarkRemit without KYC?",
-          answer:
-            "For small transactions, you can start with basic verification. However, for larger amounts and full access to all features, KYC (Know Your Customer) verification is required to comply with financial regulations.",
-        },
-        {
-          question: "What happens if I lose access to my wallet?",
-          answer:
-            "If you lose access to your wallet, contact our support team immediately. We have recovery procedures in place to help you regain access to your account and funds safely.",
-        }
-      ]
+  const popularArticles = [
+    {
+      title: "How to connect your StarkNet wallet",
+      category: "Getting Started",
+      views: "2.3k views",
+    },
+    {
+      title: "Understanding transaction fees",
+      category: "Sending Money",
+      views: "1.8k views",
+    },
+    {
+      title: "How to join a savings group",
+      category: "Savings Groups",
+      views: "1.5k views",
+    },
+    {
+      title: "Improving your credit score",
+      category: "Credit Score",
+      views: "1.2k views",
+    },
+    {
+      title: "What to do if a transaction fails",
+      category: "Troubleshooting",
+      views: "1.1k views",
+    },
+  ];
 
-    const articlesData = [
+  const faqs = [
     {
-        title: "How to connect your StarkNet wallet",
-        category: "Getting Started",
-        views: "2.3k views",
-        href: "/articles/connect-starknet-wallet",
+      question: "How do I get started with ChainRemit?",
+      answer:
+        "To get started, you'll need to connect a StarkNet-compatible wallet, complete identity verification (optional for higher limits), and you can immediately start sending money or joining savings groups.",
     },
     {
-        title: "Understanding transaction fees",
-        category: "Sending Money",
-        views: "1.8k views",
-        href: "/articles/transaction-fees",
+      question: "What are the fees for sending money?",
+      answer:
+        "Our fees are transparent and competitive. You'll pay a small network fee (typically under $0.50) plus our service fee of 1-2% depending on the amount and destination. All fees are shown before you confirm any transaction.",
     },
     {
-        title: "How to join a savings group",
-        category: "Savings Groups",
-        views: "1.5k views",
-        href: "/articles/join-savings-group",
+      question: "How long do transactions take?",
+      answer:
+        "Most transactions are completed within minutes thanks to StarkNet's fast processing. International transfers typically take 2-10 minutes, while domestic transfers are usually instant.",
     },
     {
-        title: "Improving your credit score",
-        category: "Credit Score",
-        views: "1.2k views",
-        href: "/articles/improve-credit-score",
+      question: "Is my money safe with ChainRemit?",
+      answer:
+        "Yes, your funds are secured by blockchain technology and smart contracts. We use industry-standard security measures, and your private keys remain under your control when using your own wallet.",
     },
     {
-        title: "What to do if a transaction fails",
-        category: "Troubleshooting",
-        views: "1.1k views",
-        href: "/articles/transaction-fails",
+      question: "How do savings groups work?",
+      answer:
+        "Savings groups are community-based circles where members contribute regularly to a shared pool. Each cycle, one member receives the full amount. It's a traditional savings method enhanced with blockchain transparency and automation.",
     },
-    ]
-        
-  export default function StarkRemitHelp() {
-    return (
-      <div className="bg-slate-900 text-white">
-        {/* Header */}
-        <header className="border-b border-slate-800 px-4 py-3">
-          <div className="mx-auto flex max-w-7xl items-center justify-between">
-            {/* Logo */}
-            <Link href="/" className="cursor-pointer">
+    {
+      question: "What affects my credit score?",
+      answer:
+        "Your on-chain credit score is based on payment history (35%), loan utilization (30%), group activity participation (20%), and account tenure (15%). Regular payments and active participation improve your score.",
+    },
+    {
+      question: "Can I use ChainRemit without KYC?",
+      answer:
+        "Yes, you can use basic features without KYC, but with lower limits. KYC verification unlocks higher transaction limits, access to premium features, and better loan terms.",
+    },
+    {
+      question: "What happens if I lose access to my wallet?",
+      answer:
+        "If you lose access to your wallet, you'll need to recover it using your seed phrase or backup method. We cannot recover wallets for you, which is why it's crucial to securely store your recovery information.",
+    },
+  ];
+
+  const filteredCategories = categories.filter(
+    (category) =>
+      category.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      category.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+      {/* Header */}
+      <header className="border-b bg-white/80 backdrop-blur-sm dark:bg-gray-900/80">
+        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600">
-              <HiPaperAirplane className="h-5 w-5 text-white rotate-45" />
-            </div>
-            <span className="text-xl font-bold text-white">ChainRemit Help</span>
+            <Link href="/">
+              <Image
+                src="/Logo and text-3.png"
+                alt="ChainRemit Logo"
+                width={150}
+                height={50}
+                className="w-[150px] h-[50px] object-fill"
+              />
+            </Link>
+            <span className="text-l font-semibold text-gray-900 dark:text-white">
+              Help
+            </span>
           </div>
-          </Link>
-
-            <div className="flex items-center gap-4">
-              <Button variant="ghost" className="text-white hover:text-white">
-                Home
-              </Button>
-              <Button variant="default" className="bg-white cursor-pointer text-black">
-                Contact Support
-              </Button>
-              <Button variant="ghost" size="icon" className="text-white">
-                <Moon className="h-5 w-5 rounded-full" />
-              </Button>
-            </div>
+          <div className="flex items-center space-x-4">
+            <Button variant="ghost" asChild>
+              <Link href="/">Home</Link>
+            </Button>
+            <Button asChild>
+              <Link href="/contact">Contact Support</Link>
+            </Button>
+            <ThemeToggle />
           </div>
-        </header>
-  
+        </div>
+      </header>
+
+      <div className="container mx-auto px-4 py-12">
         {/* Hero Section */}
-        <section className="px-4 py-16">
-          <div className="mx-auto max-w-4xl text-center">
-            <h1 className="mb-6 text-5xl font-bold">How can we help?</h1>
-            <p className="mb-8 text-xl text-slate-300">
-              Find answers to your questions, learn how to use StarkRemit, and get
-              <br />
-              the support you need.
-            </p>
-  
-            {/* Search Bar */}
-            <div className="relative mb-8 max-w-xl bg-black rounded-md mx-auto">
-              <Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" />
-              <Input    
+        <div className="text-center mb-12">
+          <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            How can we help?
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
+            Find answers to your questions, learn how to use ChainRemit, and get
+            the support you need.
+          </p>
+
+          {/* Search Bar */}
+          <div className="max-w-2xl mx-auto mb-8">
+            <div className="relative">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <Input
                 placeholder="Search for help articles, guides, and FAQs..."
-                className="bg-transparent max-w-full  pl-12 text-lg placeholder:text-slate-400 focus:border-purple-500 border-white/20 rounded-md"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-12 pr-4 py-3 text-lg"
               />
             </div>
-  
-            {/* Action Buttons */}
-            <div className="flex flex-wrap justify-center gap-4">
-              <Button className="bg-black cursor-pointer hover:bg-black/70 text-white border border-white/20">
-                <MessageCircle className="mr-2 h-4 w-4" />
+          </div>
+
+          {/* Quick Actions */}
+          <div className="flex flex-wrap justify-center gap-4">
+            <Button variant="outline" asChild>
+              <Link href="/contact">
+                <MessageCircle className="mr-2 w-4 h-4" />
                 Contact Support
-              </Button>
-              <Button className="bg-black cursor-pointer hover:bg-black/70 text-white border border-white/20">
-                <Video className="mr-2 h-4 w-4" />
+              </Link>
+            </Button>
+            <Button variant="outline" asChild>
+              <Link href="/demo">
+                <Video className="mr-2 w-4 h-4" />
                 Watch Demo
-              </Button>
-              <Button className="bg-black cursor-pointer hover:bg-black/70 text-white border border-white/20">
-                <Book className="mr-2 h-4 w-4" />
+              </Link>
+            </Button>
+            <Button variant="outline" asChild>
+              <Link href="/help#getting-started">
+                <Book className="mr-2 w-4 h-4" />
                 Getting Started Guide
-              </Button>
-            </div>
+              </Link>
+            </Button>
           </div>
-        </section>
-  
-        {/* Help Topics Grid */}
-        <section className="px-4 pb-16">
-          <div className="mx-auto max-w-full w-full xl:w-4/5">
-            <div className="mb-8 flex items-center justify-between"> 
-                <Tabs defaultValue="browse" className="w-full">
-                <TabsList className="w-full p-1 rounded-md bg-slate-800">
-                  <TabsTrigger className="rounded-sm cursor-pointer " value="browse">Browse Topics</TabsTrigger>
-                  <TabsTrigger className="rounded-sm cursor-pointer " value="popular">Popular Articles</TabsTrigger>
-                  <TabsTrigger className="rounded-sm cursor-pointer " value="faq">FAQ</TabsTrigger>
-                </TabsList>
-                <TabsContent value="browse" className="py-2 w-full">
-                    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-                    {helpTopics.map((topic, index) => (
-                        <Card
-                        key={index}
-                        className="group cursor-pointer rounded-md border-slate-700 bg-slate-800 transition-all hover:border-slate-600 hover:bg-slate-750"
-                        >
-                        <CardContent className="flex flex-col h-full justify-between">
-                            <div className="">
-                                <div className={`mb-4 inline-flex h-10 w-10 items-center justify-center rounded-sm bg-gradient-to-l from-purple-600 to-blue-600`}>
-                                <topic.icon className="h-5 w-5 text-white" />
-                                </div>
-                                <h3 className="mb-2 text-lg font-semibold text-white">{topic.title}</h3>
-                                <p className="mb-4 text-sm text-slate-400">{topic.description}</p>
-                            </div>
-                            <div className="flex items-center justify-between">
-                                <div className="text-sm rounded-full bg-slate-700 px-2 text-white">{topic.articles} articles</div>
-                                <div className="h-5 w-5 flex items-center justify-center text-slate-500 group-hover:text-purple-400"><ArrowRight className="h-4 w-4 text-slate-500 group-hover:text-purple-400" /></div>
-                            </div> 
-                        </CardContent>
-                        </Card>
-                    ))}
+        </div>
+
+        <Tabs defaultValue="browse" className="max-w-6xl mx-auto">
+          <TabsList className="grid w-full grid-cols-3 mb-6">
+            <TabsTrigger value="browse">Browse Topics</TabsTrigger>
+            <TabsTrigger value="popular">Popular Articles</TabsTrigger>
+            <TabsTrigger value="faq">FAQ</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="browse" className="space-y-8">
+            {/* Help Categories */}
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {filteredCategories.map((category) => (
+                <Card
+                  key={category.id}
+                  className="hover:shadow-lg transition-shadow cursor-pointer"
+                >
+                  <CardContent className="p-6">
+                    <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center mb-4 text-white">
+                      {category.icon}
                     </div>
-                </TabsContent>
-                <TabsContent value="popular">
-                  <PopularArticles articlesData={articlesData} />
-                </TabsContent>
-                <TabsContent value="faq">
-                  <Faq faqData={faqData} />
-                </TabsContent>
-              </Tabs>
+                    <h3 className="font-semibold mb-2">{category.title}</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+                      {category.description}
+                    </p>
+                    <div className="flex items-center justify-between">
+                      <Badge variant="secondary">
+                        {category.articles} articles
+                      </Badge>
+                      <ArrowRight className="w-4 h-4 text-gray-400" />
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
             </div>
-  
-          </div>
-        </section>
-  
-        {/* Bottom CTA Section */}
-        <section className="bg-gradient-to-l m-2  xl:max-w-screen-2xl xl:mx-auto rounded-lg from-purple-600 to-blue-600 px-4 py-5 xl:py-7">
-          <div className="mx-auto max-w-4xl flex items-center flex-col text-center">
-            <MessageCircle className="h-10 mb-4 w-12 text-white" />
-            <h2 className="mb-3 text-2xl font-bold">Still Need Help?</h2>
-            <p className="mb-8 text-lg text-purple-100">
-              Can't find what you're looking for? Our support team is here to help you 24/7.
+          </TabsContent>
+
+          <TabsContent value="popular" className="space-y-6">
+            <div className="max-w-4xl mx-auto">
+              <h2 className="text-2xl font-bold mb-6">Popular Articles</h2>
+              <div className="space-y-4">
+                {popularArticles.map((article, index) => (
+                  <Card
+                    key={index}
+                    className="hover:shadow-md transition-shadow cursor-pointer"
+                  >
+                    <CardContent className="p-6">
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <h3 className="font-semibold mb-2">
+                            {article.title}
+                          </h3>
+                          <div className="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-300">
+                            <Badge variant="outline">{article.category}</Badge>
+                            <span>{article.views}</span>
+                          </div>
+                        </div>
+                        <ArrowRight className="w-5 h-5 text-gray-400 ml-4" />
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="faq" className="space-y-6">
+            <div className="max-w-4xl mx-auto">
+              <h2 className="text-2xl font-bold mb-6">
+                Frequently Asked Questions
+              </h2>
+              <Accordion type="single" collapsible className="space-y-4">
+                {faqs.map((faq, index) => (
+                  <AccordionItem
+                    key={index}
+                    value={`item-${index}`}
+                    className="border rounded-lg px-4"
+                  >
+                    <AccordionTrigger className="hover:no-underline">
+                      <span className="text-left font-medium">
+                        {faq.question}
+                      </span>
+                    </AccordionTrigger>
+                    <AccordionContent className="text-gray-600 dark:text-gray-300 pb-4">
+                      {faq.answer}
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </div>
+          </TabsContent>
+        </Tabs>
+
+        {/* Still Need Help */}
+        <Card className="mt-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white border-0">
+          <CardContent className="p-8 text-center">
+            <MessageCircle className="w-12 h-12 mx-auto mb-4 opacity-90" />
+            <h2 className="text-2xl font-bold mb-4">Still Need Help?</h2>
+            <p className="mb-6 opacity-90">
+              Can't find what you're looking for? Our support team is here to
+              help you 24/7.
             </p>
-            <div className="flex flex-wrap justify-center gap-4">
-              <Button size="lg" className="bg-white text-purple-600 hover:bg-slate-100">
-                Contact Support
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                asChild
+                size="lg"
+                className="bg-white text-blue-600 hover:bg-gray-100"
+              >
+                <Link href="/contact">Contact Support</Link>
               </Button>
-              <Button size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10 bg-transparent">
-                Email Us
+              <Button
+                asChild
+                variant="outline"
+                size="lg"
+                className="border-white text-white hover:bg-white/10 bg-transparent"
+              >
+                <Link href="mailto:support@chainremit.com">Email Us</Link>
               </Button>
             </div>
-          </div>
-        </section>
+          </CardContent>
+        </Card>
       </div>
-    )
-  }
-  
\ No newline at end of file
+    </div>
+  );
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 0e1136b..14629ea 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -15,6 +15,7 @@ import {
   RefreshCw,
 } from "lucide-react";
 import Link from "next/link";
+import Image from "next/image";
 
 export default function NotFound() {
   const [mounted, setMounted] = useState(false);
@@ -78,15 +79,13 @@ export default function NotFound() {
                 mounted ? "scale-100 opacity-100" : "scale-75 opacity-0"
               }`}
             >
-              <div className="relative">
-                <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/25">
-                  <Send className="w-6 h-6 text-white" />
-                </div>
-                <div className="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl blur opacity-30 animate-pulse" />
-              </div>
-              <span className="text-3xl font-bold bg-gradient-to-r from-white to-blue-200 bg-clip-text text-transparent">
-                ChainRemit
-              </span>
+              {/* <Image
+                src="/Logo and text-3.png"
+                alt="ChainRemit Logo"
+                width={150}
+                height={50}
+                className="w-[150px] h-[50px] object-fill"
+              /> */}
             </div>
           </div>
 
@@ -103,16 +102,6 @@ export default function NotFound() {
                   {glitchText}
                   <div className="absolute inset-0 bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-pink-400/20 blur-2xl animate-pulse" />
                 </div>
-
-                {/* Floating search icon with animation */}
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <div className="relative">
-                    <div className="w-28 h-28 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full flex items-center justify-center backdrop-blur-sm border border-white/10 animate-bounce">
-                      <Search className="w-14 h-14 text-blue-300" />
-                    </div>
-                    <div className="absolute inset-0 w-28 h-28 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-full animate-ping" />
-                  </div>
-                </div>
               </div>
 
               {/* Error Message with enhanced typography */}
@@ -179,7 +168,10 @@ export default function NotFound() {
                       className="bg-white/5 hover:bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/10 hover:border-blue-400/50 transition-all duration-300 cursor-pointer hover:scale-105 group"
                       style={{ animationDelay: `${index * 100}ms` }}
                     >
-                      <Link href={link.path} className="text-blue-200 group-hover:text-white transition-colors duration-300 font-medium">
+                      <Link
+                        href={link.path}
+                        className="text-blue-200 group-hover:text-white transition-colors duration-300 font-medium"
+                      >
                         {link.name}
                       </Link>
                     </div>
@@ -229,12 +221,14 @@ export default function NotFound() {
                 issues or questions you might have.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button
-                  variant="outline"
-                  className="border-blue-400/50 text-blue-200 hover:bg-blue-500/10 hover:border-blue-400 backdrop-blur-sm bg-white/5 transition-all duration-300"
-                >
-                  Contact Support
-                </Button>
+                <Link href="/contact">
+                  <Button
+                    variant="outline"
+                    className="border-blue-400/50 text-blue-200 hover:bg-blue-500/10 hover:border-blue-400 backdrop-blur-sm bg-white/5 transition-all duration-300"
+                  >
+                    Contact Support
+                  </Button>
+                </Link>
                 <Button
                   variant="ghost"
                   className="text-blue-300 hover:bg-blue-500/10 transition-all duration-300"
diff --git a/src/app/privacy-policy/components/ContentSection.tsx b/src/app/privacy-policy/components/ContentSection.tsx
index c976e8b..1f06502 100644
--- a/src/app/privacy-policy/components/ContentSection.tsx
+++ b/src/app/privacy-policy/components/ContentSection.tsx
@@ -14,7 +14,7 @@ const ContentSection: React.FC<ContentSectionProps> = ({
   icon,
   content,
 }) => (
-    <Card id={id} className="scroll-mt-20 bg-white dark:bg-[#09090b] ">
+    <Card id={id} className="scroll-mt-20">
     <CardHeader>
       <CardTitle className="flex items-center">
         <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center text-white mr-3">
diff --git a/src/app/privacy-policy/components/TableOfContents.tsx b/src/app/privacy-policy/components/TableOfContents.tsx
index 2fc529e..595f8d1 100644
--- a/src/app/privacy-policy/components/TableOfContents.tsx
+++ b/src/app/privacy-policy/components/TableOfContents.tsx
@@ -14,7 +14,7 @@ interface TableOfContentsProps {
 // #09090b
 
 const TableOfContents: React.FC<TableOfContentsProps> = ({ sections }) => (
-    <Card className="mb-12 bg-white dark:bg-[#09090b]">
+  <Card className="mb-12">
     <CardHeader>
       <CardTitle className="flex items-center">
         <FileText className="mr-2 w-5 h-5" />
@@ -32,7 +32,9 @@ const TableOfContents: React.FC<TableOfContentsProps> = ({ sections }) => (
             <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center text-blue-600 dark:text-blue-400">
               {section.icon}
             </div>
-            <span className="font-medium text-black dark:text-white">{section.title}</span>
+            <span className="font-medium text-black dark:text-white">
+              {section.title}
+            </span>
           </Link>
         ))}
       </div>
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index e1f0df0..6eeffc6 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -1,18 +1,12 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Send,
-  Shield,
-  Users,
-  Eye,
-  Database,
-  Lock,
-} from "lucide-react";
+import Image from "next/image";
+import { Send, Shield, Users, Eye, Database, Lock } from "lucide-react";
 import Link from "next/link";
 import { ThemeToggle } from "@/components/theme-toggle";
-import PrivacyGlance from './components/PrivacyGlance';
+import PrivacyGlance from "./components/PrivacyGlance";
 import TableOfContents from "./components/TableOfContents";
-import ContentSection from './components/ContentSection';
+import ContentSection from "./components/ContentSection";
 import ContactSection from "./components/ContactSection";
 
 export default function PrivacyPage() {
@@ -23,93 +17,93 @@ export default function PrivacyPage() {
       icon: <Database className="w-5 h-5" />,
       content: [
         {
-            title: "Personal Information",
-            text: " We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support.",
+          title: "Personal Information",
+          text: " We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support.",
         },
         {
-            title: "Usage Information",
-            text: " We automatically collect information about your use of our services, including transaction data, device information, and usage patterns.",
+          title: "Usage Information",
+          text: " We automatically collect information about your use of our services, including transaction data, device information, and usage patterns.",
         },
         {
-            title: "Blockchain Data",
-            text: "As a blockchain-based service, certain transaction data is publicly available on the StarkNet blockchain.",
-          },
+          title: "Blockchain Data",
+          text: "As a blockchain-based service, certain transaction data is publicly available on the StarkNet blockchain.",
+        },
+      ],
+    },
+    {
+      id: "account",
+      title: "How We Use Your Information",
+      icon: <Eye className="w-5 h-5" />,
+      content: [
+        {
+          title: "Service Provision",
+          text: "We use your information to provide, maintain, and improve our financial services, including processing transactions and managing your account.",
+        },
+        {
+          title: "Security and Compliance",
+          text: "We use your information to verify your identity, prevent fraud, and comply with legal and regulatory requirements.",
+        },
+        {
+          title: "Communication",
+          text: "We may use your information to send you service-related communications, updates, and marketing materials (with your consent).",
+        },
       ],
     },
-      {
-          id: "account",
-          title: "How We Use Your Information",
-          icon: <Eye className="w-5 h-5" />,
-          content: [
-              {
-                  title: "Service Provision",
-                  text: "We use your information to provide, maintain, and improve our financial services, including processing transactions and managing your account.",
-              },
-              {
-                  title: "Security and Compliance",
-                  text: "We use your information to verify your identity, prevent fraud, and comply with legal and regulatory requirements.",
-              },
-              {
-                  title: "Communication",
-                  text: "We may use your information to send you service-related communications, updates, and marketing materials (with your consent).",
-              },
-          ],
-      },
     {
       id: "services",
       title: "Information Sharing",
       icon: <Users className="w-5 h-5" />,
       content: [
-          {
-              title: "Service Providers",
-              text: "We may share your information with trusted third-party service providers who assist us in operating our platform.",
-          },
-          {
-              title: "Legal Reqiurements ",
-              text: "We may disclose your information id required by the law, regulation, or legal process.",
-          },
-          {
-              title: "Buisness Transfers",
-              text: "In the event of a merger, acquisition, or sales of assets, your information may be transferred as part of that transaction.",
-          },
+        {
+          title: "Service Providers",
+          text: "We may share your information with trusted third-party service providers who assist us in operating our platform.",
+        },
+        {
+          title: "Legal Reqiurements ",
+          text: "We may disclose your information id required by the law, regulation, or legal process.",
+        },
+        {
+          title: "Buisness Transfers",
+          text: "In the event of a merger, acquisition, or sales of assets, your information may be transferred as part of that transaction.",
+        },
+      ],
+    },
+    {
+      id: "prohibited",
+      title: "Data Security",
+      icon: <Lock className="w-5 h-5" />,
+      content: [
+        {
+          title: "Encryption ",
+          text: "We use industry- standard encryption to protect your data both in transit and at rest. ",
+        },
+        {
+          title: "Access Controls ",
+          text: "We implement strict access controls and regularly audit our systems to ensure data security. ",
+        },
+        {
+          title: "Incident Response",
+          text: "We have procedures in place to detect, respond to, and recover from security incidents.",
+        },
       ],
     },
-      {
-          id: "prohibited",
-          title: "Data Security",
-          icon: <Lock className="w-5 h-5" />,
-          content: [
-              {
-                  title: "Encryption ",
-                  text: "We use industry- standard encryption to protect your data both in transit and at rest. ",
-              },
-              {
-                  title: "Access Controls ",
-                  text: "We implement strict access controls and regularly audit our systems to ensure data security. ",
-              },
-              {
-                  title: "Incident Response",
-                  text: "We have procedures in place to detect, respond to, and recover from security incidents.",
-              },
-          ],
-      },
     {
       id: "eligibility",
       title: "Your rights",
       icon: <Shield className="w-5 h-5" />,
       content: [
-          {
-              title: "Access and Correction ",
-              text: "You have the right to access and correct your personal information. ",
-          },
-          {
-              title: " Data Portability",
-              text: "You can request a copy of your data in a machine- readable format.",
-          },
-          {
-              title: "Deletion ",
-              text: "You can request deletion of your personal information, subject to legal and regulatory requirements. ",
-          },
+        {
+          title: "Access and Correction ",
+          text: "You have the right to access and correct your personal information. ",
+        },
+        {
+          title: " Data Portability",
+          text: "You can request a copy of your data in a machine- readable format.",
+        },
+        {
+          title: "Deletion ",
+          text: "You can request deletion of your personal information, subject to legal and regulatory requirements. ",
+        },
       ],
     },
   ];
@@ -120,10 +114,15 @@ export default function PrivacyPage() {
       <header className="border-b bg-white/80 backdrop-blur-sm dark:bg-gray-900/80">
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <Send className="w-4 h-4 text-white" />
-            </div>
-            <span className="text-xl font-bold">StarkRemit</span>
+            <Link href="/">
+              <Image
+                src="/Logo and text-3.png"
+                alt="ChainRemit Logo"
+                width={150}
+                height={50}
+                className="w-[150px] h-[50px] object-fill"
+              />
+            </Link>
           </div>
           <div className="flex items-center space-x-4">
             <Button variant="ghost" asChild>
@@ -147,7 +146,8 @@ export default function PrivacyPage() {
             Your Privacy Matters
           </h1>
           <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-6">
-           We are committed to protecting your privacy and being transparent about how we collect, use, and share your information.
+            We are committed to protecting your privacy and being transparent
+            about how we collect, use, and share your information.
           </p>
           <div className="flex items-center justify-center space-x-4 text-sm text-gray-600 dark:text-gray-300">
             <span>Last updated: December 15, 2024</span>
diff --git a/src/app/remittance/history.tsx b/src/app/remittance/history.tsx
deleted file mode 100644
index ad2e67b..0000000
--- a/src/app/remittance/history.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-function history(){
-    return(
-        <div>history</div>
-    )
-}
-
-
-export default history;
\ No newline at end of file
diff --git a/src/app/remittance/index.tsx b/src/app/remittance/index.tsx
deleted file mode 100644
index 0616dd5..0000000
--- a/src/app/remittance/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-function Index(){
-    return(
-        <div>Index</div>
-    )
-}
-
-export default Index
\ No newline at end of file
diff --git a/src/app/remittance/receive.tsx b/src/app/remittance/receive.tsx
deleted file mode 100644
index ff20061..0000000
--- a/src/app/remittance/receive.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-function receive(){
-    return(
-        <div>receive</div>
-    )
-}
-
-export default receive;
\ No newline at end of file
diff --git a/src/app/remittance/send.tsx b/src/app/remittance/send.tsx
deleted file mode 100644
index 0e6e2bf..0000000
--- a/src/app/remittance/send.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-function send(){
-    return(
-        <div>send</div>
-    )
-}
-
-
-export default send;
\ No newline at end of file
diff --git a/src/app/security/page.tsx b/src/app/security/page.tsx
index 1870a8d..a0dfdc9 100644
--- a/src/app/security/page.tsx
+++ b/src/app/security/page.tsx
@@ -1,6 +1,6 @@
-import { Card, CardContent } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import {
   Send,
   Shield,
@@ -14,26 +14,30 @@ import {
   Users,
   Zap,
   Globe,
-} from "lucide-react"
-import Link from "next/link"
-import { ThemeToggle } from "@/components/theme-toggle"
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 export default function SecurityPage() {
   const securityFeatures = [
     {
       icon: <Lock className="w-6 h-6" />,
       title: "End-to-End Encryption",
-      description: "All data is encrypted using AES-256 encryption both in transit and at rest",
+      description:
+        "All data is encrypted using AES-256 encryption both in transit and at rest",
     },
     {
       icon: <Key className="w-6 h-6" />,
       title: "Multi-Signature Security",
-      description: "Critical operations require multiple signatures for enhanced security",
+      description:
+        "Critical operations require multiple signatures for enhanced security",
     },
     {
       icon: <Server className="w-6 h-6" />,
       title: "Secure Infrastructure",
-      description: "Built on enterprise-grade cloud infrastructure with 99.9% uptime",
+      description:
+        "Built on enterprise-grade cloud infrastructure with 99.9% uptime",
     },
     {
       icon: <Eye className="w-6 h-6" />,
@@ -43,19 +47,22 @@ export default function SecurityPage() {
     {
       icon: <Shield className="w-6 h-6" />,
       title: "Smart Contract Audits",
-      description: "Regular security audits by leading blockchain security firms",
+      description:
+        "Regular security audits by leading blockchain security firms",
     },
     {
       icon: <Users className="w-6 h-6" />,
       title: "Access Controls",
-      description: "Role-based access controls and principle of least privilege",
+      description:
+        "Role-based access controls and principle of least privilege",
     },
-  ]
+  ];
 
   const certifications = [
     {
       title: "SOC 2 Type II",
-      description: "Compliance with security, availability, and confidentiality standards",
+      description:
+        "Compliance with security, availability, and confidentiality standards",
       status: "Certified",
     },
     {
@@ -73,40 +80,46 @@ export default function SecurityPage() {
       description: "General Data Protection Regulation compliance",
       status: "Compliant",
     },
-  ]
+  ];
 
   const bestPractices = [
     {
       title: "Use Strong Passwords",
-      description: "Create unique, complex passwords and enable two-factor authentication",
+      description:
+        "Create unique, complex passwords and enable two-factor authentication",
       icon: <Key className="w-5 h-5" />,
     },
     {
       title: "Secure Your Wallet",
-      description: "Keep your seed phrase safe and never share your private keys",
+      description:
+        "Keep your seed phrase safe and never share your private keys",
       icon: <Lock className="w-5 h-5" />,
     },
     {
       title: "Verify Transactions",
-      description: "Always double-check recipient addresses before sending funds",
+      description:
+        "Always double-check recipient addresses before sending funds",
       icon: <CheckCircle className="w-5 h-5" />,
     },
     {
       title: "Stay Updated",
-      description: "Keep your wallet software and browser updated to the latest versions",
+      description:
+        "Keep your wallet software and browser updated to the latest versions",
       icon: <Zap className="w-5 h-5" />,
     },
     {
       title: "Monitor Your Account",
-      description: "Regularly check your transaction history and report suspicious activity",
+      description:
+        "Regularly check your transaction history and report suspicious activity",
       icon: <Eye className="w-5 h-5" />,
     },
     {
       title: "Use Secure Networks",
-      description: "Avoid public Wi-Fi for financial transactions and use VPN when necessary",
+      description:
+        "Avoid public Wi-Fi for financial transactions and use VPN when necessary",
       icon: <Globe className="w-5 h-5" />,
     },
-  ]
+  ];
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
@@ -114,15 +127,18 @@ export default function SecurityPage() {
       <header className="border-b bg-white/80 backdrop-blur-sm dark:bg-gray-900/80">
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <Send className="w-4 h-4 text-white" />
-            </div>
-            <span className="text-xl font-bold">StarkRemit</span>
+            <Link href="/">
+              <Image
+                src="/Logo and text-3.png"
+                alt="ChainRemit Logo"
+                width={150}
+                height={50}
+                className="w-[150px] h-[50px] object-fill"
+              />
+            </Link>
+            {/* <span className="text-xl font-bold">Security</span> */}
           </div>
           <div className="flex items-center space-x-4">
-            <Button variant="ghost" asChild>
-              <Link href="/">Home</Link>
-            </Button>
             <Button asChild>
               <Link href="/auth/signup">Get Started</Link>
             </Button>
@@ -144,41 +160,61 @@ export default function SecurityPage() {
             </span>
           </h1>
           <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-            We implement industry-leading security measures to protect your funds and personal information. Learn about
-            our comprehensive security framework and best practices.
+            We implement industry-leading security measures to protect your
+            funds and personal information. Learn about our comprehensive
+            security framework and best practices.
           </p>
         </div>
 
         {/* Security Overview */}
         <Card className="mb-16 border-0 shadow-xl bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20">
-          <CardContent className="p-12">
+          <CardContent className="p-4 md:p-12">
             <div className="grid lg:grid-cols-2 gap-12 items-center">
               <div>
                 <div className="flex items-center mb-6">
                   <Shield className="w-8 h-8 text-green-600 mr-3" />
-                  <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Bank-Grade Security</h2>
+                  <h2 className="text-3xl font-bold text-gray-900 dark:text-white">
+                    Bank-Grade Security
+                  </h2>
                 </div>
                 <p className="text-lg text-gray-600 dark:text-gray-300 mb-6">
-                  StarkRemit employs multiple layers of security to ensure your funds and data are protected at all
-                  times. Our security measures exceed industry standards and are continuously updated to address
-                  emerging threats.
+                  ChainRemit employs multiple layers of security to ensure your
+                  funds and data are protected at all times. Our security
+                  measures exceed industry standards and are continuously
+                  updated to address emerging threats.
                 </p>
                 <div className="grid grid-cols-2 gap-4">
                   <div className="text-center p-4 bg-white dark:bg-gray-800 rounded-lg">
-                    <div className="text-2xl font-bold text-green-600 mb-1">99.9%</div>
-                    <div className="text-sm text-gray-600 dark:text-gray-300">Uptime</div>
+                    <div className="text-2xl font-bold text-green-600 mb-1">
+                      99.9%
+                    </div>
+                    <div className="text-sm text-gray-600 dark:text-gray-300">
+                      Uptime
+                    </div>
                   </div>
                   <div className="text-center p-4 bg-white dark:bg-gray-800 rounded-lg">
-                    <div className="text-2xl font-bold text-blue-600 mb-1">24/7</div>
-                    <div className="text-sm text-gray-600 dark:text-gray-300">Monitoring</div>
+                    <div className="text-2xl font-bold text-blue-600 mb-1">
+                      24/7
+                    </div>
+                    <div className="text-sm text-gray-600 dark:text-gray-300">
+                      Monitoring
+                    </div>
                   </div>
                   <div className="text-center p-4 bg-white dark:bg-gray-800 rounded-lg">
-                    <div className="text-2xl font-bold text-purple-600 mb-1">256-bit</div>
-                    <div className="text-sm text-gray-600 dark:text-gray-300">Encryption</div>
+                    <div className="text-2xl font-bold text-purple-600 mb-1">
+                      256-bit
+                    </div>
+                    <div className="text-sm text-gray-600 dark:text-gray-300">
+                      Encryption
+                    </div>
                   </div>
                   <div className="text-center p-4 bg-white dark:bg-gray-800 rounded-lg">
-                    <div className="text-2xl font-bold text-orange-600 mb-1">Zero</div>
-                    <div className="text-sm text-gray-600 dark:text-gray-300">Breaches</div>
+                    <div className="text-2xl font-bold text-orange-600 mb-1">
+                      Zero
+                    </div>
+                    <div className="text-sm text-gray-600 dark:text-gray-300">
+                      Breaches
+                    </div>
                   </div>
                 </div>
               </div>
@@ -194,8 +230,12 @@ export default function SecurityPage() {
         {/* Security Features */}
         <div className="mb-16">
           <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Security Features</h2>
-            <p className="text-xl text-gray-600 dark:text-gray-300">Comprehensive protection at every level</p>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              Security Features
+            </h2>
+            <p className="text-xl text-gray-600 dark:text-gray-300">
+              Comprehensive protection at every level
+            </p>
           </div>
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
             {securityFeatures.map((feature, index) => (
@@ -205,7 +245,9 @@ export default function SecurityPage() {
                     {feature.icon}
                   </div>
                   <h3 className="font-semibold mb-2">{feature.title}</h3>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">{feature.description}</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    {feature.description}
+                  </p>
                 </CardContent>
               </Card>
             ))}
@@ -215,8 +257,12 @@ export default function SecurityPage() {
         {/* Compliance & Certifications */}
         <div className="mb-16">
           <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Compliance & Certifications</h2>
-            <p className="text-xl text-gray-600 dark:text-gray-300">Meeting the highest industry standards</p>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              Compliance & Certifications
+            </h2>
+            <p className="text-xl text-gray-600 dark:text-gray-300">
+              Meeting the highest industry standards
+            </p>
           </div>
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
             {certifications.map((cert, index) => (
@@ -226,9 +272,15 @@ export default function SecurityPage() {
                     <FileText className="w-8 h-8 text-white" />
                   </div>
                   <h3 className="font-semibold mb-2">{cert.title}</h3>
-                  <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">{cert.description}</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+                    {cert.description}
+                  </p>
                   <Badge
-                    variant={cert.status === "Certified" || cert.status === "Compliant" ? "default" : "secondary"}
+                    variant={
+                      cert.status === "Certified" || cert.status === "Compliant"
+                        ? "default"
+                        : "secondary"
+                    }
                     className={
                       cert.status === "Certified" || cert.status === "Compliant"
                         ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
@@ -246,8 +298,12 @@ export default function SecurityPage() {
         {/* Security Best Practices */}
         <div className="mb-16">
           <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Security Best Practices</h2>
-            <p className="text-xl text-gray-600 dark:text-gray-300">How you can help keep your account secure</p>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              Security Best Practices
+            </h2>
+            <p className="text-xl text-gray-600 dark:text-gray-300">
+              How you can help keep your account secure
+            </p>
           </div>
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
             {bestPractices.map((practice, index) => (
@@ -259,7 +315,9 @@ export default function SecurityPage() {
                     </div>
                     <div>
                       <h3 className="font-semibold mb-2">{practice.title}</h3>
-                      <p className="text-sm text-gray-600 dark:text-gray-300">{practice.description}</p>
+                      <p className="text-sm text-gray-600 dark:text-gray-300">
+                        {practice.description}
+                      </p>
                     </div>
                   </div>
                 </CardContent>
@@ -278,12 +336,15 @@ export default function SecurityPage() {
                   Security Incident Response
                 </h2>
                 <p className="text-orange-800 dark:text-orange-200 mb-4">
-                  If you notice any suspicious activity on your account or believe your security has been compromised,
-                  please contact us immediately.
+                  If you notice any suspicious activity on your account or
+                  believe your security has been compromised, please contact us
+                  immediately.
                 </p>
                 <div className="grid md:grid-cols-3 gap-4">
                   <div>
-                    <h4 className="font-semibold text-orange-900 dark:text-orange-100 mb-2">Immediate Actions</h4>
+                    <h4 className="font-semibold text-orange-900 dark:text-orange-100 mb-2">
+                      Immediate Actions
+                    </h4>
                     <ul className="text-sm text-orange-800 dark:text-orange-200 space-y-1">
                       <li>• Change your password</li>
                       <li>• Enable 2FA if not already active</li>
@@ -291,7 +352,9 @@ export default function SecurityPage() {
                     </ul>
                   </div>
                   <div>
-                    <h4 className="font-semibold text-orange-900 dark:text-orange-100 mb-2">Contact Us</h4>
+                    <h4 className="font-semibold text-orange-900 dark:text-orange-100 mb-2">
+                      Contact Us
+                    </h4>
                     <ul className="text-sm text-orange-800 dark:text-orange-200 space-y-1">
                       <li>• Email: security@starkremit.com</li>
                       <li>• Emergency: +1 (555) 911-HELP</li>
@@ -299,7 +362,9 @@ export default function SecurityPage() {
                     </ul>
                   </div>
                   <div>
-                    <h4 className="font-semibold text-orange-900 dark:text-orange-100 mb-2">Response Time</h4>
+                    <h4 className="font-semibold text-orange-900 dark:text-orange-100 mb-2">
+                      Response Time
+                    </h4>
                     <ul className="text-sm text-orange-800 dark:text-orange-200 space-y-1">
                       <li>• Critical: Within 1 hour</li>
                       <li>• High: Within 4 hours</li>
@@ -316,13 +381,22 @@ export default function SecurityPage() {
         <Card className="bg-gradient-to-r from-blue-600 to-purple-600 text-white border-0">
           <CardContent className="p-8 text-center">
             <Shield className="w-12 h-12 mx-auto mb-4 opacity-90" />
-            <h2 className="text-2xl font-bold mb-4">Security Questions or Concerns?</h2>
+            <h2 className="text-2xl font-bold mb-4">
+              Security Questions or Concerns?
+            </h2>
             <p className="mb-6 opacity-90">
-              Our security team is here to help. Report vulnerabilities, ask questions, or get security guidance.
+              Our security team is here to help. Report vulnerabilities, ask
+              questions, or get security guidance.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button asChild size="lg" className="bg-white text-blue-600 hover:bg-gray-100">
-                <Link href="mailto:security@starkremit.com">Contact Security Team</Link>
+              <Button
+                asChild
+                size="lg"
+                className="bg-white text-blue-600 hover:bg-gray-100"
+              >
+                <Link href="mailto:security@starkremit.com">
+                  Contact Security Team
+                </Link>
               </Button>
               <Button
                 asChild
@@ -337,5 +411,5 @@ export default function SecurityPage() {
         </Card>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app/terms/components/ContactSection.tsx b/src/app/terms-of-service/components/ContactSection.tsx
similarity index 100%
rename from src/app/terms/components/ContactSection.tsx
rename to src/app/terms-of-service/components/ContactSection.tsx
diff --git a/src/app/terms/components/ImportantNotice.tsx b/src/app/terms-of-service/components/ImportantNotice.tsx
similarity index 100%
rename from src/app/terms/components/ImportantNotice.tsx
rename to src/app/terms-of-service/components/ImportantNotice.tsx
diff --git a/src/app/terms/components/TableOfContents.tsx b/src/app/terms-of-service/components/TableOfContents.tsx
similarity index 100%
rename from src/app/terms/components/TableOfContents.tsx
rename to src/app/terms-of-service/components/TableOfContents.tsx
diff --git a/src/app/terms/components/TermsSection.tsx b/src/app/terms-of-service/components/TermsSection.tsx
similarity index 100%
rename from src/app/terms/components/TermsSection.tsx
rename to src/app/terms-of-service/components/TermsSection.tsx
diff --git a/src/app/terms/page.tsx b/src/app/terms-of-service/page.tsx
similarity index 94%
rename from src/app/terms/page.tsx
rename to src/app/terms-of-service/page.tsx
index 774dfcd..3ed1200 100644
--- a/src/app/terms/page.tsx
+++ b/src/app/terms-of-service/page.tsx
@@ -15,6 +15,7 @@ import TermsSection from "./components/TermsSection";
 import TableOfContents from "./components/TableOfContents";
 import ImportantNotice from "./components/ImportantNotice";
 import ContactSection from "./components/ContactSection";
+import Image from "next/image";
 
 export default function TermsPage() {
   const sections = [
@@ -148,10 +149,18 @@ export default function TermsPage() {
       <header className="border-b bg-white/80 backdrop-blur-sm dark:bg-gray-900/80">
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <Send className="w-4 h-4 text-white" />
+            <div className="flex items-center space-x-2">
+              <Link href="/">
+                <Image
+                  src="/Logo and text-3.png"
+                  alt="ChainRemit Logo"
+                  width={150}
+                  height={50}
+                  className="w-[150px] h-[50px] object-fill"
+                />
+              </Link>
             </div>
-            <span className="text-xl font-bold">StarkRemit</span>
+            {/* <span className="text-xl font-bold">StarkRemit</span> */}
           </div>
           <div className="flex items-center space-x-4">
             <Button variant="ghost" asChild>
diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx
index aab54b0..161bbeb 100644
--- a/src/components/contact/ContactForm.tsx
+++ b/src/components/contact/ContactForm.tsx
@@ -47,7 +47,7 @@ const ContactForm = () => {
   };
 
   return (
-    <Card className="bg-white/80 backdrop-blur-sm dark:bg-black border-1 border-white dark:border-white">
+    <Card className="border-white dark:border-slate-600 shadow-2xl">
       <CardHeader>
         <CardTitle className="text-2xl">Send us a Message</CardTitle>
         <p className="text-gray-600 dark:text-gray-300">
@@ -76,7 +76,7 @@ const ContactForm = () => {
                 type="email"
                 value={formData.email}
                 onChange={(e) => updateField("email", e.target.value)}
-                placeholder="your@email.com"
+                placeholder="your gmail"
                 className="mt-1"
                 disabled={loading}
                 required
diff --git a/src/components/contact/ContactMethods.tsx b/src/components/contact/ContactMethods.tsx
index a8d1dc6..a904dfb 100644
--- a/src/components/contact/ContactMethods.tsx
+++ b/src/components/contact/ContactMethods.tsx
@@ -22,7 +22,7 @@ const ContactMethods = () => {
       description: "Chat with our team",
       contact: "Available 24/7",
       action: "Start Chat",
-      href: "#", 
+      href: "#",
       bgColor: "bg-green-600",
     },
     {
@@ -37,7 +37,7 @@ const ContactMethods = () => {
   ];
 
   return (
-    <Card className="bg-white/80 backdrop-blur-sm dark:bg-black border-1 border-white dark:border-white">
+    <Card className="border-1 border-white dark:border-slate-600">
       <CardHeader>
         <CardTitle>Contact Methods</CardTitle>
         <p className="text-sm text-gray-600 dark:text-gray-300">
@@ -48,7 +48,7 @@ const ContactMethods = () => {
         {contactMethods.map((method, idx) => (
           <div
             key={idx}
-            className="border border-gray-200 dark:border-white rounded-lg p-4"
+            className="border border-gray-200 dark:border-slate-600 rounded-lg p-4"
           >
             <div className="flex items-start space-x-3">
               <div
diff --git a/src/components/contact/OfficeLocations.tsx b/src/components/contact/OfficeLocations.tsx
index c0c2c82..35404e2 100644
--- a/src/components/contact/OfficeLocations.tsx
+++ b/src/components/contact/OfficeLocations.tsx
@@ -7,10 +7,10 @@ const OfficeLocations = () => {
   // Not using a map yet, just static data for now
   const offices = [
     {
-      city: "San Francisco",
+      city: "Lagos",
       address: "123 Market Street, Suite 400",
-      country: "United States",
-      timezone: "PST",
+      country: "Nigeria",
+      timezone: "WAT",
     },
     {
       city: "London",
@@ -41,7 +41,7 @@ const OfficeLocations = () => {
         {offices.map((office, idx) => (
           <Card
             key={idx}
-            className="hover:shadow-lg transition-shadow dark:bg-black border-1 border-white dark:border-white"
+            className="hover:shadow-lg transition-shadow border-1 border-white dark:border-slate-600"
           >
             <CardContent className="p-6">
               <div className="flex items-center space-x-2 mb-4">
diff --git a/src/components/contact/QuickHelp.tsx b/src/components/contact/QuickHelp.tsx
index f918bb7..4f0c308 100644
--- a/src/components/contact/QuickHelp.tsx
+++ b/src/components/contact/QuickHelp.tsx
@@ -44,7 +44,7 @@ const QuickHelp = () => {
         {helpCategories.map((category, idx) => (
           <Card
             key={idx}
-            className="hover:shadow-lg transition-shadow dark:bg-black border-1 border-white dark:border-white"
+            className="hover:shadow-lg transition-shado border-1 border-white dark:border-slate-600"
           >
             <CardContent className="p-6 text-center">
               <div
diff --git a/src/components/contact/SupportHours.tsx b/src/components/contact/SupportHours.tsx
index 03ad9b6..26636cd 100644
--- a/src/components/contact/SupportHours.tsx
+++ b/src/components/contact/SupportHours.tsx
@@ -11,7 +11,7 @@ const SupportHours = () => {
   ];
 
   return (
-    <Card className="bg-white/80 backdrop-blur-sm dark:bg-black border-1 border-white dark:border-white">
+    <Card className="border-1 border-white dark:border-slate-600">
       <CardHeader>
         <div className="flex items-center space-x-2">
           <Clock className="w-5 h-5" />
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 6183f08..991f716 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -6,7 +6,7 @@ export function Footer() {
   return (
     <footer className="bg-slate-200/95 dark:bg-slate-950/95 text-gray-950 dark:text-white py-16">
       <div className="container mx-auto px-4">
-        <div className="grid md:grid-cols-4 gap-8 mb-8">
+        <div className="border border-gray-300 dark:border-gray-700 grid grid-cols-2 grid-rows-2 md:grid-cols-4 md:grid-rows-1 gap-5 md:gap-6 mb-8 p-6 md:p-10 rounded-lg">
           <div>
             <h3 className="text-lg font-semibold mb-4">Product</h3>
             <ul className="space-y-2">
@@ -88,15 +88,15 @@ export function Footer() {
             </ul>
           </div>
         </div>
-        <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
+        <div className="bord border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
           <div className="flex items-center space-x-4 mb-4 md:mb-0">
             <Link href="/" className="flex items-center">
               <Image
                 src="/Logo and text-3.png"
                 alt="ChainRemit Logo"
-                width={150}
+                width={120}
                 height={50}
-                className="w-[150px] h-[50px] object-fill"
+                className="w-[120px] h-[50px] object-fill"
               />
             </Link>
             <span className="text-gray-500">×</span>
@@ -105,10 +105,18 @@ export function Footer() {
           <div className="flex items-center space-x-4">
             <select className="bg-gray-800 border border-gray-700 rounded px-3 py-1 text-sm">
               <option>English</option>
+              <option>Hausa</option>
               <option>Español</option>
               <option>Français</option>
+              <option>Deutsch</option>
+              <option>中文</option>
+              <option>Português</option>
+              <option>Русский</option>
+              <option>Türkçe</option>
+              <option>Polski</option>
+              <option>Italiano</option>
             </select>
-            <ThemeToggle />
+            {/* <ThemeToggle /> */}
           </div>
         </div>
       </div>
diff --git a/src/components/profile/export-section.tsx b/src/components/profile/export-section.tsx
index 6e8ccba..f92fc20 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 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="bg-gray-50 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" />
@@ -360,7 +360,7 @@ Detailed History:
       </Card>
 
       {/* Export History */}
-      <Card className="bg-gray-50 bg-card  border-gray-200 dark:border-gray-800">
+      <Card className="bg-gray-50 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" />