diff --git a/README.md b/README.md
index 084ae6d..5cc7da1 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # DISCLAIMER
 
-### We have ended up rewriting the commit history due to a faulty commit, let's take this as a learning to double check our triple checks before making a PR, just to get a PR merged you don't have to rush, you have ample time to work on an issue once assigned, depending on the magnitude of the issue, anyways due to the same you have to take a fresh fork if you are a recurring contributor and if you are a new contributor, do keep this in mind and start contributing, you are good to go 
+### We have ended up rewriting the commit history due to a faulty commit, let's take this as a learning to double check our triple checks before making a PR, just to get a PR merged you don't have to rush, you have ample time to work on an issue once assigned, depending on the magnitude of the issue, anyways due to the same you have to take a fresh fork if you are a recurring contributor and if you are a new contributor, do keep this in mind and start contributing, you are good to go
 
 # Project Name: Tiplink
 
@@ -45,14 +45,14 @@ Using Docker:
    ```bash
    cd tiplink
    ```
-3. Create a .env file in the root folder of your project. Update it following the convention of the .env.example file. 
+3. Create a .env file in the root folder of your project. Update it following the convention of the .env.example file.
    Here's an example:
    ```bash
     CLIENT_SECRET = '' #Get it from Google developers console
     CLIENT_ID = '' #Get it from Google developers console
-    NEXTAUTH_SECRET = '' 
+    NEXTAUTH_SECRET = ''
     NEXTAUTH_URL = '' #Your frontend base URL
-    #DATABASE_URL = 'postgresql://postgres:password@localhost:5432/mydatabase'   
+    #DATABASE_URL = 'postgresql://postgres:password@localhost:5432/mydatabase'
     DATABASE_URL = 'postgresql://postgres:password@postgres:5432/mydatabase'  #Use this for setting up docker
     NEXT_PUBLIC_SOLANA_RPC = '' #Your Custom Solana RPC URL
    ```
@@ -72,11 +72,12 @@ Using Docker:
    ```bash
    docker compose up
    ```
-Without Docker
+   Without Docker
 
 ### Without Docker
 
 1. clone the repository:
+
    ```bash
    git clone https://github.com/code100x/tiplink.git
    ```
@@ -122,12 +123,14 @@ Contributions are welcome! If you'd like to contribute to the Tiplink project, p
 
 ## Resource Reference Section for various pieces of the project
 
