diff --git a/package-lock.json b/package-lock.json
index 2e43fc2..7a788cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "firebase": "^9.16.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.7.1",
         "react-router-dom": "^6.7.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.4",
@@ -14720,6 +14721,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -28078,6 +28087,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index d0e0443..a618510 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "firebase": "^9.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
diff --git a/src/App.tsx b/src/App.tsx
index b3af05b..a9498ad 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,13 @@ import React from "react";
 import { Routes, Route } from "react-router-dom";
 import "./App.css";
 import Home from "./views/Home";
+import Login from "./views/Login";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/login" element={<Login />} />
     </Routes>
   );
 }
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 5c07a16..af1e419 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,17 +1,20 @@
-import React from 'react'
-import useHeader from '../hooks/useHeader'
+import React from "react";
+import useHeader from "../hooks/useHeader";
 
 function Home() {
-  
+
+  // extract the header from the hook
+  // Header extracted will be used to determine the current page
+
   // extract the header from the hook
-  // Header extracted will be used to determine the current page    
-  const {header} = useHeader("Home")
-  
+  // Header extracted will be used to determine the current page
+  const { header } = useHeader("Home");
+
   return (
     <div className="text-red-400 text-4xl flex justify-center items-center h-[100vh] text-center">
       This the {header} Page
     </div>
-  )
+  );
 }
 
-export default Home
\ No newline at end of file
+export default Home;
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
new file mode 100644
index 0000000..cab2e9d
--- /dev/null
+++ b/src/views/Login.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import useHeader from "../hooks/useHeader";
+import { FcGoogle } from "react-icons/fc";
+import { AiFillFacebook } from "react-icons/ai";
+
+function Login() {
+  return (
+    <div className="relative w-full h-screen bg-zinc-900/90">
+      <div className="flex justify-center items-center h-full">
+        <form className="max-w-[400px] w-full mx-auto bg-white p-8">
+          <h2 className="text-4xl font-bold text-center py-4">THE FORCE</h2>
+          <div className="flex justify-between py-8">
+            <p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
+              <FcGoogle className="mr-2" /> Google
+            </p>
+            <p className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center">
+              <AiFillFacebook className="mr-2" /> Facebook
+            </p>
+          </div>
+          <div className="flex flex-col mb-4">
+            <label>Username</label>
+            <input type="text" className="border relative bg-gray-100 p-2" />
+          </div>
+          <div className="flex flex-col">
+            <label>Password</label>
+            <input
+              type="password"
+              className="border relative bg-gray-100 p-2"
+            />
+          </div>
+          <button className="w-full py-4 mt-8 bg-zinc-900/90 text-white">
+            Sign In
+          </button>
+          <div>
+            <p className="flex items-center mt-2">
+              <input type="checkbox" className="mr-2" />
+              Remember Me
+            </p>
+            <p className="text-center mt-8">Create an account</p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Login;