diff --git a/apps/web/components/sections/partner-bio.tsx b/apps/web/components/sections/partner-bio.tsx
index 8b092f8..fcca125 100644
--- a/apps/web/components/sections/partner-bio.tsx
+++ b/apps/web/components/sections/partner-bio.tsx
@@ -16,14 +16,24 @@ export function PartnerBio({ name, bio, imageUrl, quote }: PartnerBioProps) {
   return (
     <section className="py-24 relative overflow-hidden">
       <div className="container px-4 md:px-6">
-        <div className="flex flex-col items-center mb-16 text-center">
+        <div className="flex flex-col items-center mb-20 text-center relative z-10 w-full">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              className="inline-flex items-center justify-center p-3 rounded-2xl bg-primary/10 border border-primary/20 mb-6"
+            >
+              <span className="text-primary font-bold text-sm uppercase tracking-wider">Meet the Trader</span>
+            </motion.div>
             <motion.h2 
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
-                className="text-4xl md:text-6xl font-bold font-heading mb-4"
+                transition={{ delay: 0.1 }}
+                className="text-4xl md:text-5xl lg:text-7xl font-bold font-heading mb-4 leading-tight"
             >
-                A <span className="text-primary">proud</span> partner of <br /> {name}.
+                A proud partner of <br /> 
+                <span className="bg-gradient-to-b from-red-500 via-red-600 to-red-800 bg-clip-text text-transparent">{name}.</span>
             </motion.h2>
         </div>
 
@@ -36,21 +46,39 @@ export function PartnerBio({ name, bio, imageUrl, quote }: PartnerBioProps) {
             transition={{ duration: 0.8 }}
             className="flex flex-col items-center lg:items-start"
           >
-            <div className="relative w-full aspect-square max-w-md rounded-2xl overflow-hidden shadow-2xl group">
-              <Image
-                src={imageUrl}
-                alt={name}
-                fill
-                className="object-cover transition-transform duration-700 group-hover:scale-105"
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+            <div className="relative w-full aspect-[4/5] max-w-lg mx-auto lg:mx-0">
+              {/* Decorative background glow */}
+              <div className="absolute -inset-4 bg-primary/20 rounded-full blur-3xl opacity-50 -z-10" />
+              
+              <svg width="0" height="0" className="absolute">
+                <defs>
+                  <clipPath id="squircle-clip" clipPathUnits="objectBoundingBox">
+                    <path d="M 0,0.5 C 0,0 0,0 0.5,0 C 1,0 1,0 1,0.5 C 1,1 1,1 0.5,1 C 0,1 0,1 0,0.5 Z" />
+                  </clipPath>
+                </defs>
+              </svg>
+
+              <div 
+                className="relative w-full h-full overflow-hidden shadow-2xl group border-l-[6px] border-b-[6px] border-primary/20"
+                style={{ clipPath: "url(#squircle-clip)" }}
+              >
+                <Image
+                  src={imageUrl}
+                  alt={name}
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-105"
+                  priority
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80" />
+                
+                {quote && (
+                  <div className="absolute bottom-0 left-0 right-0 p-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
+                      <p className="text-xl md:text-2xl italic text-white font-medium leading-snug drop-shadow-md">&quot;{quote}&quot;</p>
+                      <p className="mt-4 font-bold text-primary text-sm uppercase tracking-widest">— {name}</p>
+                  </div>
+                )}
+              </div>
             </div>
-            {quote && (
-                <div className="mt-8 text-center lg:text-left">
-                    <p className="text-xl italic text-muted-foreground">&quot;{quote}&quot;</p>
-                    <p className="mt-2 font-bold text-primary">— {name}</p>
-                </div>
-            )}
           </motion.div>
 
           {/* Text Side */}
@@ -59,21 +87,30 @@ export function PartnerBio({ name, bio, imageUrl, quote }: PartnerBioProps) {
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8 }}
-            className="flex flex-col justify-center"
+            className="flex flex-col justify-center h-full"
           >
-            <h3 className="text-2xl md:text-3xl font-bold mb-6">About {name}.</h3>
-            <div className="space-y-4 text-muted-foreground text-lg leading-relaxed">
-              {bio.split('\n').map((paragraph, i) => (
-                <p key={i}>{paragraph}</p>
-              ))}
+            <div className="inline-block px-4 py-2 rounded-lg bg-muted text-muted-foreground font-semibold text-sm mb-6 w-fit border border-border">
+              About The Partner
+            </div>
+            
+            <h3 className="text-3xl md:text-4xl font-bold mb-8 font-heading">{name}</h3>
+            
+            <div className="space-y-6 text-muted-foreground text-lg leading-relaxed relative">
+              <div className="absolute left-0 top-2 bottom-2 w-1 bg-gradient-to-b from-primary to-transparent rounded-full opacity-50 hidden md:block" />
+              <div className="md:pl-6 space-y-6 text-justify">
+                {bio.split('\n').map((paragraph, i) => (
+                  <p key={i}>{paragraph}</p>
+                ))}
+              </div>
             </div>
-            <div className="mt-10">
+            
+            <div className="mt-12">
               <Button
                 size="lg"
-                className="rounded-full bg-primary hover:bg-red-700 text-white px-8"
+                className="rounded-xl bg-primary hover:bg-primary/90 text-white px-10 h-14 font-bold shadow-lg shadow-primary/20 transition-all hover:-translate-y-1"
                 asChild
               >
-                <Link href="/register">Start Trading</Link>
+                <Link href="/register">Start Trading Under {name.split(' ')[0]}</Link>
               </Button>
             </div>
           </motion.div>
diff --git a/apps/web/components/sections/partner-cta.tsx b/apps/web/components/sections/partner-cta.tsx
index 1912fcf..6d779db 100644
--- a/apps/web/components/sections/partner-cta.tsx
+++ b/apps/web/components/sections/partner-cta.tsx
@@ -14,49 +14,42 @@ export function PartnerCTA({ partnerName, message }: PartnerCTAProps) {
   return (
     <section className="py-24 relative overflow-hidden">
       {/* Background Decorative Elements */}
-      <div className="absolute inset-0 z-0">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[120px]" />
-      </div>
-
-      <div className="container px-4 md:px-6 relative z-10">
-        <div className="max-w-4xl mx-auto text-center">
-          <motion.h2
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            className="text-4xl md:text-6xl font-bold font-heading mb-8"
-          >
-            A message from <span className="text-primary">{partnerName.split(' ')[0]}</span>.
-          </motion.h2>
+      <div className="absolute inset-0 bg-transparent z-0" />
 
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ delay: 0.2 }}
-            className="mb-12"
-          >
-            <p className="text-xl md:text-2xl text-muted-foreground leading-relaxed italic">
-              {message || `Trade with the broker I trust. Join me at RestroFX and experience trading the way it was meant to be. Raw spreads, lightning-fast execution, and a platform that puts you first.`}
-            </p>
-          </motion.div>
+      <div className="container mx-auto max-w-7xl relative z-10">
+        <div className="relative rounded-[2rem] sm:rounded-[3rem] overflow-hidden bg-gradient-to-br from-primary via-red-600 to-red-700 p-8 sm:p-12 lg:p-24 shadow-2xl group text-center mx-auto max-w-[90%] sm:max-w-full">
+            {/* Animated Background Pattern */}
+            <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMDUiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmlkKSIvPjwvc3ZnPg==')] opacity-30 group-hover:opacity-40 transition-opacity duration-500"></div>
 
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            whileInView={{ opacity: 1, scale: 1 }}
-            viewport={{ once: true }}
-            transition={{ delay: 0.4 }}
-          >
-            <Button
-              size="lg"
-              className="rounded-full px-12 h-16 text-xl font-bold bg-primary text-white shadow-xl hover:bg-red-700 hover:scale-105 transition-all duration-300 group"
-              asChild
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.8 }}
+              className="relative z-10 space-y-8"
             >