-### For reading up on AWS KMS: 
+### For reading up on AWS KMS:
+
 - [AWS KMS Docs](https://docs.aws.amazon.com/encryption-sdk/latest/developer-guide/js-examples.html)
 - [Data Encryption on AWS](https://enlear.academy/data-encryption-on-aws-8d6be6033351)
 - [AWS Encryption SDK Guide](https://enlear.academy/aws-encryption-sdk-d38bfae40e9f)
 
-### For reading up on GCP KMS: 
+### For reading up on GCP KMS:
+
 - [GCP KMS Docs](https://cloud.google.com/nodejs/docs/reference/kms/latest)
 - [Video Guide for GCP on Google Cloud Tech](https://www.youtube.com/watch?v=WKZC93y-aWI)
 
@@ -138,9 +141,9 @@ Please take an updated pull from the dev branch, and request branches for furthe
 - **main** - Stable branch
 - **dev** - Branch for all the developer changes (Where your code will reside before moving to production)
 - **dev-backend**- Branch for all developer changes in the backend
-- **dev-backend/*** - Branch for changes in specific features within the backend 
+- **dev-backend/\*** - Branch for changes in specific features within the backend
 - **dev-frontend** - Branch for all developer changes in the frontend
-- **dev-frontend/*** - Branch for changes in specific features within the frontend
+- **dev-frontend/\*** - Branch for changes in specific features within the frontend
 
 ## License
 
diff --git a/package-lock.json b/package-lock.json
index d80e3e5..8f648b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@prisma/client": "^5.17.0",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@solana/wallet-adapter-react": "^0.15.35",
@@ -4915,6 +4916,15 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
diff --git a/package.json b/package.json
index b48e2a2..05ae25e 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@prisma/client": "^5.17.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@solana/wallet-adapter-react": "^0.15.35",
diff --git a/public/grid3.avif b/public/grid3.avif
new file mode 100644
index 0000000..95ad6c6
Binary files /dev/null and b/public/grid3.avif differ
diff --git a/public/grid4.avif b/public/grid4.avif
new file mode 100644
index 0000000..445007f
Binary files /dev/null and b/public/grid4.avif differ
diff --git a/public/grid5.avif b/public/grid5.avif
new file mode 100644
index 0000000..404db13
Binary files /dev/null and b/public/grid5.avif differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0a6d533..2208fe1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,16 @@
 import { Footer } from '@/components/Appbar/Footer'
 import Home from '@/components/Home/Home'
 import { ScrollToTopButton } from '@/components/ui/scroll-to-top-button'
+import WaveBackground from '@/components/WaveBackground'
 
 export default function Page() {
   return (
     <>
-      <Home />
-      <Footer />
-      <ScrollToTopButton />
+      <div className="w-full bg-[#000000]">
+        <Home />
+        <Footer />
+        <ScrollToTopButton />
+      </div>
     </>
   )
 }
diff --git a/src/app/wallet/page.tsx b/src/app/wallet/page.tsx
index e5b229a..38b6a9d 100644
--- a/src/app/wallet/page.tsx
+++ b/src/app/wallet/page.tsx
@@ -18,13 +18,12 @@ const Wallet = async () => {
       },
     })
     if (user) {
-      wallet = user?.publicKey ? user.publicKey :  await createWallet(user) 
+      wallet = user?.publicKey ? user.publicKey : await createWallet(user)
       balance = await fetchUserBalance(wallet)
       console.log(balance)
     }
   }
 
-
   return (
     <div className="h-full flex flex-col items-center">
       <TopBar />
diff --git a/src/components/Appbar/AppBarSkeleton.tsx b/src/components/Appbar/AppBarSkeleton.tsx
index e47dd76..91a4f23 100644
--- a/src/components/Appbar/AppBarSkeleton.tsx
+++ b/src/components/Appbar/AppBarSkeleton.tsx
@@ -1,27 +1,24 @@
-const  AppBarSkeleton = () => {
+const AppBarSkeleton = () => {
   return (
-    <header className="animate-pulse w-screen py-4 border-b md:border-none fixed top-0 left-0 right-0 bg-white md:bg-white/0 z-50 ">
-          <div className="container pl-32 px-4 ">
-            <div className="flex justify-between items-center md:border md:p-2.5 rounded-xl max-w-2xl lg:max-w-4xl mx-auto md:bg-white/90 md:backdrop:blur-sm">
-              <div>
-                <div className="h-10 w-10 rounded-lg inline-flex justify-center items-center bg-gray-200">
-              </div>
-              </div>
-              <div className="hidden md:block">
-                <nav className="flex gap-8 rounded-md">
-                    <div className = 'rounded-md bg-gray-300 w-20 h-5'></div>
-                    <div className = 'rounded-md bg-gray-300 w-20 h-5'></div>
-                    <div className = 'rounded-md bg-gray-300 w-20 h-5'></div>
-                    <div className = 'rounded-md bg-gray-300 w-20 h-5'></div>
-                </nav>
-              </div>
-              <div className = 'rounded-md h-8 w-20 bg-gray-200'>
-              </div>
-            </div>
+    <header className="animate-pulse w-screen py-4 border-b md:border-none fixed top-0 left-0 right-0 bg-[#000000] md:bg-white/0 z-50 ">
+      <div className="container pl-32 px-4 ">
+        <div className="flex justify-between items-center md:border md:p-2.5 rounded-xl max-w-2xl lg:max-w-4xl mx-auto md:bg-gray-900 md:backdrop:blur-sm">
+          <div>
+            <div className="h-10 w-10 rounded-lg inline-flex justify-center items-center bg-gray-200"></div>
           </div>
-        </header>
+          <div className="hidden md:block">
+            <nav className="flex gap-8 rounded-md">
+              <div className="rounded-md bg-gray-900 w-20 h-5"></div>
+              <div className="rounded-md bg-gray-900 w-20 h-5"></div>
+              <div className="rounded-md bg-gray-900 w-20 h-5"></div>
+              <div className="rounded-md bg-gray-900 w-20 h-5"></div>
+            </nav>
+          </div>
+          <div className="rounded-md h-8 w-20 bg-gray-200"></div>
+        </div>
+      </div>
+    </header>
   )
 }
 
-
-export default AppBarSkeleton;
\ No newline at end of file
+export default AppBarSkeleton
diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
index 694bc16..cac4d52 100644
--- a/src/components/Appbar/Appbar.tsx
+++ b/src/components/Appbar/Appbar.tsx
@@ -12,130 +12,121 @@ import ProfileDropDown from '../common/ProfileDropDown'
 import { useSession } from 'next-auth/react'
 
 const Appbar = () => {
-  const { data,status }  = useSession();
-  const router = useRouter();
+  const { data, status } = useSession()
+  const router = useRouter()
   const [isMounted, setIsMounted] = useState(false)
   const { connected } = useWallet()
-  const [opacity, setOpacity] = useState(1);
+  const [opacity, setOpacity] = useState(1)
 
   useEffect(() => {
     const handleScroll = () => {
-      const scrollPosition = window.scrollY;
-      const windowHeight = window.innerHeight;
+      const scrollPosition = window.scrollY
+      const windowHeight = window.innerHeight
 
-      const fadeStart = 0;
-      const fadeEnd = windowHeight * 0.4;
+      const fadeStart = 0
+      const fadeEnd = windowHeight * 0.4
 
       if (scrollPosition <= fadeStart) {
-        setOpacity(1);
+        setOpacity(1)
       } else if (scrollPosition >= fadeEnd) {
-        setOpacity(0);
+        setOpacity(0)
       } else {
-        setOpacity(1 - (scrollPosition - fadeStart) / (fadeEnd - fadeStart));
+        setOpacity(1 - (scrollPosition - fadeStart) / (fadeEnd - fadeStart))
       }
-    };
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
 
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-  
   return (
-    <header className="w-screen py-4 border-b md:border-none fixed top-0 left-0 right-0 bg-white md:bg-white/0 z-50 "
-    style={{ opacity: opacity }}
+    <header
+      className="w-screen py-4 border-b md:border-none fixed flex top-0 left-0 right-0 bg-[#000000] z-50"
+      style={{ opacity: opacity }}
     >
-      <div className="container pl-32 px-4 ">
-        <div className="flex justify-between items-center md:border md:p-2.5 rounded-xl max-w-2xl lg:max-w-4xl mx-auto md:bg-white/90 md:backdrop:blur-sm">
-          <div>
-            <div className="border h-10 w-10 rounded-lg inline-flex justify-center items-center">
-              <Logo className="h-8 w-8" fill="#000000" />
-            </div>
-          </div>
-          <div className="hidden md:block">
-            <nav className="flex gap-8 text-sm">
-              <Link
-                className="text-black/70 hover:text-black transition"
-                href="#"
-              >
-                Products
-              </Link>
-              <Link
-                className="text-black/70 hover:text-black transition"
-                href="#"
-              >
-                API & Docs
-              </Link>
-              <Link
-                className="text-black/70 hover:text-black transition"
-                href="#"
-              >
-                FAQ
-              </Link>
-              <Link
-                className="text-black/70 hover:text-black transition"
-                href="#"
-              >
-                Company
-              </Link>
-              <Link
-                className="hidden lg:block text-black/70 hover:text-black transition"
-                href="#"
-              >
-                Blogs
-              </Link>
-            </nav>
+      <div className="container flex justify-between items-center px-4">
+        {/* Logo on the left */}
+        <div className="flex items-center">
+          <div className="h-10 w-10 bg-white rounded-lg inline-flex justify-center items-center">
+            <Logo className="h-8 w-8" fill="#000000" />
           </div>
-          <div className="flex gap-4 items-center">
-            {/*{data && data?.user ? (*/}
-            {/*  <Button size="sm" variant="default">*/}
-            {/*    Sign out*/}
-            {/*  </Button>*/}
-            {/*) : (*/}
-            {/*  <>*/}
-            {/*    <Button variant="outline">*/}
-            {/*      <FaWallet className="hover:text-black/80" />*/}
-            {/*    </Button>*/}
-            {/*    <LoginWithGoogleButton />*/}
-            {/*  </>*/}
-            {/*)}*/}
-            {status === "authenticated" && data && (
-              <button
-                onClick={() => {
-                  router.push('/wallet')
-                }}
+        </div>
+
+        {/* Centered navigation links */}
+        <div className="flex-grow hidden md:block">
+          <nav className="flex justify-center gap-8 text-sm">
+            <Link
+              className="text-[#848484] hover:text-white transition"
+              href="#"
+            >
+              Products
+            </Link>
+            <Link
+              className="text-[#848484] hover:text-white transition"
+              href="#"
+            >
+              API & Docs
+            </Link>
+            <Link
+              className="text-[#848484] hover:text-white transition"
+              href="#"
+            >
+              FAQ
+            </Link>
+            <Link
+              className="text-[#848484] hover:text-white transition"
+              href="#"
+            >
+              Company
+            </Link>
+            <Link
+              className="hidden lg:block text-[#848484] hover:text-white transition"
+              href="#"
+            >
+              Blogs
+            </Link>
+          </nav>
+        </div>
+
+        {/* Login button on the right */}
+        <div className="flex items-center gap-4">
+          {status === 'authenticated' && data ? (
+            <button
+              onClick={() => {
+                router.push('/wallet')
+              }}
+            >
+              <svg
+                className="size-10 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                width="128"
+                height="128"
+                viewBox="0 0 24 24"
               >
-                <svg
-                  className="size-10 text-black"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="128"
-                  height="128"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M4 3a3 3 0 0 0-3 3v13a3 3 0 0 0 3 3h13a3 3 0 0 0 3-3v-1.77c.63-.57 1-1.38 1-2.23v-5c0-.85-.37-1.66-1-2.23V6a3 3 0 0 0-3-3zm0 1h13a2 2 0 0 1 2 2v1.17c-.32-.11-.66-.17-1-.17h-6a3 3 0 0 0-3 3v5a3 3 0 0 0 3 3h6c.34 0 .68-.06 1-.17V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m8 4h6a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m2.5 2a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5m0 1a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5"
-                  />
-                </svg>
-              </button>
-            )}
-            {data && data?.user ? <ProfileDropDown /> : (
-              <>
-                {isMounted && (
-                  <WalletMultiButton
-                    style={{
-                      backgroundColor: 'black',
-                      height: '40px',
-                      borderRadius: '8px',
-                    }}
-                    endIcon={<FaWallet />}
-                  />
-                )}
-                {status === 'unauthenticated' && <LoginWithGoogleButton />}
-              </>
-            )}
-            <span className="md:hidden">
-              <Menu />
-            </span>
-          </div>
+                <path
+                  fill="currentColor"
+                  d="M4 3a3 3 0 0 0-3 3v13a3 3 0 0 0 3 3h13a3 3 0 0 0 3-3v-1.77c.63-.57 1-1.38 1-2.23v-5c0-.85-.37-1.66-1-2.23V6a3 3 0 0 0-3-3zm0 1h13a2 2 0 0 1 2 2v1.17c-.32-.11-.66-.17-1-.17h-6a3 3 0 0 0-3 3v5a3 3 0 0 0 3 3h6c.34 0 .68-.06 1-.17V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m8 4h6a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m2.5 2a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5m0 1a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5"
+                />
+              </svg>
+            </button>
+          ) : (
+            <>
+              {isMounted && (
+                <WalletMultiButton
+                  style={{
+                    backgroundColor: 'black',
+                    height: '40px',
+                    borderRadius: '8px',
+                  }}
+                  endIcon={<FaWallet />}
+                />
+              )}
+              {status === 'unauthenticated' && <LoginWithGoogleButton />}
+            </>
+          )}
+          <span className="md:hidden">
+            <Menu />
+          </span>
         </div>
       </div>
     </header>
diff --git a/src/components/Appbar/Footer.tsx b/src/components/Appbar/Footer.tsx
index 137a8ce..94b4ef6 100644
--- a/src/components/Appbar/Footer.tsx
+++ b/src/components/Appbar/Footer.tsx
@@ -1,11 +1,17 @@
-import { FaDiscord, FaDribbble, FaFacebook, FaGithub, FaXTwitter } from 'react-icons/fa6'
+import {
+  FaDiscord,
+  FaDribbble,
+  FaFacebook,
+  FaGithub,
+  FaXTwitter,
+} from 'react-icons/fa6'
 import Logo from '../icons/Logo'
 import Link from 'next/link'
 
 export function Footer() {
   return (
-    <footer className="bg-black text-white p-10">
-      <div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
+    <footer className="bg-[#131315] text-white p-10">
+      <div className="mx-auto w-full max-w-screen-xl p-4 py-6">
         <div className="md:flex md:justify-between">
           <div className="mb-6 md:mb-0">
             <div className="bg-black border border-white/25 rounded-md shadow-inner shadow-white/55 h-10 w-10 flex items-center justify-center">
@@ -14,9 +20,7 @@ export function Footer() {
           </div>
           <div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
             <div>
-              <h2 className="mb-6 font-semibold text-zinc-400">
-                Resources
-              </h2>
+              <h2 className="mb-6 font-semibold text-zinc-400">Resources</h2>
               <ul className="text-gray-500 text-sm dark:text-gray-400 font-medium">
                 <li className="mb-4">
                   <Link href="#" className="hover:underline">
@@ -36,9 +40,7 @@ export function Footer() {
               </ul>
             </div>
             <div>
-              <h2 className="mb-6 font-semibold text-zinc-400">
-                Follow us
-              </h2>
+              <h2 className="mb-6 font-semibold text-zinc-400">Follow us</h2>
               <ul className="text-gray-500 text-sm dark:text-gray-400 font-medium">
                 <li className="mb-4">
                   <Link href="#" className="hover:underline ">
@@ -78,37 +80,37 @@ export function Footer() {
           <div className="flex mt-4 sm:justify-center sm:mt-0">
             <Link
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+              className="text-gray-500 hover:text-white dark:hover:text-white"
             >
-              <FaFacebook/>
+              <FaFacebook />
               <span className="sr-only">Facebook page</span>
             </Link>
             <Link
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
+              className="text-gray-500 hover:text-white dark:hover:text-white ms-5"
             >
-              <FaDiscord/>
+              <FaDiscord />
               <span className="sr-only">Discord community</span>
             </Link>
             <Link
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
+              className="text-gray-500 hover:text-white dark:hover:text-white ms-5"
             >
-              <FaXTwitter/>
+              <FaXTwitter />
               <span className="sr-only">Twitter page</span>
             </Link>
             <Link
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
+              className="text-gray-500 hover:text-white dark:hover:text-white ms-5"
             >
-              <FaGithub/>
+              <FaGithub />
               <span className="sr-only">GitHub account</span>
             </Link>
             <Link
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
+              className="text-gray-500 hover:text-white dark:hover:text-white ms-5"
             >
-              <FaDribbble/>
+              <FaDribbble />
               <span className="sr-only">Dribbble account</span>
             </Link>
           </div>
diff --git a/src/components/Appbar/ProfileHeader.tsx b/src/components/Appbar/ProfileHeader.tsx
index 1f3744f..62b503b 100644
--- a/src/components/Appbar/ProfileHeader.tsx
+++ b/src/components/Appbar/ProfileHeader.tsx
@@ -16,7 +16,6 @@ const ProfileHeader = () => {
     <div className="flex items-center gap-4">
       {isUSer ? (
         <Button size="sm" variant="outline">
-
           Sign out
         </Button>
       ) : (
diff --git a/src/components/Home/CallToAction.tsx b/src/components/Home/CallToAction.tsx
index d358236..79a3fdb 100644
--- a/src/components/Home/CallToAction.tsx
+++ b/src/components/Home/CallToAction.tsx
@@ -1,23 +1,38 @@
 import { ArrowRight } from 'lucide-react'
 import { Button } from '../ui/button'
+import ShimmerButton from '../ui/shimmer-button'
 
 const CallToAction = () => {
   return (
-    <section className="my-28">
+    <section className="my-28 text-white">
       <div className="px-5 md:px-0 md:max-w-[900px] lg:max-w-[1300px] container mx-auto">
         <div className="max-w-[540px] mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-black/70 text-transparent bg-clip-text text-center mt-5">
-          Sign up to get started.
+          <h2 className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-slate-400 to-slate-200 text-transparent bg-clip-text text-center mt-5">
+            Sign up to get started.
           </h2>
-          <p className="text-lg tracking-tighter text-black/70 text-center mt-5">
-          Ready to Secure Your Crypto Assets? Sign Up Now to Get Started with Our Easy-to-Use Wallet Generator.
+          <p className="text-lg tracking-tighter text-[#676767] text-center mt-5">
+            Ready to Secure Your Crypto Assets? Sign Up Now to Get Started with
+            Our Easy-to-Use Wallet Generator.
           </p>
         </div>
-        <div className="flex ga-2 mt-10 justify-center">
-          <Button variant="ghost">Get for free</Button>
-          <Button>
-            <span>Learn more</span> <ArrowRight className="h-5 w-5" />
-          </Button>
+        <div className="flex gap-2 mt-10 justify-center">
+          <ShimmerButton
+            shimmerColor="#FFFFFF" // Optional: Customize the shimmer color
+            shimmerDuration="2s" // Optional: Adjust duration
+            background="#000000" // Set background color to black
+            className="text-slate-300 bg-black"
+          >
+            Get for free
+          </ShimmerButton>
+          <ShimmerButton
+            shimmerColor="#FFFFFF" // Optional: Customize the shimmer color for better contrast
+            shimmerDuration="2s" // Optional: Adjust duration
+            background="#000000" // Set background color to black
+            className="text-white bg-black flex items-center gap-2" // Keep text white, add flex for alignment
+          >
+            <span>Learn more</span>
+            <ArrowRight className="h-5 w-5" />
+          </ShimmerButton>
         </div>
       </div>
     </section>
diff --git a/src/components/Home/DocsShowcase.tsx b/src/components/Home/DocsShowcase.tsx
index 33ce79f..1278c20 100644
--- a/src/components/Home/DocsShowcase.tsx
+++ b/src/components/Home/DocsShowcase.tsx
@@ -1,11 +1,11 @@
 import Image from 'next/image'
-import { Button } from '../ui/button'
 import { FaArrowRightLong } from 'react-icons/fa6'
+import ShimmerButton from '../ui/shimmer-button'
 
 const DocsShowcase = () => {
   return (
-    <section className="items-center my-28 md:px-4">
-      <div className="lg:max-w-[1200px] md:max-w-[900px]   md:rounded-2xl mx-auto pl-8 pt-8 bg-black text-white">
+    <section className="items-center my-28 md:px-4 ">
+      <div className="lg:max-w-[1200px] md:max-w-[900px]   md:rounded-2xl mx-auto pl-8 pt-8 bg-[#131315] text-white shadow-2xl">
         <div className="text-sm inline-flex border border-[#fff]/20 px-2 pt-2 pb-1 rounded-lg tracking-tight shadow-inner shadow-white text-white/70">
           <span></span> Tiplink API
         </div>
@@ -20,12 +20,17 @@ const DocsShowcase = () => {
                 tokens and NFTs at scale with our API.
               </p>
             </div>
-            <Button className="bg-white text-black hover:bg-white/90 mt-5 flex gap-3 mb-10">
+            <ShimmerButton
+              shimmerColor="#000" // Customize the shimmer color if needed
+              shimmerDuration="2s" // Optional: Adjust duration
+              background="#ffffff" // Set background color to white
+              className="text-black hover:bg-white/90 mt-5 flex gap-3 px-4 mb-10"
+            >
               Read Docs
               <span>
                 <FaArrowRightLong />
               </span>
-            </Button>
+            </ShimmerButton>
           </div>
           <div className="hidden md:flex items-end justify-end pl-3 pt-3 pb-3 md:pb-0 rounded-lg rounded-r-none md:rounded-b-none bg-zinc-950 backdrop:blur-sm shadow-inner shadow-white/60 h-fit">
             <Image
diff --git a/src/components/Home/Feature.tsx b/src/components/Home/Feature.tsx
index cdea417..152c922 100644
--- a/src/components/Home/Feature.tsx
+++ b/src/components/Home/Feature.tsx
@@ -1,60 +1,83 @@
 import React from 'react'
-import FeatureCard from '../ui/feature-card'
+import { BentoGrid, BentoCard } from '../ui/bento-grid'
 
 const features = [
   {
-    title: 'TipLink Wallet',
+    name: 'TipLink Wallet',
     description:
       'Create or login to your secured TipLink wallet with just 2 clicks.',
-    image: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236917/wallet_krzexr.png",
+
+    img: '/grid5.avif',
+    imgClassName: 'w-full h-full',
+    className: 'col-span-1 lg:col-span-2 shadow-2xl',
+    href: '#',
+    cta: 'Learn more',
   },
   {
-    title: 'TipLink Pro',
+    name: 'TipLink Pro',
     description:
       'TipLink makes distributing digital assets as simple as clicking a link.',
-    image: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236917/pro_odeyp5.png"
+    img: '/grid4.avif',
+    imgClassName: 'w-full h-full',
+    className: 'col-span-1 shadow-2xl',
+    href: '#',
+    cta: 'Learn more',
   },
   {
-    title: 'TipLink Wallet Adapter',
+    name: 'TipLink Wallet Adapter',
     description:
       'Let your users login with just a Google account and start signing transactions.',
-    image: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236913/addapter_zq3why.png"
+    img: '/grid3.avif',
+    imgClassName: 'w-full h-full',
+    className: 'col-span-1 shadow-2xl',
+    href: '#',
+    cta: 'Learn more',
   },
   {
-    title: 'TipLink Swap Token',
+    name: 'TipLink Swap Token',
     description:
-      'Experience Effortless Token Swaps with TipLink, Simplifying Crypto Transactions for All Users',
-    image: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/token_t1atps.png"
+      'Experience Effortless Token Swaps with TipLink, Simplifying Crypto Transactions for All Users.',
+    img: '/grid5.avif',
+    imgClassName: 'w-full h-full',
+    className: 'col-span-1 lg:col-span-2 shadow-2xl',
+    href: '#',
+    cta: 'Learn more',
   },
 ]
 
 const Feature = () => {
   return (
-    <section>
-      <div className="md:mt-20 mt-10 max-w-[1000px] mx-auto ">
+    <section className="bg-black text-white py-20">
+      <div className="md:mt-20 mt-10 max-w-[1000px] mx-auto">
         <div className="flex justify-center">
           <div className="text-sm inline-flex border border-[#222]/10 px-3 py-1 rounded-lg tracking-tight shadow-inner">
             Features
           </div>
         </div>
-        <div className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-black/70 text-transparent bg-clip-text text-center mt-5">
-          Key features
+        <div className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-white to-gray-400 text-transparent bg-clip-text text-center mt-5">
+          Key Features
         </div>
-        <div className="text-lg tracking-tighter text-black/70 text-center mt-5">
+        <div className="text-lg tracking-tighter text-gray-400 text-center mt-5">
           Explore the Core Features of Our Tool!
         </div>
       </div>
-      <div className="my-10 max-w-[1200px] mx-auto">
-        <div className="px-4 grid gap-8 md:grid-cols-2">
+
+      {/* BentoGrid layout */}
+      <div className="my-10 max-w-[1200px] mx-auto px-4 text-stone-950">
+        <BentoGrid className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 py-4">
           {features.map((feature, index) => (
-            <FeatureCard
+            <BentoCard
               key={index}
-              title={feature.title}
+              name={feature.name}
               description={feature.description}
-              image={feature.image}
+              href={feature.href}
+              cta={feature.cta}
+              img={feature.img}
+              imgClassName={feature.imgClassName}
+              className={feature.className}
             />
           ))}
-        </div>
+        </BentoGrid>
       </div>
     </section>
   )
diff --git a/src/components/Home/Hero.tsx b/src/components/Home/Hero.tsx
index 6d0f229..815dfb7 100644
--- a/src/components/Home/Hero.tsx
+++ b/src/components/Home/Hero.tsx
@@ -7,9 +7,10 @@ import Appbar from '../Appbar/Appbar'
 import { signIn, useSession } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
 import AppBarSkeleton from '../Appbar/AppBarSkeleton'
+import ShimmerButton from '../ui/shimmer-button'
 
 const Hero = () => {
-  const session = useSession();
+  const session = useSession()
   const router = useRouter()
   return (
     <section className="items-center md:mt-40 mt-28">
@@ -18,7 +19,7 @@ const Hero = () => {
         <Image
           src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/solana_eoqyva.svg"
           alt=""
-          className="relative left-[10%] lg:left-[30%]"
+          className="relative left-[10%] lg:left-[30%] lg:top-[10%]"
           width={50}
           height={50}
         />
@@ -29,12 +30,12 @@ const Hero = () => {
           width={50}
           height={50}
         />
-        <div className="max-w-[600px] lg:max-w-[900px] mx-auto">
-          <h1 className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-black/70 text-transparent bg-clip-text text-center">
+        <div className="max-w-[600px] lg:max-w-[900px] mx-auto font-bold">
+          <h1 className="text-4xl md:text-5xl lg:text-[48px] font-sans tracking-tighter text-transparent bg-gradient-to-r from-[#7f8c8d] via-gray-200 to-[#f5f5f5] bg-clip-text text-center">
             Secure Your Crypto with Our Wallet Generator
           </h1>
 
-          <p className="text-lg tracking-tighter text-black/70 text-center mt-5">
+          <p className="text-lg tracking-tighter text-[#676767] text-center mt-5">
             Generate a secure, private crypto wallet in minutes with our
             easy-to-use tool <br className="hidden md:block" /> Powered by
             Google Auth for seamless, secure access.
@@ -42,19 +43,21 @@ const Hero = () => {
         </div>
         <div className="flex items-center justify-center mt-5">
           {!session?.data?.user ? (
-            <Button
-              className="pl-2 py-6 text-sm md:text-base"
+            <ShimmerButton
+              shimmerColor="#4285F4"
+              shimmerDuration="2s"
+              className="px-2 py-2 text-sm md:text-base"
               onClick={async () => {
                 await signIn('google')
               }}
             >
               <span className="flex items-center gap-2">
-                <div className="px-3 py-2 rounded-lg border bg-white text-black">
+                <div className="px-3 py-2 rounded-lg  bg-[#000000] text-slate-200">
                   <FaGoogle />
                 </div>
                 Sign up with Google
               </span>
-            </Button>
+            </ShimmerButton>
           ) : (
             <Button
               className="pl-3 py-6 text-sm bg-black md:text-base"
@@ -63,7 +66,7 @@ const Hero = () => {
               }}
             >
               <span className="flex items-center gap-2">
-                <div className="px-3 py-2 rounded-lg bg-white text-black">
+                <div className="px-3 py-2 rounded-lg bg-[#000000] text-[#f8f8f8]">
                   <svg
                     className="size-5"
                     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Home/HeroImage.tsx b/src/components/Home/HeroImage.tsx
index b283e15..e0ae42f 100644
--- a/src/components/Home/HeroImage.tsx
+++ b/src/components/Home/HeroImage.tsx
@@ -2,11 +2,11 @@ import Image from 'next/image'
 
 const HeroImage = () => {
   return (
-    <section className="relative max-w-[1300px] mx-auto px-4 md:mt-20 my-10 ">
+    <section className="relative max-w-[1300px] mx-auto px-20 md:mt-20 lg:my-20 ">
       <div className="p-3 bg-slate-100 rounded-2xl">
         <Image
           src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236913/hero_ezqaef.png"
-          width={1400}
+          width={1000}
           height={800}
           alt="hero-image"
           className="drop-shadow-xl border rounded-lg"
diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
index 5794af9..0d7a501 100644
--- a/src/components/Home/Home.tsx
+++ b/src/components/Home/Home.tsx
@@ -10,7 +10,7 @@ import CallToAction from './CallToAction'
 
 const Home = () => {
   return (
-    <>
+    <div className="bg-[#000000] pt-10">
       <Hero />
       <HeroImage />
       <LogoTicker />
@@ -18,7 +18,7 @@ const Home = () => {
       <DocsShowcase />
       <Testimonials />
       <CallToAction />
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/Home/Logoticker.tsx b/src/components/Home/Logoticker.tsx
index 2ebfa15..10cf5ce 100644
--- a/src/components/Home/Logoticker.tsx
+++ b/src/components/Home/Logoticker.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image'
 const LogoTicker = () => {
   return (
     <div className="my-20 max-w-[1000px] mx-auto px-4">
-      <div className=" bg-white">
+      <div className="bg-black">
         <div className="px-5 md:px-10 md:flex items-center justify-center">
           <div className="flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,black,transparent)]">
             <motion.div
@@ -21,73 +21,75 @@ const LogoTicker = () => {
                 repeatType: 'loop',
               }}
             >
+              {/* Apply the 'invert' filter to make images white */}
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/logo-acme_chpmz7.png"
                 alt="Acme Logo"
-                className="logo-ticker-img"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/logo-quantum_hvfwas.png"
-                alt="Acme Logo"
-                className="logo-ticker-img"
+                alt="Quantum Logo"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/logo-echo_i5hnpv.png"
-                alt="Acme Logo"
-                className="logo-ticker-img"
+                alt="Echo Logo"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/logo-celestial_dv5uka.png"
-                alt="Acme Logo"
-                className="logo-ticker-img"
+                alt="Celestial Logo"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/logo-pulse_woeaxa.png"
-                alt="Acme Logo"
-                className="logo-ticker-img"
+                alt="Pulse Logo"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
+              {/* Repeat for other images */}
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/logo-acme_chpmz7.png"
                 alt="Acme Logo"
-                className="logo-ticker-img"
+                className="logo-ticker-img filter invert"
                 width={100}
                 height={100}
               />
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/logo-quantum_hvfwas.png"
-                alt="Acme Logo"
-                className="logo-ticker-img"
+                alt="Quantum Logo"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/logo-echo_i5hnpv.png"
-                alt="Acme Logo"
-                className="logo-ticker-img"
+                alt="Echo Logo"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/logo-celestial_dv5uka.png"
-                alt="Acme Logo"
-                className="logo-ticker-img"
+                alt="Celestial Logo"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
               <Image
                 src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/logo-pulse_woeaxa.png"
-                alt="Acme Logo"
-                className="logo-ticker-img"
+                alt="Pulse Logo"
+                className="logo-ticker-img filter invert"
                 width={200}
                 height={200}
               />
diff --git a/src/components/Home/Testimonials.tsx b/src/components/Home/Testimonials.tsx
index ee56f16..5ef7e12 100644
--- a/src/components/Home/Testimonials.tsx
+++ b/src/components/Home/Testimonials.tsx
@@ -5,37 +5,43 @@ import React from 'react'
 const testimonials = [
   {
     text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque ut fuga magni!',
-    imageSrc: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236914/avatar-1_xxgkqm.png",
+    imageSrc:
+      'https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236914/avatar-1_xxgkqm.png',
     name: 'Alex Rose',
     username: '@alexrose06',
   },
   {
     text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque ut fuga magni!',
-    imageSrc: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236914/avatar-2_jddbqk.png",
+    imageSrc:
+      'https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236914/avatar-2_jddbqk.png',
     name: 'Alex Rose',
     username: '@alexrose06',
   },
   {
     text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque ut fuga magni!',
-    imageSrc: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/avatar-3_xdijdf.png",
+    imageSrc:
+      'https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/avatar-3_xdijdf.png',
     name: 'Alex Rose',
     username: '@alexrose06',
   },
   {
     text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque ut fuga magni!',
-    imageSrc: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/avatar-4_ppdr5c.png",
+    imageSrc:
+      'https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/avatar-4_ppdr5c.png',
     name: 'Alex Rose',
     username: '@alexrose06',
   },
   {
     text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque ut fuga magni!',
-    imageSrc: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/avatar-5_uzpthr.png",
+    imageSrc:
+      'https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236915/avatar-5_uzpthr.png',
     name: 'Alex Rose',
     username: '@alexrose06',
   },
   {
     text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque ut fuga magni!',
-    imageSrc: "https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/avatar-6_tkivlz.png",
+    imageSrc:
+      'https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/avatar-6_tkivlz.png',
     name: 'Alex Rose',
     username: '@alexrose06',
   },
@@ -66,22 +72,24 @@ const TestimonialsColumn = (props: {
       >
         {[...new Array(2)].fill(0).map((_, index) => (
           <React.Fragment key={index}>
-            {props.testimonials.map(({ text, imageSrc, name, username },i) => (
+            {props.testimonials.map(({ text, imageSrc, name, username }, i) => (
               <div className="card" key={i}>
-                <div>{text}</div>
+                <div className="text-[#676767]">{text}</div>
                 <div className="flex items-center gap-2 mt-5">
                   <Image
                     src={imageSrc}
                     alt={name}
                     width={40}
                     height={40}
-                    className="rounded-full"
+                    className="rounded-full bg-white"
                   />
                   <div className="flex flex-col">
-                    <div className="font-medium tracking-tight leading-5">
+                    <div className="font-medium tracking-tight text-[#676767] leading-5">
                       {name}
                     </div>
-                    <div className="leading-5 tracking-tight">{username}</div>
+                    <div className="leading-5 text-[#676767] tracking-tight">
+                      {username}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -102,7 +110,7 @@ const TestimonialsColumn = (props: {
 
 const Testimonials = () => {
   return (
-    <section className="bg-white">
+    <section className="bg-[#000000]">
       <div className="px-5 md:px-0 md:max-w-[900px] lg:max-w-[1300px] container mx-auto">
         <div className="max-w-[540px] mx-auto">
           <div className="flex justify-center">
@@ -110,11 +118,12 @@ const Testimonials = () => {
               Testimonials
             </div>
           </div>
-          <h2 className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-black/70 text-transparent bg-clip-text text-center mt-5">
+          <h2 className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-slate-400 to-slate-200 text-transparent bg-clip-text text-center mt-5">
             What our users say
           </h2>
-          <p className="text-lg tracking-tighter text-black/70 text-center mt-5">
-          Hear from Our Satisfied Users About Their Secure Crypto Wallet Experience.
+          <p className="text-lg tracking-tighter text-[#676767] text-center mt-5">
+            Hear from Our Satisfied Users About Their Secure Crypto Wallet
+            Experience.
           </p>
         </div>
         <div className="flex justify-center gap-6 [mask-image:linear-gradient(to_bottom,transparent,black_25%,black_70%,transparent)] mt-10 max-h-[738px] overflow-hidden">
diff --git a/src/components/WalletPage/LeftSideBar.tsx b/src/components/WalletPage/LeftSideBar.tsx
index f7a3f33..c81aa71 100644
--- a/src/components/WalletPage/LeftSideBar.tsx
+++ b/src/components/WalletPage/LeftSideBar.tsx
@@ -77,7 +77,9 @@ const LeftSideBar = () => {
             key={index}
             className={cn(
               'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white rounded-lg',
-              pathName === option?.href ? 'sm:bg-black text-white' : 'text-black',
+              pathName === option?.href
+                ? 'sm:bg-black text-white'
+                : 'text-black',
             )}
           >
             {option.svg}
diff --git a/src/components/WalletPage/RightSideBar.tsx b/src/components/WalletPage/RightSideBar.tsx
index 3541b4f..ee3930b 100644
--- a/src/components/WalletPage/RightSideBar.tsx
+++ b/src/components/WalletPage/RightSideBar.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import { signOut } from "next-auth/react";
-import { useRouter } from "next/navigation"
+import { signOut } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
 
 const RightSideBar = () => {
-  const router = useRouter();
+  const router = useRouter()
 
   return (
     <div className="pr-6">
@@ -112,9 +112,12 @@ const RightSideBar = () => {
           </svg>
           <p>Blogs</p>
         </button>
-        <button className="flex space-x-3 p-2 text-white hover:bg-gray-800 rounded-lg md:text-sm" onClick={async()=>{
-          await signOut({callbackUrl:"/"});
-        }}>
+        <button
+          className="flex space-x-3 p-2 text-white hover:bg-gray-800 rounded-lg md:text-sm"
+          onClick={async () => {
+            await signOut({ callbackUrl: '/' })
+          }}
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
diff --git a/src/components/WalletPage/TopBar.tsx b/src/components/WalletPage/TopBar.tsx
index 578f0ce..39a4a0c 100644
--- a/src/components/WalletPage/TopBar.tsx
+++ b/src/components/WalletPage/TopBar.tsx
@@ -33,10 +33,15 @@ const TopBar = () => {
       </div>
 
       <div className="hidden sm:flex sm:w-1/2 md:w-[50%] items-center border rounded-full p-2">
-        <Search color='gray' />
-        <input className="w-full text-center outline-none" placeholder="Search" />
+        <Search color="gray" />
+        <input
+          className="w-full text-center outline-none"
+          placeholder="Search"
+        />
       </div>
-      {data && data?.user ? <ProfileDropDown /> : (
+      {data && data?.user ? (
+        <ProfileDropDown />
+      ) : (
         <div className="w-[3rem] flex items-center p-[0.2rem]  justify-center h-[2rem] transition outline-none">
           <div className="p-4 border-2 rounded-full bg-gray-300 animate-pulse"></div>
         </div>
diff --git a/src/components/WalletPage/WalletDetail.tsx b/src/components/WalletPage/WalletDetail.tsx
index 8f5a2f5..ccc2ed2 100644
--- a/src/components/WalletPage/WalletDetail.tsx
+++ b/src/components/WalletPage/WalletDetail.tsx
@@ -3,7 +3,6 @@ import React, { useState } from 'react'
 import { actions, ActionType } from './actions'
 import { ReceiveQR } from './ReceiveQR'
 
-
 export interface WalletDetailProps {
   wallet?: string
   balance?: number
diff --git a/src/components/WaveBackground.tsx b/src/components/WaveBackground.tsx
new file mode 100644
index 0000000..5e6cf3f
--- /dev/null
+++ b/src/components/WaveBackground.tsx
@@ -0,0 +1,28 @@
+// components/WaveBackground.tsx
+import React from 'react'
+
+const WaveBackground: React.FC = () => {
+  return (
+    <div className="relative w-full min-h-screen bg-gradient-to-b from-gray-900 to-black text-white overflow-hidden">
+      {/* Wave SVG */}
+      <div className="absolute bottom-0 left-0 right-0 w-full overflow-hidden">
+        <svg
+          className="relative block w-full"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1440 320"
+        >
+          <path
+            fill="rgba(255, 255, 255, 0.1)" // Light color for the wave
+            d="M0,160L80,154.7C160,149,320,139,480,138.7C640,139,800,149,960,176C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"
+          ></path>
+          <path
+            fill="rgba(255, 255, 255, 0.2)" // Darker shade for a shadow effect
+            d="M0,192L80,192C160,192,320,192,480,186.7C640,181,800,171,960,165.3C1120,160,1280,160,1360,160L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"
+          ></path>
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+export default WaveBackground
diff --git a/src/components/common/ProfileDropDown.tsx b/src/components/common/ProfileDropDown.tsx
index e3deb73..d5390c6 100644
--- a/src/components/common/ProfileDropDown.tsx
+++ b/src/components/common/ProfileDropDown.tsx
@@ -1,89 +1,91 @@
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import UserImage from '@/components/Appbar/UserImage'
 import { LogOut, UserRound } from 'lucide-react'
 import { signOut, useSession } from 'next-auth/react'
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation'
 
 const ProfileDropDown = () => {
-    const { data } = useSession();
-    const router = useRouter();
+  const { data } = useSession()
+  const router = useRouter()
 
-    const dropDownData = [
-        {
-            name: 'Profile',
-            icon: <UserRound size={15} />,
-            href: '/profile',
-        }
-    ]
+  const dropDownData = [
+    {
+      name: 'Profile',
+      icon: <UserRound size={15} />,
+      href: '/profile',
+    },
+  ]
 
-    return <>
-        <DropdownMenu>
-            <DropdownMenuTrigger className="w-[3rem] flex items-center p-[0.2rem]  justify-center h-[2rem] transition outline-none">
-                {!data?.user?.image ? (
-                    <div className="p-1 border-2 rounded-md">
-                        <UserRound />
-                    </div>
-                ) : (
-                    <UserImage image={data?.user.image} />
-                )}
-            </DropdownMenuTrigger>
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger className="w-[3rem] flex items-center p-[0.2rem]  justify-center h-[2rem] transition outline-none">
+          {!data?.user?.image ? (
+            <div className="p-1 border-2 rounded-md">
+              <UserRound />
+            </div>
+          ) : (
+            <UserImage image={data?.user.image} />
+          )}
+        </DropdownMenuTrigger>
 
-            <DropdownMenuContent className="translate-y-8 scale-110 -translate-x-10 shadow-lg bg-white ">
-                <DropdownMenuLabel className="flex gap-4 items-center">
-                    <div className="!w-[2rem] flex items-center p-[0.2rem]  justify-center !h-[2rem]">
-                        {!data?.user?.image ? (
-                            <div className="p-1 border-2 rounded-full border-[#1a1a1a]">
-                                <UserRound />
-                            </div>
-                        ) : (
-                            <UserImage image={data?.user.image} />
-                        )}
-                    </div>
+        <DropdownMenuContent className="translate-y-8 scale-110 -translate-x-10 shadow-lg bg-white ">
+          <DropdownMenuLabel className="flex gap-4 items-center">
+            <div className="!w-[2rem] flex items-center p-[0.2rem]  justify-center !h-[2rem]">
+              {!data?.user?.image ? (
+                <div className="p-1 border-2 rounded-full border-[#1a1a1a]">
+                  <UserRound />
+                </div>
+              ) : (
+                <UserImage image={data?.user.image} />
+              )}
+            </div>
 
-                    <div className="flex flex-col">
-                        <span className="max-w-[200px]">{data?.user?.name}</span>
-                        <span className="text-[0.8rem] max-w-[200px] text-gray-400 break-all">
-                            {data?.user?.email}
-                        </span>
-                    </div>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
+            <div className="flex flex-col">
+              <span className="max-w-[200px]">{data?.user?.name}</span>
+              <span className="text-[0.8rem] max-w-[200px] text-gray-400 break-all">
+                {data?.user?.email}
+              </span>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
 
-                {dropDownData.map((item, index) => {
-                    return (
-                        <DropdownMenuItem
-                            className="flex gap-2 cursor-pointer text-black/70 hover:text-black transition"
-                            onClick={() => router.push('/profile')}
-                            key={index}
-                        >
-                            <span>{item.icon}</span>
-                            <span>{item.name}</span>
-                        </DropdownMenuItem>
-                    )
-                })}
-                <DropdownMenuSeparator />
-                {data?.user && (
-                    <DropdownMenuItem
-                        onClick={async () => {
-                            await signOut()
-                            router.push('/')
-                        }}
-                        className="flex gap-2 cursor-pointer text-black/70 hover:text-black transition"
-                    >
-                        <LogOut size={15} />
-                        Logout
-                    </DropdownMenuItem>
-                )}
-            </DropdownMenuContent>
-        </DropdownMenu>
+          {dropDownData.map((item, index) => {
+            return (
+              <DropdownMenuItem
+                className="flex gap-2 cursor-pointer text-black/70 hover:text-black transition"
+                onClick={() => router.push('/profile')}
+                key={index}
+              >
+                <span>{item.icon}</span>
+                <span>{item.name}</span>
+              </DropdownMenuItem>
+            )
+          })}
+          <DropdownMenuSeparator />
+          {data?.user && (
+            <DropdownMenuItem
+              onClick={async () => {
+                await signOut()
+                router.push('/')
+              }}
+              className="flex gap-2 cursor-pointer text-black/70 hover:text-black transition"
+            >
+              <LogOut size={15} />
+              Logout
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
     </>
+  )
 }
 
-export default ProfileDropDown;
\ No newline at end of file
+export default ProfileDropDown
diff --git a/src/components/icons/Logo.tsx b/src/components/icons/Logo.tsx
index 55fd182..4f54465 100644
--- a/src/components/icons/Logo.tsx
+++ b/src/components/icons/Logo.tsx
@@ -6,7 +6,7 @@ interface LogoProps {
 }
 
 const Logo: React.FC<LogoProps> = ({ className, fill }) => (
-  <Link href='/'>
+  <Link href="/">
     <svg
       viewBox="0 0 120 120"
       fill="none"
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 24c788c..b69428b 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Accordion = AccordionPrimitive.Root
 
@@ -14,11 +14,11 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b", className)}
+    className={cn('border-b', className)}
     {...props}
   />
 ))
-AccordionItem.displayName = "AccordionItem"
+AccordionItem.displayName = 'AccordionItem'
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -28,8 +28,8 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
       )}
       {...props}
     >
@@ -49,7 +49,7 @@ const AccordionContent = React.forwardRef<
     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
   </AccordionPrimitive.Content>
 ))
 
diff --git a/src/components/ui/bento-grid.tsx b/src/components/ui/bento-grid.tsx
new file mode 100644
index 0000000..d851fb9
--- /dev/null
+++ b/src/components/ui/bento-grid.tsx
@@ -0,0 +1,98 @@
+import { ReactNode } from 'react'
+import { ArrowRightIcon } from '@radix-ui/react-icons'
+import Image from 'next/image'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+const BentoGrid = ({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) => {
+  return (
+    <div
+      className={cn(
+        'grid w-full auto-rows-[18rem] grid-cols-3 gap-4',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+const BentoCard = ({
+  name,
+  className,
+  background,
+  Icon,
+  description,
+  img,
+  imgClassName,
+  href,
+  cta,
+}: {
+  name: string
+  className: string
+  background?: ReactNode
+  Icon?: any
+  description: string
+  img?: string
+  imgClassName?: string
+  href: string
+  cta: string
+}) => (
+  <div
+    key={name}
+    className={cn(
+      'group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl border border-gray-700',
+      // light styles
+      ' [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
+      // dark styles
+      'transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
+      className,
+    )}
+  >
+    <div>
+      <div className="w-full h-full absolute">
+        {img && (
+          <Image
+            src={img}
+            alt={img}
+            className={cn(imgClassName, 'object-cover object-center ')}
+            layout="fill"
+            objectFit="cover"
+          />
+        )}
+      </div>
+    </div>
+    <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
+      {/* <Icon className="h-12 w-12 origin-left transform-gpu  transition-all duration-300 ease-in-out group-hover:scale-75" /> */}
+      <h3 className="text-xl font-semibold  text-white">{name}</h3>
+      <p className="max-w-lg text-white ">{description}</p>
+    </div>
+
+    <div
+      className={cn(
+        'pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100',
+      )}
+    >
+      <Button
+        variant="ghost"
+        asChild
+        size="sm"
+        className="pointer-events-auto text-white hover:text-blue-500 hover:underline"
+      >
+        <a href={href}>
+          {cta}
+          <ArrowRightIcon className="ml-2 h-4 w-4" />
+        </a>
+      </Button>
+    </div>
+    <div className="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" />
+  </div>
+)
+
+export { BentoCard, BentoGrid }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index afa13ec..c5d18d4 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,13 +9,13 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className,
     )}
     {...props}
   />
 ))
-Card.displayName = "Card"
+Card.displayName = 'Card'
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -23,11 +23,11 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
 ))
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = 'CardHeader'
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -36,13 +36,13 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
+      'text-2xl font-semibold leading-none tracking-tight',
+      className,
     )}
     {...props}
   />
 ))
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = 'CardTitle'
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -50,19 +50,19 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
 ))
-CardContent.displayName = "CardContent"
+CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,10 +70,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
 ))
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = 'CardFooter'
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index f69a0d6..d11aed5 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { Check, ChevronRight, Circle } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -27,9 +27,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   >
@@ -47,8 +47,8 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
     )}
     {...props}
   />
@@ -65,8 +65,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
       )}
       {...props}
     />
@@ -83,9 +83,9 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   />
@@ -99,8 +99,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     checked={checked}
     {...props}
@@ -123,8 +123,8 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     {...props}
   >
@@ -147,9 +147,9 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   />
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
 ))
@@ -174,12 +174,12 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
       {...props}
     />
   )
 }
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 
 export {
   DropdownMenu,
diff --git a/src/components/ui/login-with-google.tsx b/src/components/ui/login-with-google.tsx
index 44cc9c6..65839aa 100644
--- a/src/components/ui/login-with-google.tsx
+++ b/src/components/ui/login-with-google.tsx
@@ -1,19 +1,22 @@
-'use client'
-import { FaGoogle } from 'react-icons/fa6'
-import { Button } from './button'
+import React from 'react'
 import { signIn } from 'next-auth/react'
+import { FaGoogle } from 'react-icons/fa'
+import ShimmerButton from './shimmer-button'
 
-const LoginWithGoogleButton = () => {
+const GoogleLoginButton = () => {
   return (
-    <Button
+    <ShimmerButton
+      shimmerColor="#4285F4"
+      shimmerDuration="2s"
+      className="px-4 py-2 text-sm md:text-base mr-4"
       onClick={async () => await signIn('google', { callbackUrl: '/wallet' })}
     >
       <span className="flex items-center gap-2">
         Login
         <FaGoogle />
       </span>
-    </Button>
+    </ShimmerButton>
   )
 }
 
-export default LoginWithGoogleButton
+export default GoogleLoginButton
diff --git a/src/components/ui/scroll-to-top-button.tsx b/src/components/ui/scroll-to-top-button.tsx
index 565c22a..5088eb5 100644
--- a/src/components/ui/scroll-to-top-button.tsx
+++ b/src/components/ui/scroll-to-top-button.tsx
@@ -27,8 +27,8 @@ export const ScrollToTopButton = () => {
 
   return (
     <Button
-      aria-label='scroll to the top button'
-      size='sm'
+      aria-label="scroll to the top button"
+      size="sm"
       className={`text-xs fixed bottom-4 right-4 rounded-full p-2 outline-none scrollToTheTop transition-opacity duration-200 ${
         isVisible ? 'showBtn' : 'opacity-0'
       }`}
diff --git a/src/components/ui/shimmer-button.tsx b/src/components/ui/shimmer-button.tsx
new file mode 100644
index 0000000..37b804a
--- /dev/null
+++ b/src/components/ui/shimmer-button.tsx
@@ -0,0 +1,96 @@
+import React, { CSSProperties } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface ShimmerButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  shimmerColor?: string
+  shimmerSize?: string
+  borderRadius?: string
+  shimmerDuration?: string
+  background?: string
+  className?: string
+  children?: React.ReactNode
+}
+
+const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
+  (
+    {
+      shimmerColor = '#ffffff',
+      shimmerSize = '0.05em',
+      shimmerDuration = '3s',
+      borderRadius = '100px',
+      background = 'rgba(0, 0, 0, 1)',
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        style={
+          {
+            '--spread': '90deg',
+            '--shimmer-color': shimmerColor,
+            '--radius': borderRadius,
+            '--speed': shimmerDuration,
+            '--cut': shimmerSize,
+            '--bg': background,
+          } as CSSProperties
+        }
+        className={cn(
+          'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black',
+          'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        {/* spark container */}
+        <div
+          className={cn(
+            '-z-30 blur-[2px]',
+            'absolute inset-0 overflow-visible [container-type:size]',
+          )}
+        >
+          {/* spark */}
+          <div className="absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]">
+            {/* spark before */}
+            <div className="animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" />
+          </div>
+        </div>
+        {children}
+
+        {/* Highlight */}
+        <div
+          className={cn(
+            'insert-0 absolute size-full',
+
+            'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
+
+            // transition
+            'transform-gpu transition-all duration-300 ease-in-out',
+
+            // on hover
+            'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
+
+            // on click
+            'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]',
+          )}
+        />
+
+        {/* backdrop */}
+        <div
+          className={cn(
+            'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]',
+          )}
+        />
+      </button>
+    )
+  },
+)
+
+ShimmerButton.displayName = 'ShimmerButton'
+
+export default ShimmerButton
diff --git a/src/middleware.ts b/src/middleware.ts
index d370a1b..03f6034 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,13 +1,10 @@
-import { withAuth } from "next-auth/middleware";
+import { withAuth } from 'next-auth/middleware'
 
-export default withAuth(
-    function middleware(req) {},
-    {
-        callbacks: {
-            authorized: ({ token }) => !!token,
-        },
-    },
-);
+export default withAuth(function middleware(req) {}, {
+  callbacks: {
+    authorized: ({ token }) => !!token,
+  },
+})
 
 // Middleware configuration for matching routes
-export const config = { matcher: ["/wallet"] };
+export const config = { matcher: ['/wallet'] }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 400cff7..9b95707 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,41 +1,64 @@
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
-    darkMode: ['class'],
-    content: [
+  darkMode: ['class'],
+  content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-  	extend: {
-  		backgroundImage: {
-  			'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-  			'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
-  		},
-  		keyframes: {
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		}
-  	}
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: {
+            height: '0',
+          },
+          to: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+        },
+        'accordion-up': {
+          from: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+          to: {
+            height: '0',
+          },
+        },
+        'shimmer-slide': {
+          to: {
+            transform: 'translate(calc(100cqw - 100%), 0)',
+          },
+        },
+        'spin-around': {
+          '0%': {
+            transform: 'translateZ(0) rotate(0)',
+          },
+          '15%, 35%': {
+            transform: 'translateZ(0) rotate(90deg)',
+          },
+          '65%, 85%': {
+            transform: 'translateZ(0) rotate(270deg)',
+          },
+          '100%': {
+            transform: 'translateZ(0) rotate(360deg)',
+          },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'shimmer-slide':
+          'shimmer-slide var(--speed) ease-in-out infinite alternate',
+        'spin-around': 'spin-around calc(var(--speed) * 2) infinite linear',
+      },
+    },
   },
   plugins: [],
 }