diff --git a/components/common/Header/Header.js b/components/common/Header/Header.js
index 2217dacb..ae734e81 100644
--- a/components/common/Header/Header.js
+++ b/components/common/Header/Header.js
@@ -5,7 +5,7 @@ import Image from 'next/image';
 import Navbar from '../Navbar';
 import { IconContainer, IconsDiv, StyledHeader } from './HeaderStyles';
 import { getRandomBackground, icons } from './config';
-
+ 
 const Header = (props) => {
   const { image, text } = props;
   return (
diff --git a/components/common/Navbar.js b/components/common/Navbar.js
index eb20f087..093162e9 100644
--- a/components/common/Navbar.js
+++ b/components/common/Navbar.js
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import styles from '@styles/Navbar.module.css';
 import { useState, useEffect, useRef } from 'react';
 import Image from 'node_modules/next/image';
+import { FaKey } from 'react-icons/fa';
 
 const Navbar = () => {
   const checkboxRef = useRef();
@@ -368,6 +369,14 @@ const Navbar = () => {
               Contact Us
             </a>
           </li>
+          <li>
+          <a
+              onClick={() => router.push('/Login')}
+              className="flex py-2 px-2 text-white hover:bg-sky-400 hover:text-black rounded-lg transition duration-500"
+            >
+              <FaKey />
+            </a>
+          </li>
         </ul>
       </nav>
     </>
diff --git a/package.json b/package.json
index ce3c36df..db20b76e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "mongoose": "^7.2.1",
-    "next": "^12.3.3",
+    "next": "^12.3.4",
     "next-connect": "^1.0.0",
     "next-images": "^1.8.5",
     "prettier": "^2.8.1",
diff --git a/components/Login.js b/pages/Login.js
similarity index 92%
rename from components/Login.js
rename to pages/Login.js
index b27106b8..494c56b9 100644
--- a/components/Login.js
+++ b/pages/Login.js
@@ -10,6 +10,7 @@ import {
 } from "node_modules/@fortawesome/free-solid-svg-icons/index";
 import { useContext, useState } from "react";
 import { Store } from "utils/Store/Store";
+import Link from 'next/link'
 
 const Login = () => {
   const { state, dispatch } = useContext(Store);
@@ -95,6 +96,10 @@ const Login = () => {
               <span>Forgot Password ?</span>
             </label>
             <button>Sign In</button>
+            <h1 className="font-bold text-lg p-4">Or</h1>
+           <Link href='/Signup'>
+              <a className="font-sans text-sm  font-bold text-white hover:italic bg-gradient-to-r from-indigo-800 to-purple-600 rounded-md px-24 py-1">Signup</a>
+            </Link>
           </form>
         </div>
       </main>
diff --git a/pages/Signup.js b/pages/Signup.js
new file mode 100644
index 00000000..203e7a9b
--- /dev/null
+++ b/pages/Signup.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Signup = () => {
+  return (
+    <div>Signup</div>
+  )
+}
+
+export default Signup
\ No newline at end of file