diff --git a/resources/js/pages/homepage.tsx b/resources/js/pages/homepage.tsx
index 77309a4..c4ece3a 100644
--- a/resources/js/pages/homepage.tsx
+++ b/resources/js/pages/homepage.tsx
@@ -147,11 +147,17 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                         </nav>
 
                         <div className="flex items-center gap-4">
-                            <button className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest hover:opacity-70" onClick={() => setIsMenuOpen(!isMenuOpen)}>
-                                Menu
+                            <Link 
+                                href="/login" 
+                                className="hidden md:block border border-[#1e4a6d] px-6 py-2 text-[10px] font-bold uppercase tracking-widest transition-all hover:bg-[#1e4a6d] hover:text-white"
+                            >
+                                Login
+                            </Link>
+                            <button className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest hover:opacity-70 md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
                                 <div className="flex flex-col gap-1">
                                     <div className="h-[1px] w-5 bg-[#1e4a6d]"></div>
                                     <div className="h-[1px] w-5 bg-[#1e4a6d]"></div>
+                                    <div className="h-[1px] w-5 bg-[#1e4a6d]"></div>
                                 </div>
                             </button>
                         </div>
@@ -467,6 +473,12 @@ export default function Homepage({ categories = [], bestSellers, topSellingProdu
                             <a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:italic transition-all">Beranda</a>
                             <a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:italic transition-all">Produk</a>
                             <a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:italic transition-all">Tentang Kami</a>
+                            <Link 
+                                href="/login" 
+                                className="mt-4 border border-[#1e4a6d] px-12 py-4 text-sm font-bold uppercase tracking-[0.2em] transition-all hover:bg-[#1e4a6d] hover:text-white"
+                            >
+                                Login
+                            </Link>
                         </div>
                         <div className="mt-20 flex gap-6">
                             <Facebook size={24} className="hover:opacity-50 cursor-pointer" />