Changed logo

packages/nextjs/app/not-found/NotFound.tsx

@@ -4,7 +4,7 @@ import { NextPage } from "next";
 
 export const NotFound: NextPage = () => {
   return (
-    <div className="flex flex-col justify-center items-center min-h-screen p-2">
+    <div className="flex flex-col bg-blue-800 justify-center items-center min-h-screen p-2">
       {/* Not Found Section */}
       <div className="relative text-red-500 flex flex-col justify-center items-center bg-base-100 p-6 rounded-lg shadow-md w-full">
         <p className="font-bold text-2xl">Page under development</p>

packages/nextjs/components/Header.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useRef, useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { SwitchTheme } from "./SwitchTheme";
@@ -82,11 +83,18 @@ export const Header = () => {
       </div>
 
       <div className="navbar-center flex-1 flex justify-center items-center">
-        <Link href="/" passHref>
-          <div className="rounded-full bg-blue-900">
-            <span className={`text-xl font-bold hover:text-blue-600 ${pathname === "/" ? "" : ""}`}>🐰</span>
-          </div>
-        </Link>
+        <div className="w-7 h-7 relative">
+          <Link href="/" passHref>
+            <Image src="/logo.png" alt="Logo" width={50} height={50} style={{ objectFit: "contain" }} />
+          </Link>
+          {/* <Image
+            src="/usdc-logo.png" // Ensure you use the correct path for Next.js
+            alt="USDC Logo"
+            width={28} // 7 * 4px = 28px
+            height={28} // 7 * 4px = 28px
+            style={{ objectFit: "contain" }} // Ensures the image behaves like 'object-contain'
+          /> */}
+        </div>
       </div>
 
       <div className="navbar-end mr-4 relative" ref={menuRef}>