diff --git a/public/banner.png b/public/banner.png
new file mode 100644
index 0000000..60c0cbf
Binary files /dev/null and b/public/banner.png differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..866710f
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/app/(main)/explore/_components/agent-list.tsx b/src/app/(main)/explore/_components/agent-list.tsx
index ef10889..68ca35a 100644
--- a/src/app/(main)/explore/_components/agent-list.tsx
+++ b/src/app/(main)/explore/_components/agent-list.tsx
@@ -66,16 +66,12 @@ export function AgentList() {
 
   return (
     <>
-      <section className="my-8">
+      <section className="pt-8 pb-10 min-h-[50vh] bg-white/50 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur-lg">
         <div className="layout">
-          <h1 className="text-3xl font-bold text-foreground sm:text-4xl">
+          <h1 className="mb-4 text-3xl font-bold text-foreground sm:text-4xl">
             Agents
           </h1>
-        </div>
-      </section>
-      <section className="pt-4 pb-10 min-h-[50vh] bg-white/50 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur-lg">
-        <div className="layout">
-          <div className="flex flex-col sm:flex-row justify-between">
+          <div className="mb-8 flex flex-col sm:flex-row justify-between">
             <div className="relative">
               <Input
                 aria-label="search"
@@ -94,7 +90,7 @@ export function AgentList() {
               <Search className="absolute w-4 h-4 left-2 top-1/2 -translate-y-1/2 text-gray-300" />
             </div>
           </div>
-          <ul className="grid grid-cols-1 gap-8 py-10 sm:grid-cols-2 lg:grid-cols-3">
+          <ul className="grid grid-cols-1 gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
             {isLoading &&
               [...Array(6)].map((_, idx) => (
                 <li key={idx}>
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 453d278..36c7444 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 112dfd6..c23e774 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,19 +10,19 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 208 100% 15%;
+    --primary: 9 60% 32%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 349 100% 55.5%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
-    --accent-foreground: 208, 100%, 15%;
+    --accent-foreground: 22 68% 91%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 9 60% 32%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -38,14 +38,14 @@
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 208 100% 15%;
+    --primary: 22 68% 91%;
     --primary-foreground: 240 5.9% 10%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 349 100% 55.5%;
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
-    --accent-foreground: 208 100% 15%;
+    --accent-foreground: 9 60% 32%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
index f87a987..ac8fa85 100644
--- a/src/components/sections/footer.tsx
+++ b/src/components/sections/footer.tsx
@@ -1,6 +1,7 @@
 import { Icons } from "@/components/icons";
 import { siteConfig } from "@/lib/config";
 import { ChevronRight } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 
 export default function Footer() {
@@ -12,7 +13,14 @@ export default function Footer() {
           title={siteConfig.name}
           className="relative mr-6 flex items-center space-x-2"
         >
-          <Icons.logo className="w-auto h-[40px]" />
+          <Image
+            src="/logo.png"
+            height={40}
+            width={40}
+            alt="logo"
+            className="rounded-md shadow"
+          />
+          {/* <Icons.logo className="w-auto h-[40px]" /> */}
           <span className="font-bold text-xl">{siteConfig.name}</span>
         </a>
 
diff --git a/src/components/sections/header.tsx b/src/components/sections/header.tsx
index 1295db3..5b10663 100644
--- a/src/components/sections/header.tsx
+++ b/src/components/sections/header.tsx
@@ -6,6 +6,7 @@ import Menu from "@/components/menu";
 import { buttonVariants } from "@/components/ui/button";
 import { siteConfig } from "@/lib/config";
 import { cn } from "@/lib/utils";
+import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
@@ -30,9 +31,7 @@ export default function Header() {
 
   return (
     <header
-      className={
-        "relative sticky top-0 z-50 py-2 bg-background/60 backdrop-blur"
-      }
+      className={" sticky top-0 z-50 py-2 bg-background/60 backdrop-blur"}
     >
       <div className="flex justify-between items-center container">
         <Link
@@ -40,7 +39,14 @@ export default function Header() {
           title="brand-logo"
           className="relative mr-6 flex items-center space-x-2"
         >
-          <Icons.logoCrystal className="w-auto h-[28px]" />
+          <Image
+            src="/logo.png"
+            height={36}
+            width={36}
+            alt="logo"
+            className="rounded-md shadow"
+          />
+          {/* <Icons.logoCrystal className="w-auto h-[28px]" /> */}
           <span className="font-bold text-xl">{siteConfig.name}</span>
         </Link>
 
@@ -51,10 +57,7 @@ export default function Header() {
             </nav> */}
 
             <div className="gap-2 flex">
-              <Link
-                href="/"
-                className={buttonVariants({ variant: "outline" })}
-              >
+              <Link href="/" className={buttonVariants({ variant: "default" })}>
                 Connect Wallet
               </Link>
               {/* <Link
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8bbfc7f..9dd106f 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background hover:bg-accent hover:text-primary",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",