diff --git a/app/(clear)/layout.tsx b/app/(clear)/layout.tsx
new file mode 100644
index 0000000..df396bc
--- /dev/null
+++ b/app/(clear)/layout.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const clearLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  return <div>{children}</div>;
+};
+
+export default clearLayout;
diff --git a/app/(clear)/login/page.tsx b/app/(clear)/login/page.tsx
new file mode 100644
index 0000000..a54c709
--- /dev/null
+++ b/app/(clear)/login/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;
diff --git a/app/(clear)/signup/page.tsx b/app/(clear)/signup/page.tsx
new file mode 100644
index 0000000..9d7c5ab
--- /dev/null
+++ b/app/(clear)/signup/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>Sign Up</div>;
+};
+
+export default page;
diff --git a/shared/lib/delayButtonClick.ts b/shared/lib/delayButtonClick.ts
new file mode 100644
index 0000000..64146e2
--- /dev/null
+++ b/shared/lib/delayButtonClick.ts
@@ -0,0 +1,11 @@
+import { useRouter } from "next/navigation";
+
+export const delayButtonClick = (
+  router: ReturnType<typeof useRouter>,
+  href: string,
+  timeout: number = 300
+) => {
+  setTimeout(() => {
+    router.push(href);
+  }, timeout);
+};
diff --git a/shared/ui/navbar.tsx b/shared/ui/navbar.tsx
index 2695738..71a1353 100644
--- a/shared/ui/navbar.tsx
+++ b/shared/ui/navbar.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import V from "next/link";
 import {
   Button,
   Link,
@@ -12,8 +11,9 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
 } from "@heroui/react";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import React, { useState } from "react";
+import { delayButtonClick } from "../lib/delayButtonClick";
 
 export const AcmeLogo = () => {
   return (
@@ -29,7 +29,9 @@ export const AcmeLogo = () => {
 };
 
 const NavbarUI = () => {
+  const router = useRouter();
   const pathNameNow = usePathname();
+
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const navbarItems = [
@@ -86,17 +88,16 @@ const NavbarUI = () => {
       </NavbarContent>
       <NavbarContent justify="end">
         <NavbarItem className="hidden lg:flex">
-          <Link href="#" className="font-medium">
+          <Link href="/login" className="font-medium">
             Login
           </Link>
         </NavbarItem>
         <NavbarItem>
           <Button
-            as={Link}
             color="primary"
-            href="#"
             variant="solid"
             radius="sm"
+            onPress={() => delayButtonClick(router, "/signup")}
           >
             Sign Up
           </Button>