diff --git a/apps/landing/src/app/(frontend)/_components/call-to-action.tsx b/apps/landing/src/app/(frontend)/_components/call-to-action.tsx
index 3b8e2a6..b7a608f 100644
--- a/apps/landing/src/app/(frontend)/_components/call-to-action.tsx
+++ b/apps/landing/src/app/(frontend)/_components/call-to-action.tsx
@@ -41,7 +41,7 @@ export function CallToAction() {
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <Button
                   size="lg"
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
+                  className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
                   onClick={() =>
                     window.open('https://discord.gg/imphnen', '_blank')
                   }
diff --git a/apps/landing/src/app/(frontend)/_components/header.tsx b/apps/landing/src/app/(frontend)/_components/header.tsx
index d7040d7..ba9a6fb 100644
--- a/apps/landing/src/app/(frontend)/_components/header.tsx
+++ b/apps/landing/src/app/(frontend)/_components/header.tsx
@@ -78,16 +78,16 @@ export function Header() {
           </Link>
         </nav>
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-x-2">
           <SimpleThemeToggle />
 
           <Button
-            className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
+            className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
             onClick={() =>
               window.open('https://discord.com/invite/imphnen', '_blank')
             }
           >
-            Gabung Discord
+            Login
           </Button>
 
           {/* Mobile Menu Button */}
@@ -143,8 +143,8 @@ export function Header() {
               target="_blank"
               className="mt-4"
             >
-              <Button className="mt-4 bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer">
-                Gabung Discord
+              <Button className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer">
+                Login
               </Button>
             </a>
           </nav>
diff --git a/apps/landing/src/app/(frontend)/_components/hero.tsx b/apps/landing/src/app/(frontend)/_components/hero.tsx
index 3dcb375..1910945 100644
--- a/apps/landing/src/app/(frontend)/_components/hero.tsx
+++ b/apps/landing/src/app/(frontend)/_components/hero.tsx
@@ -69,7 +69,7 @@ export function Hero() {
             <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
               <Button
                 size="lg"
-                className="w-full sm:w-auto bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
+                className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
                 onClick={() =>
                   window.open(
                     'https://facebook.com/groups/programmerhandal',
diff --git a/apps/landing/src/app/(frontend)/_components/learning-resources.tsx b/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
index b9e5157..9f39a99 100644
--- a/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
+++ b/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
@@ -112,7 +112,7 @@ export function LearningResources() {
               </p>
               <div className="flex flex-wrap gap-4">
                 <Button
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
+                  className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
                   onClick={() => window.open('/', '_blank')}
                 >
                   Mulai Kursus