diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ad2063a..3254ae1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import AppLayout from './pages/AppLayout';
 import Error from './pages/Error';
 import Game from './pages/Game';
 import About from './pages/About';
+import Login from './pages/Login';
 
 const router = createBrowserRouter([
     {
@@ -22,6 +23,8 @@ const router = createBrowserRouter([
             },
             { path: '/about', element: <About /> },
             { path: '/error', element: <Error /> },
+            { path: '/login', element: <Login />},
+            { path: '/signin', element: <Login />}
         ],
     },
 ]);
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
index b5b59e8..1f484fd 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -33,14 +33,23 @@ const Navbar: React.FC<NavbarProps> = ({
                         />
                     </button>
                 </div>
-                <div className="text-xl font-bold mt-2">
-                    <Button
-                        text="Sign In /Login"
-                        buttonSize="w-56 h-11"
-                        className="border-4"
-                        rounded="rounded-2xl"
-                    />
-                </div>
+                {isLoggedIn ? (
+                            <>
+
+                            </>
+                        ) : (
+                            <>
+                                <div className="text-xl font-bold mt-2">
+                                    <Button
+                                    text="Sign In /Login"
+                                    buttonSize="w-56 h-11"
+                                    className="border-4"
+                                    rounded="rounded-2xl"
+                                    />
+                                </div>
+                            </>
+                        )}
+               
             </div>
             {isOpen && (
                 <div className="fixed inset-0 flex z-20">
diff --git a/frontend/src/library/button.tsx b/frontend/src/library/button.tsx
index c9ba58a..af848eb 100644
--- a/frontend/src/library/button.tsx
+++ b/frontend/src/library/button.tsx
@@ -15,6 +15,7 @@ type ButtonProps = {
     fontSize?: string;
     rounded?: string;
     buttonSize?: string;
+    type?: "submit" | "reset" | "button"
     borderColor?: string;
     hoverColor?: string;
     hoverScale?: boolean;
@@ -36,11 +37,13 @@ const Button: React.FC<ButtonProps> = ({
     borderColor = 'border-black',
     hoverColor = 'hover:bg-lime-600',
     hoverScale = true,
+    type = 'button',
     onClick,
     className = '',
 }) => {
     return (
         <button
+            type={type}
             onClick={onClick}
             className={`text-stroke ${className} shadow-xl border-3 ${borderColor} font-kavoon ${textColor} ${buttonSize} ${rounded} ${fontSize} ${px} ${py} ${backgroundColor} transition-all duration-300 ${hoverScale ? 'transform hover:scale-105' : ''} ${hoverColor}`}
         >
diff --git a/frontend/src/library/input.tsx b/frontend/src/library/input.tsx
index 4f79b9d..f63dd6b 100644
--- a/frontend/src/library/input.tsx
+++ b/frontend/src/library/input.tsx
@@ -15,7 +15,7 @@ const Input: React.FC<Props> = ({
 }) => {
     return (
         <input
-            className={`w-[${width}] h-[${height}] bg-[#d9d9d9] border-4 border-black rounded-[20px] flex items-center justify-center text-center p-0 font-normal font-kavoon text-[23.2px] leading-[29px] text-black placeholder-white placeholder-opacity-50"`}
+            className={`w-${width} h-${height} bg-[#d9d9d9] border-4 border-black rounded-full flex items-center justify-center text-center p-0 font-normal font-kavoon text-[23.2px] leading-[29px] text-black placeholder-white placeholder-opacity-50"`}
             {...props}
         />
     );
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 0000000..bf760ac
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import Button from '../library/button';
+import Input from '../library/input';
+import Navbar from '../Navbar';
+import { Link } from 'react-router-dom';
+import '../index.css';
+
+const Login: React.FC = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [username, setUsername] = useState('');
+    
+    const handleLogin = () => {
+        setUsername('Username_7');
+        setIsLoggedIn(true);
+    };
+
+    const handleLogout = () => {
+        setUsername('');
+        setIsLoggedIn(false);
+    };
+
+    const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setEmail(event.target.value);
+    };
+
+    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPassword(event.target.value);
+    };
+
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        console.log('Form submitted');
+        // Handle form submission logic here
+    };
+
+    return (
+        <div className='min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative'>
+            <Navbar
+                isLoggedIn={true}                   //true here so that navbar does not render signin/login button
+                username={username}
+                onLogin={handleLogin}
+                onLogout={handleLogout}
+            />
+            <div className=' w-full flex justify-center items-center grow'>
+                <div className='flex flex-col justify-center items-center'>
+                <div className='flex justify-center'>
+                    <Button
+                        buttonSize="w-96 h-12"
+                        py="py-0"
+                        textColor="text-white"
+                        text="Login using Google"
+                        backgroundColor="bg-gray-300"
+                        hoverColor="hover:bg-gray-500"
+                        className='border-4 m-2 rounded-full'
+                        fontSize=' text-2xl'
+                    />
+                </div>
+                <div className='w-96 h-1 bg-neutral-300 my-3'></div>
+                <div>
+                    <form onSubmit={handleSubmit} className=''>
+                        <div className=''>
+                            <div className=' my-3'>
+                                <Input
+                                    id="email"
+                                    type="text"
+                                    onChange={handleEmailChange}
+                                    placeholder="Email Address"
+                                    width = "96"
+                                    height= "12"
+                                />
+                            </div>
+                            <div className='my-3'>
+                                <Input
+                                    id="pass"
+                                    type="password"
+                                    onChange={handlePasswordChange}
+                                    placeholder="Password"
+                                    width = "96"
+                                    height= "12"
+                                />
+                            </div>
+                            <div className='flex justify-center'>
+                                <Button
+                                    text="Login"
+                                    textColor="text-white"
+                                    py='0'
+                                    buttonSize="w-32 h-10"
+                                    className='border-4 rounded-full'
+                                    fontSize='text-2xl'
+                                    type='submit'
+                                />
+                            </div>
+                        </div>
+                    </form>
+                    <div>
+                        <div className='font-kavoon flex justify-center items-center my-3'>
+                            Don't have an account? <Link to="/signin" className=' text-blue-700 '> Sign in</Link>
+                        </div>
+                    </div>
+                </div>
+                </div>
+            </div>
+            
+        </div>
+    );
+};
+
+export default Login;
\ No newline at end of file