diff --git a/app/routes/change_password.tsx b/app/routes/change_password.tsx
new file mode 100644
index 0000000..0979632
--- /dev/null
+++ b/app/routes/change_password.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+
+export default function CancerLINCForgotPassowrd() {
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-500">
+            <div className="bg-white w-full max-w-md p-8">
+                <a href="/">
+                    <p
+                        className="text-gray-500 text-sm mt-2"
+                        text-gray-500
+                        text-sm
+                        mt-2
+                    >
+                        {"<"} Back to login
+                    </p>
+                </a>
+                <p>
+                    <br></br>
+                    <br></br>
+                </p>
+                <div className="flex flex-col items-center mb-6">
+                    <h2 className="text-2xl text-gray-800">Change Password</h2>
+                    <p className="text-gray-500 text-center text-sm mt-2">
+                        Create a new password. It must include 12 characters and
+                        at least one number.
+                    </p>
+                </div>
+
+                <form className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            New Password
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Retype New Password
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <button
+                        type="button"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800"
+                        onClick={() => (window.location.href = "/")}
+                    >
+                        LOGIN
+                    </button>
+                    <p>
+                        <br></br>
+                    </p>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/create_account.tsx b/app/routes/create_account.tsx
new file mode 100644
index 0000000..09b4ec4
--- /dev/null
+++ b/app/routes/create_account.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+
+export default function CancerLINCForgotPassowrd() {
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-500">
+            <div className="bg-white w-full max-w-md p-8">
+                <a href="/">
+                    <p
+                        className="text-gray-500 text-sm mt-2"
+                        text-gray-500
+                        text-sm
+                        mt-2
+                    >
+                        {"<"} Back to login
+                    </p>
+                </a>
+                <p>
+                    <br></br>
+                    <br></br>
+                </p>
+                <div className="flex flex-col items-center mb-6">
+                    <h2 className="text-2xl text-gray-800">Create Account</h2>
+                </div>
+
+                <form className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Email
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Username
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Password
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Confirm Password
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <label className="flex items-center space-x-2">
+                        <input type="checkbox" className="rounded" />
+                        <span className="block text-sm font-medium text-gray-700 mb-1">
+                            I have read and consent to the{" "}
+                            <a href="#" className="text-semi-bold underline">
+                                Terms and Conditions
+                            </a>
+                        </span>
+                    </label>
+                    <button
+                        type="button"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800"
+                        onClick={() =>
+                            (window.location.href = "/verify-signup")
+                        }
+                    >
+                        SIGN UP
+                    </button>
+                    <p>
+                        <br></br>
+                    </p>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/forgot_pass.tsx b/app/routes/forgot_pass.tsx
new file mode 100644
index 0000000..e58ab68
--- /dev/null
+++ b/app/routes/forgot_pass.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+export default function CancerLINCForgotPassowrd() {
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-500">
+            <div className="bg-white w-full max-w-md p-8">
+                <a href="/">
+                    <p
+                        className="text-gray-500 text-sm mt-2"
+                        text-gray-500
+                        text-sm
+                        mt-2
+                    >
+                        {"<"} Back to login
+                    </p>
+                </a>
+                <p>
+                    <br></br>
+                    <br></br>
+                </p>
+                <div className="flex flex-col items-center mb-6">
+                    <h2 className="text-2xl text-gray-800">Forgot Password?</h2>
+                </div>
+
+                <form className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Enter email associated with the account
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <button
+                        type="button"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800"
+                        onClick={() => (window.location.href = "/verify-email")}
+                    >
+                        CONTINUE
+                    </button>
+                    <p>
+                        <br></br>
+                    </p>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
new file mode 100644
index 0000000..6e4bd9a
--- /dev/null
+++ b/app/routes/login.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+
+export default function CancerLINCLogin() {
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-500">
+            <div className="bg-white w-full max-w-md p-8">
+                <div className="flex flex-col items-center mb-6">
+                    <img
+                        src="/public/CancerLINC-Logo-1.png"
+                        alt="CancerLINC Logo"
+                        className="w-40 mb-4"
+                    />
+                    <h2 className="text-2xl text-gray-800">Login</h2>
+                    <p className="text-gray-500 text-center text-sm mt-2">
+                        Enter your email address and password to access your
+                        account.
+                    </p>
+                </div>
+
+                <form
+                    className="space-y-4"
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        window.location.href = "/";
+                    }}
+                >
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Email Address
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <span className="text-gray-400 mr-2 text-lg">
+                                ✉
+                            </span>
+                            <input
+                                type="email"
+                                placeholder="Enter your email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Password
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <span className="text-gray-400 mr-2 text-lg">
+                                🔒
+                            </span>
+                            <input
+                                type="password"
+                                placeholder="Enter your password"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="flex items-center justify-between text-sm">
+                        <label className="flex items-center space-x-2">
+                            <input type="checkbox" className="rounded" />
+                            <span>Remember Me</span>
+                        </label>
+                        <a
+                            href="/forgot-pass"
+                            className="text-blue-600 hover:underline"
+                        >
+                            Forgot Password?
+                        </a>
+                    </div>
+
+                    <button
+                        type="submit"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800"
+                    >
+                        LOGIN
+                    </button>
+
+                    <div className="flex items-center justify-center text-gray-500 text-sm mt-2">
+                        <span className="mx-2">- OR -</span>
+                    </div>
+
+                    <button
+                        type="button"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800"
+                        onClick={() =>
+                            (window.location.href = "/create-account")
+                        }
+                    >
+                        CREATE AN ACCOUNT
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/verify_email.tsx b/app/routes/verify_email.tsx
new file mode 100644
index 0000000..ec46409
--- /dev/null
+++ b/app/routes/verify_email.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+
+export default function CancerLINCForgotPassowrd() {
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-500">
+            <div className="bg-white w-full max-w-md p-8">
+                <a href="/">
+                    <p
+                        className="text-gray-500 text-sm mt-2"
+                        text-gray-500
+                        text-sm
+                        mt-2
+                    >
+                        {"<"} Back to login
+                    </p>
+                </a>
+                <p>
+                    <br></br>
+                    <br></br>
+                </p>
+                <div className="flex flex-col items-center mb-6">
+                    <h2 className="text-2xl text-gray-800">Verify Email</h2>
+                    <p className="text-gray-500 text-center text-sm mt-2">
+                        A verification code was sent to xxxxx@email.com. Please
+                        enter it below. <br></br>
+                        The code will expire in 10 minutes.
+                    </p>
+                </div>
+
+                <form className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Enter Verification Code
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <button
+                        type="button"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800"
+                        onClick={() =>
+                            (window.location.href = "/change-password")
+                        }
+                    >
+                        CONTINUE
+                    </button>
+                    <a href="/">
+                        <p
+                            className="text-gray-500 text-center text-sm mt-2"
+                            text-gray-500
+                            text-sm
+                            mt-2
+                        >
+                            Send New Code
+                        </p>
+                    </a>
+                    <p>
+                        <br></br>
+                    </p>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/verify_signup.tsx b/app/routes/verify_signup.tsx
new file mode 100644
index 0000000..33517c3
--- /dev/null
+++ b/app/routes/verify_signup.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+
+export default function CancerLINCForgotPassowrd() {
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-500">
+            <div className="bg-white w-full max-w-md p-8">
+                <a href="/">
+                    <p
+                        className="text-gray-500 text-sm mt-2"
+                        text-gray-500
+                        text-sm
+                        mt-2
+                    >
+                        {"<"} Back to login
+                    </p>
+                </a>
+                <p>
+                    <br></br>
+                    <br></br>
+                </p>
+                <div className="flex flex-col items-center mb-6">
+                    <h2 className="text-2xl text-gray-800">Verify Email</h2>
+                    <p className="text-gray-500 text-center text-sm mt-2">
+                        A verification code was sent to xxxxx@email.com. Please
+                        enter it below. <br></br>
+                        The code will expire in 10 minutes.
+                    </p>
+                </div>
+
+                <form className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Enter Verification Code
+                        </label>
+                        <div className="flex items-center border rounded-lg px-3 py-2">
+                            <input
+                                type="email"
+                                className="w-full outline-none text-gray-700"
+                            />
+                        </div>
+                    </div>
+                    <button
+                        type="button"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800"
+                        onClick={() => (window.location.href = "/")}
+                    >
+                        CONTINUE
+                    </button>
+                    <a href="/">
+                        <p
+                            className="text-gray-500 text-center text-sm mt-2"
+                            text-gray-500
+                            text-sm
+                            mt-2
+                        >
+                            Send New Code
+                        </p>
+                    </a>
+                    <p>
+                        <br></br>
+                    </p>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/public/CancerLINC-Logo-1.png b/public/CancerLINC-Logo-1.png
new file mode 100644
index 0000000..f84f594
Binary files /dev/null and b/public/CancerLINC-Logo-1.png differ