diff --git a/dist/index.css b/dist/index.css
index 92028b9..f08023a 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -31,4 +31,225 @@
 .search-input::placeholder {
   color: #6c757d;
 }
+
+/* src/components/Login/Login.css */
+.login-container {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 40px 30px;
+  text-align: center;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    sans-serif;
+}
+.logo-container {
+  text-align: center;
+  margin-bottom: 24px;
+}
+.login-logo {
+  height: 40px;
+  width: auto;
+  max-width: 120px;
+  display: block;
+  margin: 0 auto;
+}
+.login-title {
+  text-align: center;
+  color: #647484;
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: 32px;
+}
+.login-form {
+  margin-bottom: 24px;
+}
+.form-group {
+  margin-bottom: 16px;
+}
+.form-control {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  font-size: 16px;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+  background-color: #f8f9fa;
+}
+.form-control:focus {
+  outline: none;
+  border-color: var(--theme-color, #684cbc);
+  background-color: white;
+}
+.form-control::placeholder {
+  color: #6c757d;
+}
+.form-check-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  font-size: 14px;
+}
+.form-check {
+  display: flex;
+  align-items: center;
+}
+.form-check-input {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--theme-color, #684cbc);
+}
+.form-check-label {
+  color: #647484;
+  cursor: pointer;
+  font-size: 14px;
+}
+.forgot-password-link {
+  color: #1c74cc;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none;
+}
+.forgot-password-link:hover {
+  text-decoration: underline;
+}
+.btn-signin {
+  width: 100%;
+  padding: 12px;
+  background-color: var(--theme-color, #684cbc);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-bottom: 16px;
+}
+.btn-signin:hover:not(.disabled) {
+  background-color: #5a3fa8;
+}
+.btn-signin.disabled {
+  background-color: #c5c5c5;
+  cursor: not-allowed;
+}
+.privacy-notice {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+  margin-bottom: 25px;
+}
+.privacy-link {
+  color: #408484;
+  text-decoration: none;
+}
+.privacy-link:hover {
+  text-decoration: underline;
+}
+.email-code-btn {
+  width: 100%;
+  padding: 12px;
+  background-color: transparent;
+  color: var(--theme-color, #684cbc);
+  border: 2px solid var(--theme-color, #684cbc);
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-bottom: 24px;
+  transition: all 0.2s;
+}
+.email-code-btn:hover {
+  background-color: var(--theme-color, #684cbc);
+  color: white;
+}
+.social-login {
+  margin-bottom: 24px;
+}
+.btn-facebook,
+.btn-apple,
+.btn-google {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: opacity 0.2s;
+}
+.btn-facebook {
+  background-color: #38569e;
+  color: white;
+}
+.btn-apple {
+  background-color: #000000;
+  color: white;
+}
+.btn-google {
+  background-color: white;
+  color: #333;
+  border: 1px solid #dadce0;
+}
+.btn-facebook:hover,
+.btn-apple:hover,
+.btn-google:hover {
+  opacity: 0.9;
+}
+.social-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+.create-account {
+  text-align: center;
+  font-size: 14px;
+  color: #647484;
+}
+.create-account-link {
+  color: #1c74cc;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+.create-account-link:hover {
+  text-decoration: underline;
+}
+.alert {
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  text-align: left;
+}
+.alert-danger {
+  background-color: #f8d7da;
+  border: 1px solid #f5c6cb;
+  color: #721c24;
+}
+@media (max-width: 768px) {
+  .login-container {
+    padding: 10px;
+  }
+  .login-card {
+    padding: 30px 20px;
+  }
+}
 /*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/dist/index.css.map b/dist/index.css.map
index 00c6bc4..6c98362 100644
--- a/dist/index.css.map
+++ b/dist/index.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBar/SearchBar.css"],"sourcesContent":[".search-bar {\n  position: relative;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.search-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 20px;\n  height: 20px;\n  opacity: 0.6;\n}\n\n.search-input {\n  width: 100%;\n  padding: 16px 16px 16px 48px;\n  border: 2px solid #e9ecef;\n  border-radius: 12px;\n  font-size: 16px;\n  background-color: #f8f9fa;\n  transition: border-color 0.2s, background-color 0.2s;\n  box-sizing: border-box;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--theme-color, #6f42c1);\n  background-color: white;\n}\n\n.search-input::placeholder {\n  color: #6c757d;\n}\n"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,aAAW;AACX,UAAQ,EAAE;AACZ;AAEA,CAAC;AACC,YAAU;AACV,QAAM;AACN,OAAK;AACL,aAAW,WAAW;AACtB,SAAO;AACP,UAAQ;AACR,WAAS;AACX;AAEA,CAAC;AACC,SAAO;AACP,WAAS,KAAK,KAAK,KAAK;AACxB,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,aAAW;AACX,oBAAkB;AAClB,cAAY,aAAa,IAAI,EAAE,iBAAiB;AAChD,cAAY;AACd;AAEA,CAXC,YAWY;AACX,WAAS;AACT,gBAAc,IAAI,aAAa,EAAE;AACjC,oBAAkB;AACpB;AAEA,CAjBC,YAiBY;AACX,SAAO;AACT;","names":[]}
\ No newline at end of file
+{"version":3,"sources":["../src/components/SearchBar/SearchBar.css","../src/components/Login/Login.css"],"sourcesContent":[".search-bar {\n  position: relative;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.search-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 20px;\n  height: 20px;\n  opacity: 0.6;\n}\n\n.search-input {\n  width: 100%;\n  padding: 16px 16px 16px 48px;\n  border: 2px solid #e9ecef;\n  border-radius: 12px;\n  font-size: 16px;\n  background-color: #f8f9fa;\n  transition: border-color 0.2s, background-color 0.2s;\n  box-sizing: border-box;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--theme-color, #6f42c1);\n  background-color: white;\n}\n\n.search-input::placeholder {\n  color: #6c757d;\n}\n",".login-container {\n  width: 100%;\n  max-width: 400px;\n  margin: 0 auto;\n  padding: 40px 30px;\n  text-align: center;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\n.logo-container {\n  text-align: center;\n  margin-bottom: 24px;\n}\n\n.login-logo {\n  height: 40px;\n  width: auto;\n  max-width: 120px;\n  display: block;\n  margin: 0 auto;\n}\n\n.login-title {\n  text-align: center;\n  color: #647484;\n  font-size: 24px;\n  font-weight: 500;\n  margin-bottom: 32px;\n}\n\n.login-form {\n  margin-bottom: 24px;\n}\n\n.form-group {\n  margin-bottom: 16px;\n}\n\n.form-control {\n  width: 100%;\n  padding: 12px 16px;\n  border: 2px solid #e1e5e9;\n  border-radius: 8px;\n  font-size: 16px;\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n  background-color: #f8f9fa;\n}\n\n.form-control:focus {\n  outline: none;\n  border-color: var(--theme-color, #684cbc);\n  background-color: white;\n}\n\n.form-control::placeholder {\n  color: #6c757d;\n}\n\n.form-check-container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 24px;\n  font-size: 14px;\n}\n\n.form-check {\n  display: flex;\n  align-items: center;\n}\n\n.form-check-input {\n  margin-right: 8px;\n  width: 16px;\n  height: 16px;\n  accent-color: var(--theme-color, #684cbc);\n}\n\n.form-check-label {\n  color: #647484;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.forgot-password-link {\n  color: #1c74cc;\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 14px;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.forgot-password-link:hover {\n  text-decoration: underline;\n}\n\n.btn-signin {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--theme-color, #684cbc);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  font-size: 16px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  margin-bottom: 16px;\n}\n\n.btn-signin:hover:not(.disabled) {\n  background-color: #5a3fa8;\n}\n\n.btn-signin.disabled {\n  background-color: #c5c5c5;\n  cursor: not-allowed;\n}\n\n.privacy-notice {\n  font-size: 12px;\n  color: #666;\n  line-height: 1.4;\n  margin-bottom: 25px;\n}\n\n.privacy-link {\n  color: #408484;\n  text-decoration: none;\n}\n\n.privacy-link:hover {\n  text-decoration: underline;\n}\n\n.email-code-btn {\n  width: 100%;\n  padding: 12px;\n  background-color: transparent;\n  color: var(--theme-color, #684cbc);\n  border: 2px solid var(--theme-color, #684cbc);\n  border-radius: 8px;\n  font-size: 16px;\n  font-weight: 500;\n  cursor: pointer;\n  margin-bottom: 24px;\n  transition: all 0.2s;\n}\n\n.email-code-btn:hover {\n  background-color: var(--theme-color, #684cbc);\n  color: white;\n}\n\n.social-login {\n  margin-bottom: 24px;\n}\n\n.btn-facebook,\n.btn-apple,\n.btn-google {\n  width: 100%;\n  padding: 12px;\n  border: none;\n  border-radius: 8px;\n  font-size: 16px;\n  font-weight: 500;\n  cursor: pointer;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: opacity 0.2s;\n}\n\n.btn-facebook {\n  background-color: #38569e;\n  color: white;\n}\n\n.btn-apple {\n  background-color: #000000;\n  color: white;\n}\n\n.btn-google {\n  background-color: white;\n  color: #333;\n  border: 1px solid #dadce0;\n}\n\n.btn-facebook:hover,\n.btn-apple:hover,\n.btn-google:hover {\n  opacity: 0.9;\n}\n\n.social-icon {\n  width: 20px;\n  height: 20px;\n  object-fit: contain;\n}\n\n.create-account {\n  text-align: center;\n  font-size: 14px;\n  color: #647484;\n}\n\n.create-account-link {\n  color: #1c74cc;\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.create-account-link:hover {\n  text-decoration: underline;\n}\n\n.alert {\n  padding: 12px 16px;\n  margin-bottom: 20px;\n  border-radius: 4px;\n  font-size: 14px;\n  text-align: left;\n}\n\n.alert-danger {\n  background-color: #f8d7da;\n  border: 1px solid #f5c6cb;\n  color: #721c24;\n}\n\n@media (max-width: 768px) {\n  .login-container {\n    padding: 10px;\n  }\n\n  .login-card {\n    padding: 30px 20px;\n  }\n}\n"],"mappings":"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","names":[]}
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
index 12446fe..f1f5013 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  Login: () => Login_default,
   SearchBar: () => SearchBar_default
 });
 module.exports = __toCommonJS(index_exports);
@@ -51,8 +52,190 @@ var SearchBar = ({ themeColor = "#6f42c1", searchIcon, placeholder = "Search eve
   ] });
 };
 var SearchBar_default = SearchBar;
+
+// src/components/Login/Login.js
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Login = ({
+  logo,
+  brandName = "StubHub",
+  title,
+  themeColor = "#684cbc",
+  showEmailCode = true,
+  showPrivacyNotice = false,
+  socialLogins = {
+    facebook: true,
+    apple: true,
+    google: true
+  },
+  facebookLogo,
+  appleLogo,
+  googleLogo,
+  onSubmit,
+  onForgotPassword,
+  onCreateAccount,
+  onEmailCode,
+  onSocialLogin,
+  privacyPolicyLink,
+  loading = false,
+  errorMessage = "",
+  isTypeScript = false
+}) => {
+  const [email, setEmail] = (0, import_react2.useState)("");
+  const [password, setPassword] = (0, import_react2.useState)("");
+  const [stayLoggedIn, setStayLoggedIn] = (0, import_react2.useState)(false);
+  const isFormValid = email.trim() !== "" && password.trim() !== "";
+  const displayTitle = title || `Sign in to ${brandName}`;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isFormValid && onSubmit) {
+      onSubmit({ email, password, stayLoggedIn });
+    }
+  };
+  const handleForgotPassword = () => {
+    if (onForgotPassword) {
+      onForgotPassword();
+    }
+  };
+  const handleCreateAccount = () => {
+    if (onCreateAccount) {
+      onCreateAccount();
+    }
+  };
+  const handleEmailCode = () => {
+    if (onEmailCode) {
+      onEmailCode();
+    }
+  };
+  const handleSocialLogin = (provider) => {
+    if (onSocialLogin) {
+      onSocialLogin(provider);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "login-container", style: { "--theme-color": themeColor }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "logo-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: logo, alt: brandName, className: "login-logo" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "login-title", children: displayTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className: "login-form", children: [
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "alert alert-danger", role: "alert", children: errorMessage }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "email",
+          placeholder: "Email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          className: "form-control",
+          required: isTypeScript
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "password",
+          placeholder: "Password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          className: "form-control",
+          required: isTypeScript
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "form-check-container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "form-check", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              className: "form-check-input",
+              id: "stayLoggedIn",
+              checked: stayLoggedIn,
+              onChange: (e) => setStayLoggedIn(e.target.checked)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "form-check-label", htmlFor: "stayLoggedIn", children: "Stay logged in" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "forgot-password-link",
+            onClick: handleForgotPassword,
+            children: "Forgot Password"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "submit",
+          className: `btn-signin ${!isFormValid || loading ? "disabled" : ""}`,
+          disabled: !isFormValid || loading,
+          children: loading ? "Signing in..." : "Sign in"
+        }
+      ),
+      showPrivacyNotice && privacyPolicyLink && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "privacy-notice", children: [
+        "By signing in or creating an account, you acknowledge and accept our",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: privacyPolicyLink, className: "privacy-link", children: "privacy policy" })
+      ] })
+    ] }),
+    showEmailCode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "email-code-btn", onClick: handleEmailCode, children: "Sign in with Email Code" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "social-login", children: [
+      socialLogins.facebook && facebookLogo && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          className: "btn-facebook",
+          onClick: () => handleSocialLogin("facebook"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: facebookLogo, alt: "Facebook", className: "social-icon" }),
+            "Log in with Facebook"
+          ]
+        }
+      ),
+      socialLogins.apple && appleLogo && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          className: "btn-apple",
+          onClick: () => handleSocialLogin("apple"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: appleLogo, alt: "Apple", className: "social-icon" }),
+            "Sign in with Apple"
+          ]
+        }
+      ),
+      socialLogins.google && googleLogo && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          className: "btn-google",
+          onClick: () => handleSocialLogin("google"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: googleLogo, alt: "Google", className: "social-icon" }),
+            "Sign in with Google"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "create-account", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+        "New to ",
+        brandName,
+        "? "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "create-account-link",
+          onClick: handleCreateAccount,
+          children: "Create account"
+        }
+      )
+    ] })
+  ] });
+};
+var Login_default = Login;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Login,
   SearchBar
 });
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/index.js.map b/dist/index.js.map
index f1748f9..96cc83e 100644
--- a/dist/index.js.map
+++ b/dist/index.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js","../src/components/SearchBar/SearchBar.js"],"sourcesContent":["export { default as SearchBar } from './components/SearchBar';\n","import React from 'react';\nimport './SearchBar.css';\n\nconst SearchBar = ({ themeColor = '#6f42c1', searchIcon, placeholder = \"Search events, artists, teams, and more\" }) => {\n  return (\n    <div className=\"search-bar\">\n      <img src={searchIcon} alt=\"Search\" className=\"search-icon\" />\n      <input \n        type=\"text\" \n        placeholder={placeholder}\n        className=\"search-input\"\n        style={{ '--theme-color': themeColor }}\n      />\n    </div>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAKd;AAFJ,IAAM,YAAY,CAAC,EAAE,aAAa,WAAW,YAAY,cAAc,0CAA0C,MAAM;AACrH,SACE,6CAAC,SAAI,WAAU,cACb;AAAA,gDAAC,SAAI,KAAK,YAAY,KAAI,UAAS,WAAU,eAAc;AAAA,IAC3D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,iBAAiB,WAAW;AAAA;AAAA,IACvC;AAAA,KACF;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}
\ No newline at end of file
+{"version":3,"sources":["../src/index.js","../src/components/SearchBar/SearchBar.js","../src/components/Login/Login.js"],"sourcesContent":["export { default as SearchBar } from './components/SearchBar';\nexport { default as Login } from './components/Login';\n","import React from 'react';\nimport './SearchBar.css';\n\nconst SearchBar = ({ themeColor = '#6f42c1', searchIcon, placeholder = \"Search events, artists, teams, and more\" }) => {\n  return (\n    <div className=\"search-bar\">\n      <img src={searchIcon} alt=\"Search\" className=\"search-icon\" />\n      <input \n        type=\"text\" \n        placeholder={placeholder}\n        className=\"search-input\"\n        style={{ '--theme-color': themeColor }}\n      />\n    </div>\n  );\n};\n\nexport default SearchBar;\n","import React, { useState } from 'react';\nimport './Login.css';\n\nconst Login = ({\n  logo,\n  brandName = 'StubHub',\n  title,\n  \n  themeColor = '#684cbc',\n  \n  showEmailCode = true,\n  showPrivacyNotice = false,\n  \n  socialLogins = {\n    facebook: true,\n    apple: true,\n    google: true\n  },\n  \n  facebookLogo,\n  appleLogo,\n  googleLogo,\n  \n  onSubmit,\n  onForgotPassword,\n  onCreateAccount,\n  onEmailCode,\n  onSocialLogin,\n  \n  privacyPolicyLink,\n  loading = false,\n  errorMessage = '',\n  \n  isTypeScript = false\n}) => {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [stayLoggedIn, setStayLoggedIn] = useState(false);\n\n  const isFormValid = email.trim() !== '' && password.trim() !== '';\n  const displayTitle = title || `Sign in to ${brandName}`;\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    if (isFormValid && onSubmit) {\n      onSubmit({ email, password, stayLoggedIn });\n    }\n  };\n\n  const handleForgotPassword = () => {\n    if (onForgotPassword) {\n      onForgotPassword();\n    }\n  };\n\n  const handleCreateAccount = () => {\n    if (onCreateAccount) {\n      onCreateAccount();\n    }\n  };\n\n  const handleEmailCode = () => {\n    if (onEmailCode) {\n      onEmailCode();\n    }\n  };\n\n  const handleSocialLogin = (provider) => {\n    if (onSocialLogin) {\n      onSocialLogin(provider);\n    }\n  };\n\n  return (\n    <div className=\"login-container\" style={{ '--theme-color': themeColor }}>\n      <div className=\"logo-container\">\n        <img src={logo} alt={brandName} className=\"login-logo\" />\n      </div>\n      \n      <h1 className=\"login-title\">{displayTitle}</h1>\n      \n      <form onSubmit={handleSubmit} className=\"login-form\">\n        {errorMessage && (\n          <div className=\"alert alert-danger\" role=\"alert\">\n            {errorMessage}\n          </div>\n        )}\n        \n        <div className=\"form-group\">\n          <input\n            type=\"email\"\n            placeholder=\"Email\"\n            value={email}\n            onChange={(e) => setEmail(e.target.value)}\n            className=\"form-control\"\n            required={isTypeScript}\n          />\n        </div>\n        \n        <div className=\"form-group\">\n          <input\n            type=\"password\"\n            placeholder=\"Password\"\n            value={password}\n            onChange={(e) => setPassword(e.target.value)}\n            className=\"form-control\"\n            required={isTypeScript}\n          />\n        </div>\n        \n        <div className=\"form-check-container\">\n          <div className=\"form-check\">\n            <input\n              type=\"checkbox\"\n              className=\"form-check-input\"\n              id=\"stayLoggedIn\"\n              checked={stayLoggedIn}\n              onChange={(e) => setStayLoggedIn(e.target.checked)}\n            />\n            <label className=\"form-check-label\" htmlFor=\"stayLoggedIn\">\n              Stay logged in\n            </label>\n          </div>\n          <button \n            type=\"button\" \n            className=\"forgot-password-link\" \n            onClick={handleForgotPassword}\n          >\n            Forgot Password\n          </button>\n        </div>\n        \n        <button\n          type=\"submit\"\n          className={`btn-signin ${!isFormValid || loading ? 'disabled' : ''}`}\n          disabled={!isFormValid || loading}\n        >\n          {loading ? 'Signing in...' : 'Sign in'}\n        </button>\n        \n        {showPrivacyNotice && privacyPolicyLink && (\n          <div className=\"privacy-notice\">\n            By signing in or creating an account, you acknowledge and accept our{' '}\n            <a href={privacyPolicyLink} className=\"privacy-link\">privacy policy</a>\n          </div>\n        )}\n      </form>\n      \n      {showEmailCode && (\n        <button className=\"email-code-btn\" onClick={handleEmailCode}>\n          Sign in with Email Code\n        </button>\n      )}\n      \n      <div className=\"social-login\">\n        {socialLogins.facebook && facebookLogo && (\n          <button \n            className=\"btn-facebook\" \n            onClick={() => handleSocialLogin('facebook')}\n          >\n            <img src={facebookLogo} alt=\"Facebook\" className=\"social-icon\" />\n            Log in with Facebook\n          </button>\n        )}\n        \n        {socialLogins.apple && appleLogo && (\n          <button \n            className=\"btn-apple\" \n            onClick={() => handleSocialLogin('apple')}\n          >\n            <img src={appleLogo} alt=\"Apple\" className=\"social-icon\" />\n            Sign in with Apple\n          </button>\n        )}\n        \n        {socialLogins.google && googleLogo && (\n          <button \n            className=\"btn-google\" \n            onClick={() => handleSocialLogin('google')}\n          >\n            <img src={googleLogo} alt=\"Google\" className=\"social-icon\" />\n            Sign in with Google\n          </button>\n        )}\n      </div>\n      \n      <div className=\"create-account\">\n        <span>New to {brandName}? </span>\n        <button \n          type=\"button\" \n          className=\"create-account-link\" \n          onClick={handleCreateAccount}\n        >\n          Create account\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default Login;\n"],"mappings":"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","names":["import_react","import_jsx_runtime"]}
\ No newline at end of file
diff --git a/dist/index.mjs b/dist/index.mjs
index 680eaee..a5bf56f 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -16,7 +16,189 @@ var SearchBar = ({ themeColor = "#6f42c1", searchIcon, placeholder = "Search eve
   ] });
 };
 var SearchBar_default = SearchBar;
+
+// src/components/Login/Login.js
+import React2, { useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Login = ({
+  logo,
+  brandName = "StubHub",
+  title,
+  themeColor = "#684cbc",
+  showEmailCode = true,
+  showPrivacyNotice = false,
+  socialLogins = {
+    facebook: true,
+    apple: true,
+    google: true
+  },
+  facebookLogo,
+  appleLogo,
+  googleLogo,
+  onSubmit,
+  onForgotPassword,
+  onCreateAccount,
+  onEmailCode,
+  onSocialLogin,
+  privacyPolicyLink,
+  loading = false,
+  errorMessage = "",
+  isTypeScript = false
+}) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [stayLoggedIn, setStayLoggedIn] = useState(false);
+  const isFormValid = email.trim() !== "" && password.trim() !== "";
+  const displayTitle = title || `Sign in to ${brandName}`;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isFormValid && onSubmit) {
+      onSubmit({ email, password, stayLoggedIn });
+    }
+  };
+  const handleForgotPassword = () => {
+    if (onForgotPassword) {
+      onForgotPassword();
+    }
+  };
+  const handleCreateAccount = () => {
+    if (onCreateAccount) {
+      onCreateAccount();
+    }
+  };
+  const handleEmailCode = () => {
+    if (onEmailCode) {
+      onEmailCode();
+    }
+  };
+  const handleSocialLogin = (provider) => {
+    if (onSocialLogin) {
+      onSocialLogin(provider);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "login-container", style: { "--theme-color": themeColor }, children: [
+    /* @__PURE__ */ jsx2("div", { className: "logo-container", children: /* @__PURE__ */ jsx2("img", { src: logo, alt: brandName, className: "login-logo" }) }),
+    /* @__PURE__ */ jsx2("h1", { className: "login-title", children: displayTitle }),
+    /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "login-form", children: [
+      errorMessage && /* @__PURE__ */ jsx2("div", { className: "alert alert-danger", role: "alert", children: errorMessage }),
+      /* @__PURE__ */ jsx2("div", { className: "form-group", children: /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "email",
+          placeholder: "Email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          className: "form-control",
+          required: isTypeScript
+        }
+      ) }),
+      /* @__PURE__ */ jsx2("div", { className: "form-group", children: /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "password",
+          placeholder: "Password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          className: "form-control",
+          required: isTypeScript
+        }
+      ) }),
+      /* @__PURE__ */ jsxs2("div", { className: "form-check-container", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "form-check", children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "checkbox",
+              className: "form-check-input",
+              id: "stayLoggedIn",
+              checked: stayLoggedIn,
+              onChange: (e) => setStayLoggedIn(e.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsx2("label", { className: "form-check-label", htmlFor: "stayLoggedIn", children: "Stay logged in" })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "forgot-password-link",
+            onClick: handleForgotPassword,
+            children: "Forgot Password"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "submit",
+          className: `btn-signin ${!isFormValid || loading ? "disabled" : ""}`,
+          disabled: !isFormValid || loading,
+          children: loading ? "Signing in..." : "Sign in"
+        }
+      ),
+      showPrivacyNotice && privacyPolicyLink && /* @__PURE__ */ jsxs2("div", { className: "privacy-notice", children: [
+        "By signing in or creating an account, you acknowledge and accept our",
+        " ",
+        /* @__PURE__ */ jsx2("a", { href: privacyPolicyLink, className: "privacy-link", children: "privacy policy" })
+      ] })
+    ] }),
+    showEmailCode && /* @__PURE__ */ jsx2("button", { className: "email-code-btn", onClick: handleEmailCode, children: "Sign in with Email Code" }),
+    /* @__PURE__ */ jsxs2("div", { className: "social-login", children: [
+      socialLogins.facebook && facebookLogo && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          className: "btn-facebook",
+          onClick: () => handleSocialLogin("facebook"),
+          children: [
+            /* @__PURE__ */ jsx2("img", { src: facebookLogo, alt: "Facebook", className: "social-icon" }),
+            "Log in with Facebook"
+          ]
+        }
+      ),
+      socialLogins.apple && appleLogo && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          className: "btn-apple",
+          onClick: () => handleSocialLogin("apple"),
+          children: [
+            /* @__PURE__ */ jsx2("img", { src: appleLogo, alt: "Apple", className: "social-icon" }),
+            "Sign in with Apple"
+          ]
+        }
+      ),
+      socialLogins.google && googleLogo && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          className: "btn-google",
+          onClick: () => handleSocialLogin("google"),
+          children: [
+            /* @__PURE__ */ jsx2("img", { src: googleLogo, alt: "Google", className: "social-icon" }),
+            "Sign in with Google"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "create-account", children: [
+      /* @__PURE__ */ jsxs2("span", { children: [
+        "New to ",
+        brandName,
+        "? "
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "create-account-link",
+          onClick: handleCreateAccount,
+          children: "Create account"
+        }
+      )
+    ] })
+  ] });
+};
+var Login_default = Login;
 export {
+  Login_default as Login,
   SearchBar_default as SearchBar
 };
 //# sourceMappingURL=index.mjs.map