-              <Link href="/register">
-                JOIN RESTROFX <ArrowRight className="ml-3 h-5 w-5 group-hover:translate-x-2 transition-transform" />
-              </Link>
-            </Button>
-          </motion.div>
+              <h2 className="text-4xl sm:text-6xl md:text-7xl font-bold font-heading text-white leading-tight">
+                A message from <br />
+                <span className="text-white/80 italic font-light">{partnerName.split(' ')[0]}.</span>
+              </h2>
+              <p className="text-lg sm:text-2xl text-white/90 font-light max-w-2xl mx-auto leading-relaxed italic">
+                &quot;{message}&quot;
+              </p>
+              <div className="pt-4 flex flex-col sm:flex-row gap-4 justify-center items-center">
+                  <Button
+                      size="lg"
+                      variant="secondary"
+                      className="w-full sm:w-auto rounded-full px-12 h-16 text-lg font-bold bg-white text-primary hover:bg-neutral-100 shadow-[0_20px_50px_rgba(0,0,0,0.3)] hover:-translate-y-2 hover:shadow-[0_30px_60px_rgba(220,0,0,0.4)] transition-all duration-500 group relative overflow-hidden active:scale-95"
+                      asChild
+                  >
+                      <Link href="/register">
+                          <span className="relative z-10 flex items-center justify-center">
+                              JOIN RESTROFX <ArrowRight className="ml-3 h-5 w-5 group-hover:translate-x-2 transition-transform duration-300" />
+                          </span>
+                      </Link>
+                  </Button>
+              </div>
+            </motion.div>
         </div>
       </div>
     </section>
diff --git a/apps/web/components/sections/partner-features.tsx b/apps/web/components/sections/partner-features.tsx
index cfc3ab6..9697aa7 100644
--- a/apps/web/components/sections/partner-features.tsx
+++ b/apps/web/components/sections/partner-features.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Card, CardContent, CardHeader, CardTitle } from "@crimsonfx/ui";
+
 import { Zap, Percent, Activity } from "lucide-react";
 
 export function PartnerFeatures() {
@@ -52,27 +52,24 @@ export function PartnerFeatures() {
               key={index}
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true, margin: "-100px" }}
+              viewport={{ once: true, margin: "-50px" }}
               transition={{ delay: index * 0.2, duration: 0.6 }}
-              whileHover={{ y: -5 }}
-              className="h-full"
+              className="h-full group p-6 sm:p-8 rounded-[2rem] border-2 border-border hover:border-primary/50 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10 bg-background/50 backdrop-blur-md relative overflow-hidden"
             >
-              <Card className={`h-full relative overflow-hidden transition-all duration-300 border-2 ${feature.borderColor} bg-background/50 backdrop-blur-sm group hover:shadow-xl`}>
-                <div
-                  className={`absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br ${feature.bgGradient}`}
-                />
-                <CardHeader className="relative z-10 pb-4">
-                  <div className={`p-3 rounded-xl bg-muted/50 border border-border w-fit mb-4 group-hover:scale-110 transition-transform duration-300`}>
-                    <Icon className={`h-6 w-6 ${feature.iconColor}`} />
-                  </div>
-                  <CardTitle className="text-xl font-bold leading-tight">
-                    {feature.title}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="relative z-10 text-muted-foreground">
-                  <p className="leading-relaxed text-sm">{feature.description}</p>
-                </CardContent>
-              </Card>
+              <div
+                className={`absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 bg-gradient-to-br ${feature.bgGradient} -z-10`}
+              />
+              <div className="flex flex-col h-full z-10 relative">
+                <div className={`p-4 rounded-2xl bg-muted/50 border border-border w-fit mb-6 group-hover:scale-110 group-hover:-translate-y-1 transition-all duration-300 shadow-sm`}>
+                  <Icon className={`h-8 w-8 ${feature.iconColor} group-hover:rotate-6 transition-transform`} />
+                </div>
+                <h3 className="text-2xl font-bold font-heading mb-4 leading-tight group-hover:text-primary transition-colors duration-300">
+                  {feature.title}
+                </h3>
+                <p className="leading-relaxed text-muted-foreground text-base sm:text-lg flex-grow">
+                  {feature.description}
+                </p>
+              </div>
             </motion.div>
           );
         })}
