diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index e5962de..f405b48 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -61,8 +61,8 @@ const InlinedHeroBrand = ({
 
             <div className="w-full md:w-1/2 flex justify-start md:justify-end">
               <div className="flex flex-wrap gap-3">
-                <Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="[perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateX(20deg)_rotateY(20deg)_translateZ(50px)]"/>
-                <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} className="[perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateX(20deg)_rotateY(20deg)_translateZ(50px)]" />
+                <a href={primaryButton.href} className="inline-flex items-center justify-center h-9 px-6 rounded-none text-sm bg-blue-600 text-white hover:bg-blue-700 transition-colors [perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateX(30deg)_rotateY(30deg)_translateZ(70px)]">{primaryButton.text}</a>
+                <a href={secondaryButton.href} className="inline-flex items-center justify-center h-9 px-6 rounded-none text-sm bg-blue-600 text-white hover:bg-blue-700 transition-colors [perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateX(30deg)_rotateY(30deg)_translateZ(70px)]">{secondaryButton.text}</a>
               </div>
             </div>
           </div>