diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index cb55ca1f..9b587225 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,8 +1,10 @@
 import { useMediaQuery } from './hooks';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
+import { useNavigate } from 'react-router-dom';
 
 export default function Hero({ className = '' }: { className?: string }) {
   // const isMobile = window.innerWidth <= 768;
+  const navigate = useNavigate();
   const { isMobile } = useMediaQuery();
   return (
     <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col `}>
@@ -166,6 +168,20 @@ export default function Hero({ className = '' }: { className?: string }) {
           </div>
         </div>
       </div>
+      <div className="mt-[1vh] flex w-full items-center justify-center gap-[4vh]">
+        <button
+          className="rounded-xl bg-[#7D54D1] p-[2vh] font-medium  text-white transition-transform hover:scale-105"
+          onClick={() => navigate('/login')}
+        >
+          Sign up
+        </button>
+        <button
+          className="rounded-xl bg-[#7D54D1] p-[2vh] font-medium  text-white transition-transform hover:scale-105"
+          onClick={() => navigate('/register')}
+        >
+          Sign in
+        </button>
+      </div>
     </div>
   );
 }