diff --git a/components/Auth/ConfirmEmail/index.jsx b/components/Auth/ConfirmEmail/index.jsx
deleted file mode 100644
index 5b14749..0000000
--- a/components/Auth/ConfirmEmail/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// import React from 'react'
-
-// const ConfirmEmail = () => {
-//     return (
-//         <div className="auth h-screen">
-//             <div className='flex justify-center items-center w-full h-full'>
-//                 <div className='lg:min-w-[50%] lg:max-w-[900px] px-5 w-full bg-opacity-10 border mx-2 border-gray-800 rounded-md backdrop-filter backdrop-blur-lg bg-gray-200 pb-8'>
-//                     <div className='w-full -mt-12 flex justify-center'>
-//                         <div className='lg:w-[8rem] w-[6rem] ring-2 ring-primary rounded-full overflow-hidden'>
-//                             <img alt='Pic' src='https://templates.iqonic.design/muzik/html/images/login/user.png' />
-//                         </div>
-//                     </div>
-//                     <div>
-//                         <div className='lg:w-full'>
-//                             <img src='https://templates.iqonic.design/muzik/html/images/login/mail.png' alt='email' />
-//                         </div>
-//                     </div>
-//                     <div className='mt-6 text-gray-200'>
-//                         <p className='md:text-7xl text-3xl'>Success !</p>
-//                         <p className='md:text-xl text-md'>A email has been send to youremail@domain.com. Please check for an email from company and click on the included link to reset your password.</p>
-//                     </div>
-//                     <button className='mt-6 text-lg text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full'>
-//                         back to Home
-//                     </button>
-//                 </div>
-
-//             </div>
-//         </div>
-//     )
-// }
-
-// export default ConfirmEmail
diff --git a/components/Auth/ConfirmEmail/index.tsx b/components/Auth/ConfirmEmail/index.tsx
new file mode 100644
index 0000000..85c77af
--- /dev/null
+++ b/components/Auth/ConfirmEmail/index.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+const ConfirmEmail = () => {
+  return (
+    <div className="auth h-screen">
+      <div className="flex justify-center items-center w-full h-full">
+        <div className="lg:min-w-[50%] lg:max-w-[900px] px-5 w-full bg-opacity-10 border mx-2 border-gray-800 rounded-md backdrop-filter backdrop-blur-lg bg-gray-200 pb-8">
+          <div className="w-full -mt-12 flex justify-center">
+            <div className="lg:w-[8rem] w-[6rem] ring-2 ring-primary rounded-full overflow-hidden">
+              <img
+                alt="Pic"
+                src="https://templates.iqonic.design/muzik/html/images/login/user.png"
+              />
+            </div>
+          </div>
+          <div>
+            <div className="lg:w-full">
+              <img
+                src="https://templates.iqonic.design/muzik/html/images/login/mail.png"
+                alt="email"
+              />
+            </div>
+          </div>
+          <div className="mt-6 text-gray-200">
+            <p className="md:text-7xl text-3xl">Success !</p>
+            <p className="md:text-xl text-md">
+              A email has been send to youremail@domain.com. Please check for an
+              email from company and click on the included link to reset your
+              password.
+            </p>
+          </div>
+          <button className="mt-6 text-lg text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full">
+            back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmEmail;
diff --git a/components/Auth/LoginPage/index.jsx b/components/Auth/LoginPage/index.jsx
deleted file mode 100644
index e8229d9..0000000
--- a/components/Auth/LoginPage/index.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// import React from "react";
-// import { useRouter } from "next/router";
-
-// const LoginPage = () => {
-//   const router = useRouter();
-//   return (
-//     <div className="flex items-center h-full">
-//       <div className="flex flex-col items-center h-fit w-fit m-auto px-10 mobilexs:px-2 mobilexs:py-2 transition-all rounded-md mobile:px-5 mobile:py-5 py-10 backdrop-blur-2xl bg-white bg-opacity-10 text-white">
-//         <div>
-//           <h1 className="text-3xl text-center">Yokaa</h1>
-//           <h1 className="text-4xl font-bold text-center pt-3">Log In</h1>
-//         </div>
-//         <div>
-//           <form className="flex flex-col">
-//             <div className="flex flex-col py-2">
-//               <label for="email" className="py-2">
-//                 Email address
-//               </label>
-//               <input
-//                 type="email"
-//                 name="email"
-//                 className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
-//               />
-//             </div>
-//             <div className="flex flex-col py-2">
-//               <label for="password" className="py-2">
-//                 Password
-//               </label>
-//               <input
-//                 type="password"
-//                 name="password"
-//                 className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
-//               />
-//             </div>
-//           </form>
-//         </div>
-//         <div className="flex justify-start w-[-webkit-fill-available] py-2">
-//           You don't have an account ?
-//           <span
-//             className="text-primary text-left px-2 cursor-pointer"
-//             onClick={() => router.push("/signup")}
-//           >
-//             Sign up
-//           </span>
-//         </div>
-//         <button className="bg-primary hover:bg-opacity-80 transition-all w-full py-3 mt-3 rounded-lg text-white">
-//           Log in
-//         </button>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default LoginPage;
diff --git a/components/Auth/LoginPage/index.tsx b/components/Auth/LoginPage/index.tsx
new file mode 100644
index 0000000..4b7e8ed
--- /dev/null
+++ b/components/Auth/LoginPage/index.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+const LoginPage = () => {
+  const router = useRouter();
+  return (
+    <div className="flex items-center h-full">
+      <div className="flex flex-col items-center h-fit w-fit m-auto px-10 mobilexs:px-2 mobilexs:py-2 transition-all rounded-md mobile:px-5 mobile:py-5 py-10 backdrop-blur-2xl bg-white bg-opacity-10 text-white">
+        <div>
+          <h1 className="text-3xl text-center">Yokaa</h1>
+          <h1 className="text-4xl font-bold text-center pt-3">Log In</h1>
+        </div>
+        <div>
+          <form className="flex flex-col">
+            <div className="flex flex-col py-2">
+              <label htmlFor="email" className="py-2">
+                Email address
+              </label>
+              <input
+                type="email"
+                name="email"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col py-2">
+              <label htmlFor="password" className="py-2">
+                Password
+              </label>
+              <input
+                type="password"
+                name="password"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+          </form>
+        </div>
+        <div className="flex justify-start w-[-webkit-fill-available] py-2">
+          You don't have an account ?
+          <span
+            className="text-primary text-left px-2 cursor-pointer"
+            onClick={() => router.push("/signup")}
+          >
+            Sign up
+          </span>
+        </div>
+        <button className="bg-primary hover:bg-opacity-80 transition-all w-full py-3 mt-3 rounded-lg text-white">
+          Log in
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/components/Auth/ResetPassword/index.jsx b/components/Auth/ResetPassword/index.jsx
deleted file mode 100644
index 6397b35..0000000
--- a/components/Auth/ResetPassword/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// import React from 'react'
-
-// const ResetPassword = () => {
-//     return (
-//         <div className="auth h-screen">
-//             <div className='flex justify-center items-center w-full h-full'>
-//                 <div className='lg:max-w-[40%] px-6 w-full bg-opacity-10 border border-gray-700 rounded-md backdrop-filter backdrop-blur-lg bg-gray-200 pb-8'>
-//                     <div className='w-full -mt-12 flex justify-center'>
-//                         <div className='w-[8rem] ring-2 ring-primary rounded-full overflow-hidden'>
-//                             <img alt='Pic' src={'https://templates.iqonic.design/muzik/html/images/login/user.png'} />
-//                         </div>
-//                     </div>
-//                     <div className='mt-6'>
-//                         <p className=' text-gray-200 lg:text-7xl text-3xl'>Reset password</p>
-//                         <p className='mt-6 md:text-xl text-md text-gray-100'>Enter your email address and we'll send you an email with instructions to reset your password </p>
-//                         <form className='flex flex-col mt-3'>
-//                             <label className='text-gray-300 font-bold my-2'>Password</label>
-//                             <input type="email" required placeholder='Enter email' className="p-3 bg-transparent border-2 rounded-lg " />
-//                         </form>
-
-//                     </div>
-//                     <button className='mt-6 text-lg  text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full'>
-//                         Reset password
-//                     </button>
-//                 </div>
-
-//             </div>
-//         </div>
-//     )
-// }
-
-// export default ResetPassword
diff --git a/components/Auth/ResetPassword/index.tsx b/components/Auth/ResetPassword/index.tsx
new file mode 100644
index 0000000..e1febe2
--- /dev/null
+++ b/components/Auth/ResetPassword/index.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+const ResetPassword = () => {
+  return (
+    <div className="auth h-screen">
+      <div className="flex justify-center items-center w-full h-full">
+        <div className="lg:max-w-[40%] px-6 w-full bg-opacity-10 border border-gray-700 rounded-md backdrop-filter backdrop-blur-lg bg-gray-200 pb-8">
+          <div className="w-full -mt-12 flex justify-center">
+            <div className="w-[8rem] ring-2 ring-primary rounded-full overflow-hidden">
+              <img
+                alt="Pic"
+                src={
+                  "https://templates.iqonic.design/muzik/html/images/login/user.png"
+                }
+              />
+            </div>
+          </div>
+          <div className="mt-6">
+            <p className=" text-gray-200 lg:text-7xl text-3xl">
+              Reset password
+            </p>
+            <p className="mt-6 md:text-xl text-md text-gray-100">
+              Enter your email address and we'll send you an email with
+              instructions to reset your password{" "}
+            </p>
+            <form className="flex flex-col mt-3">
+              <label className="text-gray-300 font-bold my-2">Password</label>
+              <input
+                type="email"
+                required
+                placeholder="Enter email"
+                className="p-3 bg-transparent border-2 rounded-lg "
+              />
+            </form>
+          </div>
+          <button className="mt-6 text-lg  text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full">
+            Reset password
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;
diff --git a/components/Auth/SignupPage/index.jsx b/components/Auth/SignupPage/index.jsx
deleted file mode 100644
index 0e46f2a..0000000
--- a/components/Auth/SignupPage/index.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// import React from "react";
-// import { useRouter } from "next/router";
-
-// const SignupPage = () => {
-//   const router = useRouter();
-//   return (
-//     <div className="flex items-center h-full">
-//       <div className="flex flex-col items-center h-fit w-fit m-auto px-10 mobilexs:px-2 mobilexs:py-2 transition-all rounded-md mobile:px-5 mobile:py-5 py-10 backdrop-blur-2xl bg-white bg-opacity-10 text-white">
-//         <div>
-//           <h1 className="text-3xl text-center">Yokaa</h1>
-//           <h1 className="text-4xl font-bold text-center pt-3">Sign Up</h1>
-//         </div>
-//         <div>
-//           <form className="flex flex-col">
-//             <div className="flex flex-col py-2">
-//               <label for="name" className="py-2">
-//                 Your Full Name
-//               </label>
-//               <input
-//                 type="text"
-//                 name="name"
-//                 className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80 mobilexs:w-72 transition-all py-2 rounded-md outline-none"
-//               />
-//             </div>
-//             <div className="flex flex-col py-2">
-//               <label for="email" className="py-2">
-//                 Email address
-//               </label>
-//               <input
-//                 type="email"
-//                 name="email"
-//                 className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
-//               />
-//             </div>
-//             <div className="flex flex-col py-2">
-//               <label for="password" className="py-2">
-//                 Password
-//               </label>
-//               <input
-//                 type="password"
-//                 name="password"
-//                 className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
-//               />
-//             </div>
-//           </form>
-//         </div>
-//         <div className="flex justify-between w-[-webkit-fill-available] py-5 accent-primary">
-//           <div>
-//             <input type="checkbox" className="rounded-md " />
-//             <label className="px-2">
-//               I accpet
-//               <span className="text-primary px-2">Terms and Conditions</span>
-//             </label>
-//           </div>
-//           <p onClick={() => router.push("/login")} className="cursor-pointer">
-//             Log In
-//           </p>
-//         </div>
-//         <button className="bg-primary w-full py-3 mt-3 rounded-lg text-white hover:bg-opacity-80 transition-all">
-//           Sign up
-//         </button>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default SignupPage;
diff --git a/components/Auth/SignupPage/index.tsx b/components/Auth/SignupPage/index.tsx
new file mode 100644
index 0000000..3e748e8
--- /dev/null
+++ b/components/Auth/SignupPage/index.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+const SignupPage = () => {
+  const router = useRouter();
+  return (
+    <div className="flex items-center h-full">
+      <div className="flex flex-col items-center h-fit w-fit m-auto px-10 mobilexs:px-2 mobilexs:py-2 transition-all rounded-md mobile:px-5 mobile:py-5 py-10 backdrop-blur-2xl bg-white bg-opacity-10 text-white">
+        <div>
+          <h1 className="text-3xl text-center">Yokaa</h1>
+          <h1 className="text-4xl font-bold text-center pt-3">Sign Up</h1>
+        </div>
+        <div>
+          <form className="flex flex-col">
+            <div className="flex flex-col py-2">
+              <label htmlFor="name" className="py-2">
+                Your Full Name
+              </label>
+              <input
+                type="text"
+                name="name"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80 mobilexs:w-72 transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col py-2">
+              <label htmlFor="email" className="py-2">
+                Email address
+              </label>
+              <input
+                type="email"
+                name="email"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col py-2">
+              <label htmlFor="password" className="py-2">
+                Password
+              </label>
+              <input
+                type="password"
+                name="password"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+          </form>
+        </div>
+        <div className="flex justify-between w-[-webkit-fill-available] py-5 accent-primary">
+          <div>
+            <input type="checkbox" className="rounded-md " />
+            <label className="px-2">
+              I accpet
+              <span className="text-primary px-2">Terms and Conditions</span>
+            </label>
+          </div>
+          <p onClick={() => router.push("/login")} className="cursor-pointer">
+            Log In
+          </p>
+        </div>
+        <button className="bg-primary w-full py-3 mt-3 rounded-lg text-white hover:bg-opacity-80 transition-all">
+          Sign up
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPage;