diff --git a/ShoppingAssistantWebClient.Web/Pages/Login.cshtml b/ShoppingAssistantWebClient.Web/Pages/Login.cshtml
new file mode 100644
index 0000000..bfee3d5
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/Pages/Login.cshtml
@@ -0,0 +1,56 @@
+@page "/loginrazor"
+@model ShoppingAssistantWebClient.Web.Pages.LoginModel
+
+<head>
+    <link rel="stylesheet" href="css/Login.css" />
+</head>
+
+<div class="login-container">
+    <div class="login-form">
+        @if (!string.IsNullOrWhiteSpace(Model.ErrorMessage))
+        {
+            <div class="error-message-container">
+                <span class="validation-message error">@Model.ErrorMessage</span>
+            </div>
+        }
+
+        <form method="post" onsubmit="return validateForm()">
+            <input type="tel" asp-for="Input.Phone" id="phone" placeholder="Phone Number" pattern="\+?[0-9]{10,15}" />
+            <span asp-validation-for="Input.Phone" class="validation-message" id="phoneValidationMessage"></span>
+            <div class="or">or</div>
+            <input type="email" asp-for="Input.Email" id="email" placeholder="Email"/>
+            <span asp-validation-for="Input.Email" class="validation-message" id="emailValidationMessage"></span>
+            <input type="password" asp-for="Input.Password" placeholder="Password" />
+            <button class="login-button" type="submit">Login</button>
+            <button class="back-button" type="button" onclick="location.href='/'">Back</button>
+        </form>
+    </div>
+</div>
+
+@section Scripts {
+    <script>
+        function validateForm() {
+            var phone = document.getElementById('phone').value;
+            var email = document.getElementById('email').value;
+            var phoneValidationMessage = '';
+            var emailValidationMessage = '';
+            var isPhoneInvalid = false;
+            var isEmailInvalid = false;
+
+            if (phone && !/^\+[0-9]{1,15}$/.test(phone)) {
+                phoneValidationMessage = 'Please enter a valid phone number';
+                isPhoneInvalid = true;
+            }
+
+            if (email) {
+                emailValidationMessage = 'Please enter a valid email address';
+                isEmailInvalid = true;
+            }
+
+            document.getElementById('phoneValidationMessage').innerText = phoneValidationMessage;
+            document.getElementById('emailValidationMessage').innerText = emailValidationMessage;
+
+            return !isPhoneInvalid && !isEmailInvalid;
+        }
+    </script>
+}
diff --git a/ShoppingAssistantWebClient.Web/Pages/Login.cshtml.cs b/ShoppingAssistantWebClient.Web/Pages/Login.cshtml.cs
new file mode 100644
index 0000000..58d2a3d
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/Pages/Login.cshtml.cs
@@ -0,0 +1,47 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using ShoppingAssistantWebClient.Web.Models.Input;
+using ShoppingAssistantWebClient.Web.Network;
+
+namespace ShoppingAssistantWebClient.Web.Pages;
+
+public class LoginModel : PageModel
+{
+    [BindProperty]
+    public LoginInputModel Input { get; set; }
+
+    public string ErrorMessage { get; set; }
+
+    public AuthenticationService AuthenticationService { get; set; }
+
+    public void OnGet()
+    {
+    }
+
+    public async Task<IActionResult> OnPostAsync()
+    {
+        if (!ModelState.IsValid)
+        {
+            return Page();
+        }
+
+        if (Input.IsEmailOrPhoneProvided)
+        {
+            try
+            {
+                await AuthenticationService.LoginAsync(Input);
+                return RedirectToPage("/");
+            }
+            catch (Exception ex)
+            {
+                ErrorMessage = "Login failed. Please try again.";
+                return Page();
+            }
+        }
+        else
+        {
+            ErrorMessage = "Please provide an email or phone number.";
+            return Page();
+        }
+    }
+}
diff --git a/ShoppingAssistantWebClient.Web/Pages/Settings.razor b/ShoppingAssistantWebClient.Web/Pages/Settings.razor
index ecfacaa..dca3f1d 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Settings.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Settings.razor
@@ -143,7 +143,7 @@
     }
 
     private void RedirectToLogin() {
-        var url = $"/login";
+        var url = $"/loginrazor";
         NavigationManager.NavigateTo(url);
     }
 