\ No newline at end of file
diff --git a/dist/index.mjs.map b/dist/index.mjs.map
index e836e9e..22830fb 100644
--- a/dist/index.mjs.map
+++ b/dist/index.mjs.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBar/SearchBar.js"],"sourcesContent":["import React from 'react';\nimport './SearchBar.css';\n\nconst SearchBar = ({ themeColor = '#6f42c1', searchIcon, placeholder = \"Search events, artists, teams, and more\" }) => {\n  return (\n    <div className=\"search-bar\">\n      <img src={searchIcon} alt=\"Search\" className=\"search-icon\" />\n      <input \n        type=\"text\" \n        placeholder={placeholder}\n        className=\"search-input\"\n        style={{ '--theme-color': themeColor }}\n      />\n    </div>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":";AAAA,OAAO,WAAW;AAKd,SACE,KADF;AAFJ,IAAM,YAAY,CAAC,EAAE,aAAa,WAAW,YAAY,cAAc,0CAA0C,MAAM;AACrH,SACE,qBAAC,SAAI,WAAU,cACb;AAAA,wBAAC,SAAI,KAAK,YAAY,KAAI,UAAS,WAAU,eAAc;AAAA,IAC3D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,iBAAiB,WAAW;AAAA;AAAA,IACvC;AAAA,KACF;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}
\ No newline at end of file
+{"version":3,"sources":["../src/components/SearchBar/SearchBar.js","../src/components/Login/Login.js"],"sourcesContent":["import React from 'react';\nimport './SearchBar.css';\n\nconst SearchBar = ({ themeColor = '#6f42c1', searchIcon, placeholder = \"Search events, artists, teams, and more\" }) => {\n  return (\n    <div className=\"search-bar\">\n      <img src={searchIcon} alt=\"Search\" className=\"search-icon\" />\n      <input \n        type=\"text\" \n        placeholder={placeholder}\n        className=\"search-input\"\n        style={{ '--theme-color': themeColor }}\n      />\n    </div>\n  );\n};\n\nexport default SearchBar;\n","import React, { useState } from 'react';\nimport './Login.css';\n\nconst Login = ({\n  logo,\n  brandName = 'StubHub',\n  title,\n  \n  themeColor = '#684cbc',\n  \n  showEmailCode = true,\n  showPrivacyNotice = false,\n  \n  socialLogins = {\n    facebook: true,\n    apple: true,\n    google: true\n  },\n  \n  facebookLogo,\n  appleLogo,\n  googleLogo,\n  \n  onSubmit,\n  onForgotPassword,\n  onCreateAccount,\n  onEmailCode,\n  onSocialLogin,\n  \n  privacyPolicyLink,\n  loading = false,\n  errorMessage = '',\n  \n  isTypeScript = false\n}) => {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [stayLoggedIn, setStayLoggedIn] = useState(false);\n\n  const isFormValid = email.trim() !== '' && password.trim() !== '';\n  const displayTitle = title || `Sign in to ${brandName}`;\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    if (isFormValid && onSubmit) {\n      onSubmit({ email, password, stayLoggedIn });\n    }\n  };\n\n  const handleForgotPassword = () => {\n    if (onForgotPassword) {\n      onForgotPassword();\n    }\n  };\n\n  const handleCreateAccount = () => {\n    if (onCreateAccount) {\n      onCreateAccount();\n    }\n  };\n\n  const handleEmailCode = () => {\n    if (onEmailCode) {\n      onEmailCode();\n    }\n  };\n\n  const handleSocialLogin = (provider) => {\n    if (onSocialLogin) {\n      onSocialLogin(provider);\n    }\n  };\n\n  return (\n    <div className=\"login-container\" style={{ '--theme-color': themeColor }}>\n      <div className=\"logo-container\">\n        <img src={logo} alt={brandName} className=\"login-logo\" />\n      </div>\n      \n      <h1 className=\"login-title\">{displayTitle}</h1>\n      \n      <form onSubmit={handleSubmit} className=\"login-form\">\n        {errorMessage && (\n          <div className=\"alert alert-danger\" role=\"alert\">\n            {errorMessage}\n          </div>\n        )}\n        \n        <div className=\"form-group\">\n          <input\n            type=\"email\"\n            placeholder=\"Email\"\n            value={email}\n            onChange={(e) => setEmail(e.target.value)}\n            className=\"form-control\"\n            required={isTypeScript}\n          />\n        </div>\n        \n        <div className=\"form-group\">\n          <input\n            type=\"password\"\n            placeholder=\"Password\"\n            value={password}\n            onChange={(e) => setPassword(e.target.value)}\n            className=\"form-control\"\n            required={isTypeScript}\n          />\n        </div>\n        \n        <div className=\"form-check-container\">\n          <div className=\"form-check\">\n            <input\n              type=\"checkbox\"\n              className=\"form-check-input\"\n              id=\"stayLoggedIn\"\n              checked={stayLoggedIn}\n              onChange={(e) => setStayLoggedIn(e.target.checked)}\n            />\n            <label className=\"form-check-label\" htmlFor=\"stayLoggedIn\">\n              Stay logged in\n            </label>\n          </div>\n          <button \n            type=\"button\" \n            className=\"forgot-password-link\" \n            onClick={handleForgotPassword}\n          >\n            Forgot Password\n          </button>\n        </div>\n        \n        <button\n          type=\"submit\"\n          className={`btn-signin ${!isFormValid || loading ? 'disabled' : ''}`}\n          disabled={!isFormValid || loading}\n        >\n          {loading ? 'Signing in...' : 'Sign in'}\n        </button>\n        \n        {showPrivacyNotice && privacyPolicyLink && (\n          <div className=\"privacy-notice\">\n            By signing in or creating an account, you acknowledge and accept our{' '}\n            <a href={privacyPolicyLink} className=\"privacy-link\">privacy policy</a>\n          </div>\n        )}\n      </form>\n      \n      {showEmailCode && (\n        <button className=\"email-code-btn\" onClick={handleEmailCode}>\n          Sign in with Email Code\n        </button>\n      )}\n      \n      <div className=\"social-login\">\n        {socialLogins.facebook && facebookLogo && (\n          <button \n            className=\"btn-facebook\" \n            onClick={() => handleSocialLogin('facebook')}\n          >\n            <img src={facebookLogo} alt=\"Facebook\" className=\"social-icon\" />\n            Log in with Facebook\n          </button>\n        )}\n        \n        {socialLogins.apple && appleLogo && (\n          <button \n            className=\"btn-apple\" \n            onClick={() => handleSocialLogin('apple')}\n          >\n            <img src={appleLogo} alt=\"Apple\" className=\"social-icon\" />\n            Sign in with Apple\n          </button>\n        )}\n        \n        {socialLogins.google && googleLogo && (\n          <button \n            className=\"btn-google\" \n            onClick={() => handleSocialLogin('google')}\n          >\n            <img src={googleLogo} alt=\"Google\" className=\"social-icon\" />\n            Sign in with Google\n          </button>\n        )}\n      </div>\n      \n      <div className=\"create-account\">\n        <span>New to {brandName}? </span>\n        <button \n          type=\"button\" \n          className=\"create-account-link\" \n          onClick={handleCreateAccount}\n        >\n          Create account\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default Login;\n"],"mappings":"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","names":["React","jsx","jsxs"]}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 377f692..7c8a185 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,10 +7,6 @@
     "": {
       "name": "@ben-windsurf/component-library",
       "version": "1.0.0",
-      "dependencies": {
-        "react": "^19.1.0",
-        "react-dom": "^19.1.0"
-      },
       "devDependencies": {
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
@@ -533,9 +529,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.1.tgz",
-      "integrity": "sha512-oENme6QxtLCqjChRUUo3S6X8hjCXnWmJWnedD7VbGML5GUtaOtAyx+fEEXnBXVf0CBZApMQU0Idwi0FmyxzQhw==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.2.tgz",
+      "integrity": "sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==",
       "cpu": [
         "arm"
       ],
@@ -547,9 +543,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.1.tgz",
-      "integrity": "sha512-OikvNT3qYTl9+4qQ9Bpn6+XHM+ogtFadRLuT2EXiFQMiNkXFLQfNVppi5o28wvYdHL2s3fM0D/MZJ8UkNFZWsw==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.2.tgz",
+      "integrity": "sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==",
       "cpu": [
         "arm64"
       ],
@@ -561,9 +557,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.1.tgz",
-      "integrity": "sha512-EFYNNGij2WllnzljQDQnlFTXzSJw87cpAs4TVBAWLdkvic5Uh5tISrIL6NRcxoh/b2EFBG/TK8hgRrGx94zD4A==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.2.tgz",
+      "integrity": "sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==",
       "cpu": [
         "arm64"
       ],
@@ -575,9 +571,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.1.tgz",
-      "integrity": "sha512-ZaNH06O1KeTug9WI2+GRBE5Ujt9kZw4a1+OIwnBHal92I8PxSsl5KpsrPvthRynkhMck4XPdvY0z26Cym/b7oA==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.2.tgz",
+      "integrity": "sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==",
       "cpu": [
         "x64"
       ],
@@ -589,9 +585,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.46.1.tgz",
-      "integrity": "sha512-n4SLVebZP8uUlJ2r04+g2U/xFeiQlw09Me5UFqny8HGbARl503LNH5CqFTb5U5jNxTouhRjai6qPT0CR5c/Iig==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.46.2.tgz",
+      "integrity": "sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==",
       "cpu": [
         "arm64"
       ],
@@ -603,9 +599,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.1.tgz",
-      "integrity": "sha512-8vu9c02F16heTqpvo3yeiu7Vi1REDEC/yES/dIfq3tSXe6mLndiwvYr3AAvd1tMNUqE9yeGYa5w7PRbI5QUV+w==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.2.tgz",
+      "integrity": "sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==",
       "cpu": [
         "x64"
       ],
@@ -617,9 +613,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.1.tgz",
-      "integrity": "sha512-K4ncpWl7sQuyp6rWiGUvb6Q18ba8mzM0rjWJ5JgYKlIXAau1db7hZnR0ldJvqKWWJDxqzSLwGUhA4jp+KqgDtQ==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.2.tgz",
+      "integrity": "sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==",
       "cpu": [
         "arm"
       ],
@@ -631,9 +627,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.1.tgz",
-      "integrity": "sha512-YykPnXsjUjmXE6j6k2QBBGAn1YsJUix7pYaPLK3RVE0bQL2jfdbfykPxfF8AgBlqtYbfEnYHmLXNa6QETjdOjQ==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.2.tgz",
+      "integrity": "sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==",
       "cpu": [
         "arm"
       ],
@@ -645,9 +641,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.1.tgz",
-      "integrity": "sha512-kKvqBGbZ8i9pCGW3a1FH3HNIVg49dXXTsChGFsHGXQaVJPLA4f/O+XmTxfklhccxdF5FefUn2hvkoGJH0ScWOA==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.2.tgz",
+      "integrity": "sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==",
       "cpu": [
         "arm64"
       ],
@@ -659,9 +655,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.1.tgz",
-      "integrity": "sha512-zzX5nTw1N1plmqC9RGC9vZHFuiM7ZP7oSWQGqpbmfjK7p947D518cVK1/MQudsBdcD84t6k70WNczJOct6+hdg==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.2.tgz",
+      "integrity": "sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==",
       "cpu": [
         "arm64"
       ],
@@ -673,9 +669,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.1.tgz",
-      "integrity": "sha512-O8CwgSBo6ewPpktFfSDgB6SJN9XDcPSvuwxfejiddbIC/hn9Tg6Ai0f0eYDf3XvB/+PIWzOQL+7+TZoB8p9Yuw==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.2.tgz",
+      "integrity": "sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==",
       "cpu": [
         "loong64"
       ],
@@ -687,9 +683,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.1.tgz",
-      "integrity": "sha512-JnCfFVEKeq6G3h3z8e60kAp8Rd7QVnWCtPm7cxx+5OtP80g/3nmPtfdCXbVl063e3KsRnGSKDHUQMydmzc/wBA==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.2.tgz",
+      "integrity": "sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==",
       "cpu": [
         "ppc64"
       ],
@@ -701,9 +697,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.1.tgz",
-      "integrity": "sha512-dVxuDqS237eQXkbYzQQfdf/njgeNw6LZuVyEdUaWwRpKHhsLI+y4H/NJV8xJGU19vnOJCVwaBFgr936FHOnJsQ==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.2.tgz",
+      "integrity": "sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==",
       "cpu": [
         "riscv64"
       ],
@@ -715,9 +711,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.1.tgz",
-      "integrity": "sha512-CvvgNl2hrZrTR9jXK1ye0Go0HQRT6ohQdDfWR47/KFKiLd5oN5T14jRdUVGF4tnsN8y9oSfMOqH6RuHh+ck8+w==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.2.tgz",
+      "integrity": "sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==",
       "cpu": [
         "riscv64"
       ],
@@ -729,9 +725,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.1.tgz",
-      "integrity": "sha512-x7ANt2VOg2565oGHJ6rIuuAon+A8sfe1IeUx25IKqi49OjSr/K3awoNqr9gCwGEJo9OuXlOn+H2p1VJKx1psxA==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.2.tgz",
+      "integrity": "sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==",
       "cpu": [
         "s390x"
       ],
@@ -743,9 +739,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.1.tgz",
-      "integrity": "sha512-9OADZYryz/7E8/qt0vnaHQgmia2Y0wrjSSn1V/uL+zw/i7NUhxbX4cHXdEQ7dnJgzYDS81d8+tf6nbIdRFZQoQ==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.2.tgz",
+      "integrity": "sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==",
       "cpu": [
         "x64"
       ],
@@ -757,9 +753,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.1.tgz",
-      "integrity": "sha512-NuvSCbXEKY+NGWHyivzbjSVJi68Xfq1VnIvGmsuXs6TCtveeoDRKutI5vf2ntmNnVq64Q4zInet0UDQ+yMB6tA==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.2.tgz",
+      "integrity": "sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==",
       "cpu": [
         "x64"
       ],
@@ -771,9 +767,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.1.tgz",
-      "integrity": "sha512-mWz+6FSRb82xuUMMV1X3NGiaPFqbLN9aIueHleTZCc46cJvwTlvIh7reQLk4p97dv0nddyewBhwzryBHH7wtPw==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.2.tgz",
+      "integrity": "sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==",
       "cpu": [
         "arm64"
       ],
@@ -785,9 +781,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.1.tgz",
-      "integrity": "sha512-7Thzy9TMXDw9AU4f4vsLNBxh7/VOKuXi73VH3d/kHGr0tZ3x/ewgL9uC7ojUKmH1/zvmZe2tLapYcZllk3SO8Q==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.2.tgz",
+      "integrity": "sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==",
       "cpu": [
         "ia32"
       ],
@@ -799,9 +795,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.1.tgz",
-      "integrity": "sha512-7GVB4luhFmGUNXXJhH2jJwZCFB3pIOixv2E3s17GQHBFUOQaISlt7aGcQgqvCaDSxTZJUzlK/QJ1FN8S94MrzQ==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.2.tgz",
+      "integrity": "sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==",
       "cpu": [
         "x64"
       ],
@@ -820,9 +816,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.1.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
-      "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
+      "version": "19.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
+      "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -830,9 +826,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.1.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
-      "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
+      "version": "19.1.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
+      "integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -1473,6 +1469,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1482,6 +1479,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -1514,9 +1512,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.46.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.1.tgz",
-      "integrity": "sha512-33xGNBsDJAkzt0PvninskHlWnTIPgDtTwhg0U38CUoNP/7H6wI2Cz6dUeoNPbjdTdsYTGuiFFASuUOWovH0SyQ==",
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.2.tgz",
+      "integrity": "sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1530,26 +1528,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.46.1",
-        "@rollup/rollup-android-arm64": "4.46.1",
-        "@rollup/rollup-darwin-arm64": "4.46.1",
-        "@rollup/rollup-darwin-x64": "4.46.1",
-        "@rollup/rollup-freebsd-arm64": "4.46.1",
-        "@rollup/rollup-freebsd-x64": "4.46.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.46.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.46.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.46.1",
-        "@rollup/rollup-linux-arm64-musl": "4.46.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.46.1",
-        "@rollup/rollup-linux-ppc64-gnu": "4.46.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.46.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.46.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.46.1",
-        "@rollup/rollup-linux-x64-gnu": "4.46.1",
-        "@rollup/rollup-linux-x64-musl": "4.46.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.46.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.46.1",
-        "@rollup/rollup-win32-x64-msvc": "4.46.1",
+        "@rollup/rollup-android-arm-eabi": "4.46.2",
+        "@rollup/rollup-android-arm64": "4.46.2",
+        "@rollup/rollup-darwin-arm64": "4.46.2",
+        "@rollup/rollup-darwin-x64": "4.46.2",
+        "@rollup/rollup-freebsd-arm64": "4.46.2",
+        "@rollup/rollup-freebsd-x64": "4.46.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.46.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.46.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.46.2",
+        "@rollup/rollup-linux-arm64-musl": "4.46.2",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.46.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.46.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.46.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.46.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.46.2",
+        "@rollup/rollup-linux-x64-gnu": "4.46.2",
+        "@rollup/rollup-linux-x64-musl": "4.46.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.46.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.46.2",
+        "@rollup/rollup-win32-x64-msvc": "4.46.2",
         "fsevents": "~2.3.2"
       }
     },
@@ -1557,7 +1555,8 @@
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
       "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
@@ -1599,6 +1598,7 @@
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
       "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+      "deprecated": "The work that was done in this beta branch won't be included in future versions",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
diff --git a/package.json b/package.json
index b564b7c..68dbafd 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,6 @@
     "dist",
     "src"
   ],
-  "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
diff --git a/src/components/Login/Login.css b/src/components/Login/Login.css
new file mode 100644
index 0000000..20bc87c
--- /dev/null
+++ b/src/components/Login/Login.css
@@ -0,0 +1,250 @@
+.login-container {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 40px 30px;
+  text-align: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+.logo-container {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.login-logo {
+  height: 40px;
+  width: auto;
+  max-width: 120px;
+  display: block;
+  margin: 0 auto;
+}
+
+.login-title {
+  text-align: center;
+  color: #647484;
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: 32px;
+}
+
+.login-form {
+  margin-bottom: 24px;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  font-size: 16px;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+  background-color: #f8f9fa;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--theme-color, #684cbc);
+  background-color: white;
+}
+
+.form-control::placeholder {
+  color: #6c757d;
+}
+
+.form-check-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  font-size: 14px;
+}
+
+.form-check {
+  display: flex;
+  align-items: center;
+}
+
+.form-check-input {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--theme-color, #684cbc);
+}
+
+.form-check-label {
+  color: #647484;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.forgot-password-link {
+  color: #1c74cc;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.forgot-password-link:hover {
+  text-decoration: underline;
+}
+
+.btn-signin {
+  width: 100%;
+  padding: 12px;
+  background-color: var(--theme-color, #684cbc);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-bottom: 16px;
+}
+
+.btn-signin:hover:not(.disabled) {
+  background-color: #5a3fa8;
+}
+
+.btn-signin.disabled {
+  background-color: #c5c5c5;
+  cursor: not-allowed;
+}
+
+.privacy-notice {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+  margin-bottom: 25px;
+}
+
+.privacy-link {
+  color: #408484;
+  text-decoration: none;
+}
+
+.privacy-link:hover {
+  text-decoration: underline;
+}
+
+.email-code-btn {
+  width: 100%;
+  padding: 12px;
+  background-color: transparent;
+  color: var(--theme-color, #684cbc);
+  border: 2px solid var(--theme-color, #684cbc);
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-bottom: 24px;
+  transition: all 0.2s;
+}
+
+.email-code-btn:hover {
+  background-color: var(--theme-color, #684cbc);
+  color: white;
+}
+
+.social-login {
+  margin-bottom: 24px;
+}
+
+.btn-facebook,
+.btn-apple,
+.btn-google {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: opacity 0.2s;
+}
+
+.btn-facebook {
+  background-color: #38569e;
+  color: white;
+}
+
+.btn-apple {
+  background-color: #000000;
+  color: white;
+}
+
+.btn-google {
+  background-color: white;
+  color: #333;
+  border: 1px solid #dadce0;
+}
+
+.btn-facebook:hover,
+.btn-apple:hover,
+.btn-google:hover {
+  opacity: 0.9;
+}
+
+.social-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+.create-account {
+  text-align: center;
+  font-size: 14px;
+  color: #647484;
+}
+
+.create-account-link {
+  color: #1c74cc;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.create-account-link:hover {
+  text-decoration: underline;
+}
+
+.alert {
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  text-align: left;
+}
+
+.alert-danger {
+  background-color: #f8d7da;
+  border: 1px solid #f5c6cb;
+  color: #721c24;
+}
+
+@media (max-width: 768px) {
+  .login-container {
+    padding: 10px;
+  }
+
+  .login-card {
+    padding: 30px 20px;
+  }
+}
diff --git a/src/components/Login/Login.js b/src/components/Login/Login.js
new file mode 100644
index 0000000..49bb840
--- /dev/null
+++ b/src/components/Login/Login.js
@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import './Login.css';
+
+const Login = ({
+  logo,
+  brandName = 'StubHub',
+  title,
+  
+  themeColor = '#684cbc',
+  
+  showEmailCode = true,
+  showPrivacyNotice = false,
+  
+  socialLogins = {
+    facebook: true,
+    apple: true,
+    google: true
+  },
+  
+  facebookLogo,
+  appleLogo,
+  googleLogo,
+  
+  onSubmit,
+  onForgotPassword,
+  onCreateAccount,
+  onEmailCode,
+  onSocialLogin,
+  
+  privacyPolicyLink,
+  loading = false,
+  errorMessage = '',
+  
+  isTypeScript = false
+}) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [stayLoggedIn, setStayLoggedIn] = useState(false);
+
+  const isFormValid = email.trim() !== '' && password.trim() !== '';
+  const displayTitle = title || `Sign in to ${brandName}`;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isFormValid && onSubmit) {
+      onSubmit({ email, password, stayLoggedIn });
+    }
+  };
+
+  const handleForgotPassword = () => {
+    if (onForgotPassword) {
+      onForgotPassword();
+    }
+  };
+
+  const handleCreateAccount = () => {
+    if (onCreateAccount) {
+      onCreateAccount();
+    }
+  };
+
+  const handleEmailCode = () => {
+    if (onEmailCode) {
+      onEmailCode();
+    }
+  };
+
+  const handleSocialLogin = (provider) => {
+    if (onSocialLogin) {
+      onSocialLogin(provider);
+    }
+  };
+
+  return (
+    <div className="login-container" style={{ '--theme-color': themeColor }}>
+      <div className="logo-container">
+        <img src={logo} alt={brandName} className="login-logo" />
+      </div>
+      
+      <h1 className="login-title">{displayTitle}</h1>
+      
+      <form onSubmit={handleSubmit} className="login-form">
+        {errorMessage && (
+          <div className="alert alert-danger" role="alert">
+            {errorMessage}
+          </div>
+        )}
+        
+        <div className="form-group">
+          <input
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="form-control"
+            required={isTypeScript}
+          />
+        </div>
+        
+        <div className="form-group">
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="form-control"
+            required={isTypeScript}
+          />
+        </div>
+        
+        <div className="form-check-container">
+          <div className="form-check">
+            <input
+              type="checkbox"
+              className="form-check-input"
+              id="stayLoggedIn"
+              checked={stayLoggedIn}
+              onChange={(e) => setStayLoggedIn(e.target.checked)}
+            />
+            <label className="form-check-label" htmlFor="stayLoggedIn">
+              Stay logged in
+            </label>
+          </div>
+          <button 
+            type="button" 
+            className="forgot-password-link" 
+            onClick={handleForgotPassword}
+          >
+            Forgot Password
+          </button>
+        </div>
+        
+        <button
+          type="submit"
+          className={`btn-signin ${!isFormValid || loading ? 'disabled' : ''}`}
+          disabled={!isFormValid || loading}
+        >
+          {loading ? 'Signing in...' : 'Sign in'}
+        </button>
+        
+        {showPrivacyNotice && privacyPolicyLink && (
+          <div className="privacy-notice">
+            By signing in or creating an account, you acknowledge and accept our{' '}
+            <a href={privacyPolicyLink} className="privacy-link">privacy policy</a>
+          </div>
+        )}
+      </form>
+      
+      {showEmailCode && (
+        <button className="email-code-btn" onClick={handleEmailCode}>
+          Sign in with Email Code
+        </button>
+      )}
+      
+      <div className="social-login">
+        {socialLogins.facebook && facebookLogo && (
+          <button 
+            className="btn-facebook" 
+            onClick={() => handleSocialLogin('facebook')}
+          >
+            <img src={facebookLogo} alt="Facebook" className="social-icon" />
+            Log in with Facebook
+          </button>
+        )}
+        
+        {socialLogins.apple && appleLogo && (
+          <button 
+            className="btn-apple" 
+            onClick={() => handleSocialLogin('apple')}
+          >
+            <img src={appleLogo} alt="Apple" className="social-icon" />
+            Sign in with Apple
+          </button>
+        )}
+        
+        {socialLogins.google && googleLogo && (
+          <button 
+            className="btn-google" 
+            onClick={() => handleSocialLogin('google')}
+          >
+            <img src={googleLogo} alt="Google" className="social-icon" />
+            Sign in with Google
+          </button>
+        )}
+      </div>
+      
+      <div className="create-account">
+        <span>New to {brandName}? </span>
+        <button 
+          type="button" 
+          className="create-account-link" 
+          onClick={handleCreateAccount}
+        >
+          Create account
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/src/components/Login/index.js b/src/components/Login/index.js
new file mode 100644
index 0000000..2a741cd
--- /dev/null
+++ b/src/components/Login/index.js
@@ -0,0 +1 @@
+export { default } from './Login';
diff --git a/src/index.js b/src/index.js
index 9929e26..f56657e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1,2 @@
 export { default as SearchBar } from './components/SearchBar';
+export { default as Login } from './components/Login';