diff --git a/apps/web/components/sections/partner-hero.tsx b/apps/web/components/sections/partner-hero.tsx
index 4e419ea..8645cba 100644
--- a/apps/web/components/sections/partner-hero.tsx
+++ b/apps/web/components/sections/partner-hero.tsx
@@ -11,17 +11,14 @@ export function PartnerHero() {
   return (
     <section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-transparent pt-20 pb-12">
       {/* Background Elements */}
-      <div className="absolute inset-0 z-0">
-        <div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-background via-background/60 to-transparent z-10" />
-        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-background via-background/20 to-transparent z-10" />
-        
-        <div className="hero-glow-1 animate-pulse-slow opacity-20" />
-        <div className="hero-glow-2 animate-pulse-slow opacity-20" style={{ animationDelay: "2s" }} />
-        
-        {/* Grid Pattern */}
-        <div className="absolute inset-0 bg-grid-pattern bg-grid-pattern-size opacity-[0.03] z-0" />
+      <div className="absolute inset-x-0 inset-y-0 overflow-hidden">
+        <div className="absolute top-0 right-0 w-1/2 h-full bg-primary/5 transform skew-x-12 origin-top-right z-0" />
+        <div className="absolute bottom-0 left-0 w-1/3 h-2/3 bg-primary/5 transform -skew-x-12 origin-bottom-left z-0" />
       </div>
 
+      {/* Grid Pattern */}
+      <div className="absolute inset-0 bg-grid-pattern bg-grid-pattern-size opacity-[0.03] z-0 pointer-events-none" />
+
       <div className="container px-4 md:px-6 relative z-10">
         <div className="flex flex-col items-center text-center max-w-4xl mx-auto">
           <motion.div
@@ -36,7 +33,7 @@ export function PartnerHero() {
                transition={{ delay: 0.2, duration: 0.8, ease: "easeOut" }}
                className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs md:text-sm font-bold mb-8 backdrop-blur-md"
             >
-              <div className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />
+              <div className="h-2 w-2 rounded-full bg-primary animate-pulse" />
               OFFICIAL PARTNER
             </motion.div>
 
@@ -67,18 +64,29 @@ export function PartnerHero() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.5, duration: 1, ease: [0.22, 1, 0.36, 1] }}
+              className="flex flex-col sm:flex-row gap-4 justify-center items-center w-full"
             >
               <Button
                 size="lg"
-                className="rounded-full px-12 h-16 text-lg font-bold bg-primary text-white shadow-[0_20px_50px_rgba(187,0,0,0.3)] hover:bg-red-700 hover:-translate-y-2 hover:shadow-[0_30px_60px_rgba(187,0,0,0.4)] transition-all duration-500 group relative overflow-hidden active:scale-95 border-none"
+                className="w-full sm:w-auto rounded-xl px-12 h-16 text-lg font-bold bg-primary text-white shadow-[0_20px_50px_rgba(187,0,0,0.3)] hover:bg-red-700 hover:scale-105 transition-all duration-300 group relative overflow-hidden border-none"
                 asChild
               >
                 <Link href="/register">
                   <span className="relative z-10 flex items-center justify-center">
-                    Start Trading <ArrowRight className="ml-3 h-5 w-5 group-hover:translate-x-2 transition-transform duration-300" />
+                    Start Trading <ArrowRight className="ml-3 h-5 w-5 group-hover:translate-x-1 transition-transform" />
                   </span>
                 </Link>
               </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="w-full sm:w-auto rounded-xl px-12 h-16 text-lg font-bold border-2 hover:bg-muted/50 transition-all duration-300 backdrop-blur-sm"
+                asChild
+              >
+                <Link href="#about">
+                  Learn More
+                </Link>
+              </Button>
             </motion.div>
           </motion.div>
         </div>