diff --git a/.vscode/settings.json b/.vscode/settings.json
index 990a0ee..d57e2f3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -25,6 +25,8 @@
     "labelClassName",
     "buttonClassName",
     "leftNodeClassName",
-    "rightNodeClassName"
+    "rightNodeClassName",
+    "buttonVariants",
+    "cva"
   ]
 }
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index f2f9eba..5356358 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -8,11 +8,14 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
-        newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
-        newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
+        newsPrimary:
+          'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
+        newsPrimaryOutline:
+          'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
+        newsSecondary:
+          'border-[3px] bg-white hover:shadow-lg active:shadow-2xl border-[#2E2F7C] text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] text-lg hover:border-[#4C5CA0] transition active:border-[#6970B4]',
         icon: '',
-        link: '',
+        link: 'font-semibold text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] transition',
       },
       size: {
         default: 'h-[50px] w-[150px]',
diff --git a/app/layouts/news/form-forgot-password.tsx b/app/layouts/news/form-forgot-password.tsx
index a465631..20bfd97 100644
--- a/app/layouts/news/form-forgot-password.tsx
+++ b/app/layouts/news/form-forgot-password.tsx
@@ -22,7 +22,7 @@ export const FormForgotPassword = () => {
           </div>
 
           {/* Tombol Masuk */}
-          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md py-2">
             Reset Password
           </Button>
         </form>
diff --git a/app/layouts/news/form-login.tsx b/app/layouts/news/form-login.tsx
index fc7d128..bd31a6b 100644
--- a/app/layouts/news/form-login.tsx
+++ b/app/layouts/news/form-login.tsx
@@ -87,7 +87,6 @@ export const FormLogin = () => {
                   setIsLoginOpen(false)
                   setIsForgetOpen(true)
                 }}
-                className="font-semibold text-[#2E2F7C]"
                 variant="link"
                 size="fit"
               >
@@ -98,7 +97,7 @@ export const FormLogin = () => {
             <Button
               disabled={disabled}
               type="submit"
-              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+              className="w-full rounded-md py-2"
             >
               Masuk
             </Button>
@@ -113,7 +112,6 @@ export const FormLogin = () => {
               setIsLoginOpen(false)
               setIsRegisterOpen(true)
             }}
-            className="font-semibold text-[#2E2F7C]"
             variant="link"
             size="fit"
           >
diff --git a/app/layouts/news/form-register.tsx b/app/layouts/news/form-register.tsx
index cc64940..15470b6 100644
--- a/app/layouts/news/form-register.tsx
+++ b/app/layouts/news/form-register.tsx
@@ -122,7 +122,7 @@ export const FormRegister = () => {
             <Button
               disabled={disabled}
               type="submit"
-              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+              className="w-full rounded-md py-2"
             >
               Daftar
             </Button>
@@ -137,7 +137,6 @@ export const FormRegister = () => {
               setIsLoginOpen(true)
               setIsRegisterOpen(false)
             }}
-            className="font-semibold text-[#2E2F7C]"
             variant="link"
             size="fit"
           >
diff --git a/app/layouts/news/form-subscription.tsx b/app/layouts/news/form-subscription.tsx
index 6491dff..7ea083f 100644
--- a/app/layouts/news/form-subscription.tsx
+++ b/app/layouts/news/form-subscription.tsx
@@ -79,7 +79,7 @@ export default function FormSubscription() {
           <Button
             disabled={disabled}
             type="submit"
-            className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+            className="mt-5 w-full rounded-md py-2"
           >
             Lanjutkan
           </Button>
diff --git a/app/layouts/news/header-menu-mobile.tsx b/app/layouts/news/header-menu-mobile.tsx
index 78829a7..edbde65 100644
--- a/app/layouts/news/header-menu-mobile.tsx
+++ b/app/layouts/news/header-menu-mobile.tsx
@@ -71,7 +71,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
                 >
                   <Button
                     variant="newsSecondary"
-                    className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
+                    className="w-full px-[35px] py-3 text-center sm:hidden"
                     type="submit"
                   >
                     Logout
@@ -80,7 +80,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
               ) : (
                 <Button
                   variant="newsSecondary"
-                  className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
+                  className="w-full px-[35px] py-3 text-center sm:hidden"
                   onClick={() => {
                     setIsMenuOpen(false)
                     setIsLoginOpen(true)
diff --git a/app/layouts/news/header-menu.tsx b/app/layouts/news/header-menu.tsx
index 8b8cdab..f525a57 100644
--- a/app/layouts/news/header-menu.tsx
+++ b/app/layouts/news/header-menu.tsx
@@ -1,5 +1,6 @@
 import { Link, useRouteLoaderData } from 'react-router'
 
+import { Button } from '~/components/ui/button'
 import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
 import type { loader } from '~/routes/_news'
 
@@ -17,15 +18,17 @@ export const HeaderMenu = () => {
     <>
       <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
         {menu?.map((item) => (
-          <Link
+          <Button
+            as={Link}
             key={item.id}
             to={`/category/${item.code}`}
+            size="fit"
             className={
-              'flex h-full items-center justify-center border-r border-white px-[35px]'
+              'flex h-full items-center justify-center border-r border-white px-[35px] text-xl'
             }
           >
             {item.name}
-          </Link>
+          </Button>
         ))}
         <HeaderSearch />
       </div>