diff --git a/docusaurus.config.js b/docusaurus.config.js
index c0f0cce41..b178e3738 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -71,24 +71,35 @@ const config = {
       navbar: {
         title: "30 Days of CPP",
         logo: {
-          alt: "30 Days of CPP Programming Logo",
-          src: "img/logo.svg",
+            alt: "30 Days of CPP Programming Logo",
+            src: "img/logo.svg",
         },
         items: [
-          {
-            type: "docSidebar",
-            sidebarId: "tutorialSidebar",
-            position: "left",
-            label: "Tutorial",
-          },
-          { to: "/blog", label: "Blog", position: "left" },
-          {
-            href: "https://github.com/subhadipbhowmik/30-Days-Of-CPP/",
-            label: "GitHub",
-            position: "right",
-          },
+            {
+                type: "docSidebar",
+                sidebarId: "tutorialSidebar",
+                position: "left",
+                label: "Tutorial",
+            },
+            { to: "/blog", label: "Blog", position: "left" },
+            {
+                href: "https://github.com/subhadipbhowmik/30-Days-Of-CPP/",
+                label: "GitHub",
+                position: "right",
+            },
+            {
+                to: "/signup", 
+                label: "Sign Up",
+                position: "right",
+            },
+            {
+                to: "/login", 
+                label: "Login",
+                position: "right",
+            },
         ],
-      },
+    },
+    
       footer: {
         style: "dark",
         links: [
diff --git a/siteConfig.js b/siteConfig.js
index 7bb87fae9..05a6be5b6 100644
--- a/siteConfig.js
+++ b/siteConfig.js
@@ -5,12 +5,16 @@ new Crawler({
   startUrls: [
     "https://subhadipbhowmik.github.io/30-Days-Of-CPP/",
     "https://subhadipbhowmik.github.io/30-Days-Of-CPP/docs/",
+    "https://subhadipbhowmik.github.io/30-Days-Of-CPP/signup",
+    "https://subhadipbhowmik.github.io/30-Days-Of-CPP/login",
   ],
   renderJavaScript: false,
   sitemaps: ["https://subhadipbhowmik.github.io/30-Days-Of-CPP/sitemap.xml"],
   ignoreCanonicalTo: false,
   discoveryPatterns: [
     "https://subhadipbhowmik.github.io/30-Days-Of-CPP/docs/**",
+    "https://subhadipbhowmik.github.io/30-Days-Of-CPP/signup",
+    "https://subhadipbhowmik.github.io/30-Days-Of-CPP/login",
   ],
   schedule: "at 19:12 on Tuesday",
   actions: [
diff --git a/src/css/custom.css b/src/css/custom.css
index c0c2d03f0..12e8c93b0 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -30,4 +30,73 @@
   .footer .col {
       --ifm-col-width: 33%;
 }
-}
\ No newline at end of file
+}
+
+
+body {
+  background-color: #f9f9f9;
+}
+
+.form-container {
+  max-width: 400px;
+  margin: 50px auto;
+  padding: 20px;
+  background: #f7f7f7;
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.form-container h1 {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.form-container form {
+  margin-top: 20px;
+}
+
+.form-container input[type="text"],
+.form-container input[type="email"],
+.form-container input[type="password"],
+.form-container button {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 15px;
+  border: none;
+  border-radius: 5px;
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+.form-container input[type="text"],
+.form-container input[type="email"],
+.form-container input[type="password"] {
+  background: #f0f0f0;
+}
+
+.form-container button {
+  background: linear-gradient(45deg, #4CAF50, #2E8B57);
+  color: #f9f9f9;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.form-container button:hover {
+  background: linear-gradient(45deg, #2E8B57, #4CAF50);
+}
+
+.form-container p {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.form-container a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.form-container a:hover {
+  text-decoration: underline;
+}
+
diff --git a/src/pages/login.md b/src/pages/login.md
new file mode 100644
index 000000000..1b779372b
--- /dev/null
+++ b/src/pages/login.md
@@ -0,0 +1,17 @@
+---
+id: login
+title: Login
+---
+
+# Login
+
+<link rel="stylesheet" type="text/css" href="/css/custom.css"></link>
+
+<div class="form-container">
+    <form>
+        <input type="email" name="email" placeholder="Email" required></input>
+        <input type="password" name="password" placeholder="Password" required></input>
+        <button type="submit">Log In</button>
+    </form>
+    <p>Don't have an account yet? [Sign Up](signup)</p>
+</div>
diff --git a/src/pages/signup.md b/src/pages/signup.md
new file mode 100644
index 000000000..1331b91ba
--- /dev/null
+++ b/src/pages/signup.md
@@ -0,0 +1,20 @@
+---
+id: signup
+title: Sign Up
+---
+
+# Sign Up
+
+<link rel="stylesheet" type="text/css" href="/css/custom.css"></link>
+
+<div class="form-container">
+    <form>
+        <input type="text" name="username" placeholder="Username" required></input>
+        <input type="email" name="email" placeholder="Email" required></input>
+        <input type="password" name="password" placeholder="Password" required></input>
+        <button type="submit">Sign Up</button>
+    </form>
+    <p>Already have an account? [Log In](login)</p>
+</div>
+
+