diff --git a/apps/web/src/components/faq/FaqSection.tsx b/apps/web/src/components/faq/FaqSection.tsx
index f46b3931..f4ad32e6 100644
--- a/apps/web/src/components/faq/FaqSection.tsx
+++ b/apps/web/src/components/faq/FaqSection.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Accordion,
   AccordionContent,
@@ -6,6 +7,7 @@ import {
 } from "@/components/ui/accordion";
 import Header from "../ui/header";
 import { faqs } from "./faqData";
+import Image from "next/image";
 
 export function FaqSection() {
   return (
@@ -13,43 +15,234 @@ export function FaqSection() {
       <Header title="Frequently Asked Questions" />
       <div className="w-full px-[30px] lg:px-[50px] py-8 lg:py-12 relative">
         <div
-          style={{
-            height: "100%",
-            "--pattern-fg": "#252525",
-            borderRight: "1px solid #252525",
-            backgroundImage:
-              "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
-            backgroundSize: "10px 10px",
-            backgroundAttachment: "fixed",
-          } as React.CSSProperties}
-          className="w-[30px] lg:w-[50px] absolute left-0 top-0"
+          style={
+            {
+              height: "100%",
+              "--pattern-fg": "#252525",
+              borderRight: "1px solid #252525",
+              backgroundImage:
+                "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
+              backgroundSize: "10px 10px",
+              backgroundAttachment: "fixed",
+            } as React.CSSProperties
+          }
+          className="w-[30px] lg:w-[50px] absolute left-0 top-0 z-30"
         />
-        
+
         <div
-          style={{
-            height: "100%",
-            "--pattern-fg": "#252525",
-            borderLeft: "1px solid #252525",
-            backgroundImage:
-              "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
-            backgroundSize: "10px 10px",
-            backgroundAttachment: "fixed",
-          } as React.CSSProperties}
-          className="w-[30px] lg:w-[50px] absolute right-0 top-0"
+          style={
+            {
+              height: "100%",
+              "--pattern-fg": "#252525",
+              borderLeft: "1px solid #252525",
+              backgroundImage:
+                "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
+              backgroundSize: "10px 10px",
+              backgroundAttachment: "fixed",
+            } as React.CSSProperties
+          }
+          className="w-[30px] lg:w-[50px] absolute right-0 top-0 z-30"
         />
 
-        <div className="max-w-4xl mx-auto">
-          <Accordion type="single" collapsible className="w-full space-y-4">
+        <div className="absolute w-full h-full top-0 left-0">
+          <Image
+            src="/assets/mask.svg"
+            alt="background"
+            fill
+            className="object-cover w-full h-full opacity-40 [mask-image:radial-gradient(circle_at_center,transparent_0%,transparent_40%,black_60%,black_100%)]"
+          />
+          <div className="absolute h-full w-full bg-gradient-to-t from-surface-primary/75 via-transparent to-surface-primary/75 top-0 left-1/2 -translate-x-1/2"></div>
+          <div className="absolute h-full w-full bg-gradient-to-r from-surface-primary/75 via-transparent to-surface-primary/75 top-0 left-1/2 -translate-x-1/2"></div>
+        </div>
+        <div className="max-w-4xl mx-auto relative">
+          <Accordion
+            type="single"
+            collapsible
+            className="w-full space-y-4 px-2"
+          >
             {faqs.map((faq, index) => (
-              <AccordionItem 
-                value={`item-${index}`} 
+              <AccordionItem
+                value={`item-${index}`}
                 key={index}
-                className="border border-[#252525] rounded-lg bg-[#151515]/20 backdrop-blur-xl overflow-hidden"
+                className=" rounded-2xl border border-border overflow-hidden relative z-10"
               >
-                <AccordionTrigger className="px-6 py-4 text-left text-base lg:text-lg font-medium hover:bg-[#252525]/30 transition-colors [&[data-state=open]]:bg-[#252525]/50">
+                <svg
+                  width="894"
+                  height="126"
+                  viewBox="0 0 894 126"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="absolute top-0 left-0 z-0 pointer-events-none opacity-30"
+                >
+                  <g clip-path="url(#clip0_288_24)">
+                    <g filter="url(#filter0_n_288_24)">
+                      <g filter="url(#filter1_f_288_24)">
+                        <ellipse
+                          cx="570.829"
+                          cy="-239.222"
+                          rx="814.829"
+                          ry="819.778"
+                          fill="#A556FB"
+                        />
+                      </g>
+                      <g filter="url(#filter2_f_288_24)">
+                        <ellipse
+                          cx="571.517"
+                          cy="-239.221"
+                          rx="685.036"
+                          ry="689.298"
+                          fill="#4922E5"
+                        />
+                      </g>
+                      <g filter="url(#filter3_f_288_24)">
+                        <ellipse
+                          cx="386"
+                          cy="-239"
+                          rx="585"
+                          ry="585.5"
+                          fill="#101010"
+                        />
+                      </g>
+                    </g>
+                  </g>
+                  <defs>
+                    <filter
+                      id="filter0_n_288_24"
+                      x="-244"
+                      y="-1059"
+                      width="1629.66"
+                      height="1639.56"
+                      filterUnits="userSpaceOnUse"
+                      color-interpolation-filters="sRGB"
+                    >
+                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                      <feBlend
+                        mode="normal"
+                        in="SourceGraphic"
+                        in2="BackgroundImageFix"
+                        result="shape"
+                      />
+                      <feTurbulence
+                        type="fractalNoise"
+                        baseFrequency="0.1428571492433548 0.1428571492433548"
+                        stitchTiles="stitch"
+                        numOctaves="3"
+                        result="noise"
+                        seed="3305"
+                      />
+                      <feColorMatrix
+                        in="noise"
+                        type="luminanceToAlpha"
+                        result="alphaNoise"
+                      />
+                      <feComponentTransfer
+                        in="alphaNoise"
+                        result="coloredNoise1"
+                      >
+                        <feFuncA
+                          type="discrete"
+                          tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "
+                        />
+                      </feComponentTransfer>
+                      <feComposite
+                        operator="in"
+                        in2="shape"
+                        in="coloredNoise1"
+                        result="noise1Clipped"
+                      />
+                      <feFlood
+                        flood-color="rgba(0, 0, 0, 0.12)"
+                        result="color1Flood"
+                      />
+                      <feComposite
+                        operator="in"
+                        in2="noise1Clipped"
+                        in="color1Flood"
+                        result="color1"
+                      />
+                      <feMerge result="effect1_noise_288_24">
+                        <feMergeNode in="shape" />
+                        <feMergeNode in="color1" />
+                      </feMerge>
+                    </filter>
+                    <filter
+                      id="filter1_f_288_24"
+                      x="-324"
+                      y="-1139"
+                      width="1789.66"
+                      height="1799.56"
+                      filterUnits="userSpaceOnUse"
+                      color-interpolation-filters="sRGB"
+                    >
+                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                      <feBlend
+                        mode="normal"
+                        in="SourceGraphic"
+                        in2="BackgroundImageFix"
+                        result="shape"
+                      />
+                      <feGaussianBlur
+                        stdDeviation="40"
+                        result="effect1_foregroundBlur_288_24"
+                      />
+                    </filter>
+                    <filter
+                      id="filter2_f_288_24"
+                      x="-273.518"
+                      y="-1088.52"
+                      width="1690.07"
+                      height="1698.6"
+                      filterUnits="userSpaceOnUse"
+                      color-interpolation-filters="sRGB"
+                    >
+                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                      <feBlend
+                        mode="normal"
+                        in="SourceGraphic"
+                        in2="BackgroundImageFix"
+                        result="shape"
+                      />
+                      <feGaussianBlur
+                        stdDeviation="80"
+                        result="effect1_foregroundBlur_288_24"
+                      />
+                    </filter>
+                    <filter
+                      id="filter3_f_288_24"
+                      x="-399"
+                      y="-1024.5"
+                      width="1570"
+                      height="1571"
+                      filterUnits="userSpaceOnUse"
+                      color-interpolation-filters="sRGB"
+                    >
+                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                      <feBlend
+                        mode="normal"
+                        in="SourceGraphic"
+                        in2="BackgroundImageFix"
+                        result="shape"
+                      />
+                      <feGaussianBlur
+                        stdDeviation="100"
+                        result="effect1_foregroundBlur_288_24"
+                      />
+                    </filter>
+                    <clipPath id="clip0_288_24">
+                      <rect
+                        width="1512"
+                        height="864"
+                        fill="white"
+                        transform="translate(-337 -467)"
+                      />
+                    </clipPath>
+                  </defs>
+                </svg>
+
+                <AccordionTrigger className="px-6 py-4 text-left text-base lg:text-lg font-medium transition-colors z-30">
                   {faq.question}
                 </AccordionTrigger>
-                <AccordionContent className="px-6 pb-4 text-[#d1d1d1] text-sm lg:text-base leading-relaxed">
+                <AccordionContent className="px-6 pb-4 text-text-primary text-sm lg:text-base leading-relaxed z-50">
                   {faq.answer}
                 </AccordionContent>
               </AccordionItem>
@@ -59,4 +252,4 @@ export function FaqSection() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/components/landing-sections/Brands.tsx b/apps/web/src/components/landing-sections/Brands.tsx
index 2437f035..7faccfcf 100644
--- a/apps/web/src/components/landing-sections/Brands.tsx
+++ b/apps/web/src/components/landing-sections/Brands.tsx
@@ -36,7 +36,6 @@ const Brands = () => {
             <span
               className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1.5rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
               style={{
-                textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
               }}
             >
               {queryCount}
@@ -56,7 +55,6 @@ const Brands = () => {
             <span
               className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1.5rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
               style={{
-                textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
               }}
             >
               {userCount}
diff --git a/apps/web/src/components/landing-sections/Hero.tsx b/apps/web/src/components/landing-sections/Hero.tsx
index ab348352..9fcdf195 100644
--- a/apps/web/src/components/landing-sections/Hero.tsx
+++ b/apps/web/src/components/landing-sections/Hero.tsx
@@ -48,16 +48,23 @@ const Hero = () => {
         className="w-full lg:max-w-3xl space-y-3 text-center"
       >
         <motion.div
-          variants={itemVariants}
-          className="flex items-center justify-center gap-2 mb-4 [will-change:transform,opacity] motion-reduce:transition-none motion-reduce:transform-none"
+          initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+          transition={{ duration: 1, ease: "easeOut", type: "spring" }}
+          className="flex items-center justify-center gap-2 p-[1px] bg-gradient-to-r from-[#823ed6] via-[#411FC6] to-[#823ed6]  w-max rounded-full mx-auto relative overflow-hidden"
         >
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border">
-            <span className="text-text-secondary text-sm font-medium">Backed by</span>
+
+
+          <div className="inline-flex items-center gap-2 px-16 justify-center py-1.5 rounded-full bg-[#131313] backdrop-blur-sm overflow-hidden relative ">
+            <SvgLines className="absolute right-0 z-10" />
+            <SvgLines className="absolute left-0 z-10 -scale-x-[1]" />
+
+            <span className=" text-sm font-medium">Backed by</span>
             <div className="flex items-center gap-1.5">
-              <div className="w-5 h-5 bg-gradient-to-br from-[#FF6154] to-[#FF8C00] rounded flex items-center justify-center">
-                <span className="text-white text-xs font-bold">U</span>
+              <div className="w-5 h-5 bg-gradient-to-br from-[#f85446] to-[#ff8000] rounded-sm flex items-center justify-center">
+                <span className=" text-xs font-bold">U</span>
               </div>
-              <span className="text-white text-sm font-medium">sers</span>
+              <span className=" text-sm font-medium">sers</span>
             </div>
           </div>
         </motion.div>
@@ -105,3 +112,43 @@ const Hero = () => {
 };
 
 export default Hero;
+
+const SvgLines = ({ ...props }) => {
+  return (
+    <svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} >
+      <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" />
+      <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" stroke-width="0.733333" />
+      <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" stroke-width="0.733333" />
+      <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" stroke-width="0.733333" />
+      <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" stroke-width="0.733333" />
+      <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" stroke-width="0.733333" />
+      <defs>
+        <linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#8D49E2" />
+          <stop offset="1" stop-color="#411FC6" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#411FC6" />
+          <stop offset="1" stop-color="#8D49E2" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#411FC6" />
+          <stop offset="1" stop-color="#8D49E2" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#411FC6" />
+          <stop offset="1" stop-color="#8D49E2" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#8D49E2" />
+          <stop offset="0.5" stop-color="#411FC6" />
+          <stop offset="1" stop-color="#6734D4" />
+        </linearGradient>
+        <linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#8D49E2" />
+          <stop offset="1" stop-color="#411FC6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/landing-sections/navbar.tsx b/apps/web/src/components/landing-sections/navbar.tsx
index a38855cb..614d7fee 100644
--- a/apps/web/src/components/landing-sections/navbar.tsx
+++ b/apps/web/src/components/landing-sections/navbar.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useState } from "react";
-import PrimaryButton from "../ui/custom-button";
+import PrimaryButton, { SecondaryButton } from "../ui/custom-button";
 import { motion, useScroll, useMotionValueEvent } from "framer-motion";
 import Image from "next/image";
 import { Terminal, Github, Menu, X } from "lucide-react";
@@ -64,7 +64,7 @@ const Navbar = () => {
         >
           {isOpen ? <X size={28} /> : <Menu size={28} />}
         </button>
-        <div className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2">
+        <Link href={`/`} className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2">
           <div className="w-8 md:w-10 aspect-square overflow-hidden relative">
             <Image
               src="/assets/logo.svg"
@@ -74,7 +74,7 @@ const Navbar = () => {
             />
           </div>
           <span>Opensox AI</span>
-        </div>
+        </Link>
       </div>
       <div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-text-tertiary">
         {links.map((link, index) => {
@@ -93,15 +93,17 @@ const Navbar = () => {
           );
         })}
       </div>
-      <div className="flex items-center gap-3">
+      <div className="hidden lg:flex items-center gap-3">
         <Link
           href="https://github.com/apsinghdev/opensox"
           target="_blank"
           rel="noopener noreferrer"
-          className="hidden lg:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
+          className=""
         >
-          <Github className="w-5 h-5" />
-          <span className="text-sm font-medium">Contribute</span>
+          <SecondaryButton classname="px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-4 md:text-base">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" className="size-5" width="32" height="32" viewBox="0 0 32 32"><path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z"></path></svg>
+            <span className="text-sm font-medium">Contribute</span>
+          </SecondaryButton>
         </Link>
         <Link href="/dashboard/home" className="cursor-pointer z-30">
           <PrimaryButton classname="px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-3 md:text-base">
diff --git a/apps/web/src/components/ui/accordion.tsx b/apps/web/src/components/ui/accordion.tsx
index 9bcccfdf..f22c7bb1 100644
--- a/apps/web/src/components/ui/accordion.tsx
+++ b/apps/web/src/components/ui/accordion.tsx
@@ -28,13 +28,13 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center hover:text-ox-purple justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center  justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 hover:text-ox-purple" />
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 " />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
diff --git a/apps/web/src/components/ui/custom-button.tsx b/apps/web/src/components/ui/custom-button.tsx
index 803c0b05..2005a15e 100644
--- a/apps/web/src/components/ui/custom-button.tsx
+++ b/apps/web/src/components/ui/custom-button.tsx
@@ -28,4 +28,20 @@ const PrimaryButton = ({ children, animate = true, classname, onClick }: { child
     )
 }
 
+export const SecondaryButton = ({ children, animate = true, classname, onClick }: { children: React.ReactNode, animate?: boolean, classname?: string, onClick?: () => void }) => {
+    const transition = {
+        duration: 0.1,
+        ease: "easeInOut",
+    }
+    return (
+        <motion.button
+            onClick={onClick}
+            className={cn("flex gap-2  border-[#eaeaea] items-center justify-center  px-5 py-3 rounded-[16px] relative [box-shadow:0px_0px_13px_0px_#eaeaea90_inset] hover:[box-shadow:0px_0px_13px_0px_#eaeaeaaa_inset] transition-all duration-100 text-white font-medium", classname)}
+            transition={animate ? transition : undefined}
+        >
+            {children}
+        </motion.button>
+    )
+}
+
 export default PrimaryButton