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..4c73ec3 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 Register from "./views/Register";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/register" element={<Register />} />
     </Routes>
   );
 }
diff --git a/src/views/Register.tsx b/src/views/Register.tsx
new file mode 100644
index 0000000..18a7f5d
--- /dev/null
+++ b/src/views/Register.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+// import {Link} from 'react-router-dom'
+import { FcGoogle } from "react-icons/fc";
+import { AiFillFacebook } from "react-icons/ai";
+function Register() {
+  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">
+              <a className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center"  href="#"><FcGoogle className="mr-2" /> Google</a>
+              <a className="border shadow-lg hover:shadow-xl px-6 py-2 flex items-center" href="#"><AiFillFacebook className="mr-2" /> Facebook</a>
+          </div>
+          <div className="flex flex-col mb-4">
+            <label>Email</label>
+            <input type="email" className="border relative bg-gray-100 p-2" />
+          </div >
+          <div className="flex flex-col  mb-4">
+            <label>Password</label>
+            <input type="password" className="border relative bg-gray-100 p-2" />
+          </div>
+
+          <div className="flex flex-col ">
+            <label>Confirm 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 Up</button>
+          <div>
+            <p className="text-center mt-8">Login to your existing account</p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+export default Register;
\ No newline at end of file