diff --git a/TIAMSharedUI/Pages/Components/Step1.razor b/TIAMSharedUI/Pages/Components/Step1.razor
new file mode 100644
index 00000000..40635367
--- /dev/null
+++ b/TIAMSharedUI/Pages/Components/Step1.razor
@@ -0,0 +1,47 @@
+<form class="p-3 mt-3">
+    
+
+    <div class="form-field d-flex align-items-center">
+        
+
+        <DxMaskedInput @bind-Value="@Email"
+               CssClass="cw-320"
+               Mask="@EmailMask"
+               MaskMode="MaskMode.RegEx">
+    <DxRegExMaskProperties MaskAutoCompleteMode="@((MaskAutoCompleteMode)AutoCompleteMode)"
+                           Placeholder="Placeholder"
+                           PlaceholdersVisible="PlaceholderVisible" />
+                           </DxMaskedInput>
+
+        
+    </div>
+
+    <a class="btn btn-primary mt-3" @onclick="GoToNextStep">Next</a>
+</form>
+
+
+
+@code {
+    [Parameter]
+    public string Email { get; set; }
+
+    [Parameter]
+    public EventCallback<string> onNext { get; set; }
+
+    [Parameter]
+    public EventCallback<string> EmailChanged { get; set; }
+
+    IEnumerable<char> PredefinedPlaceholders { get; set; } = new List<char>() { '_', '#' };
+    
+    string EmailMask { get; set; } = @"(\w|[.-])+@(\w|-)+\.(\w|-){2,4}";
+    MaskAutoCompleteMode AutoCompleteMode { get; set; } = MaskAutoCompleteMode.Strong;
+    char Placeholder { get; set; } = '_';
+    bool PlaceholderVisible { get; set; } = true;
+
+    private async Task GoToNextStep()
+    {
+        await EmailChanged.InvokeAsync(Email);
+        await onNext.InvokeAsync();
+    }
+
+}
\ No newline at end of file
diff --git a/TIAMSharedUI/Pages/Components/Step2.razor b/TIAMSharedUI/Pages/Components/Step2.razor
new file mode 100644
index 00000000..f48dc97f
--- /dev/null
+++ b/TIAMSharedUI/Pages/Components/Step2.razor
@@ -0,0 +1,39 @@
+<div>
+    <h3>Step 2: Phone Number</h3>
+
+    <div class="form-field d-flex align-items-center">
+        
+
+        <DxMaskedInput @bind-Value="PhoneNumber"
+                       Mask="\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})"
+                       MaskMode="@MaskMode.RegEx">
+            <DxRegExMaskProperties Placeholder="Placeholder" />
+        </DxMaskedInput>
+
+        <!--input @bind="Email" type="email" name="email" id="email" placeholder="Email"-->
+    </div>
+
+    
+
+    <!--input @bind="PhoneNumber" placeholder="Enter your phone number" /-->
+    <a class="btn btn-primary mt-3" @onclick="GoToNextStep">Next</a>
+</div>
+
+@code {
+    [Parameter]
+    public string PhoneNumber { get; set; }
+
+    [Parameter]
+    public EventCallback<string> onNext { get; set; }
+
+    [Parameter]
+    public EventCallback<string> PhoneNumberChanged { get; set; }
+
+    char Placeholder = '_';
+
+    private async Task GoToNextStep()
+    {
+        await PhoneNumberChanged.InvokeAsync(PhoneNumber);
+        await onNext.InvokeAsync(PhoneNumber);
+    }
+}
\ No newline at end of file
diff --git a/TIAMSharedUI/Pages/Components/Step3.razor b/TIAMSharedUI/Pages/Components/Step3.razor
new file mode 100644
index 00000000..86686372
--- /dev/null
+++ b/TIAMSharedUI/Pages/Components/Step3.razor
@@ -0,0 +1,35 @@
+<div>
+    <h3>Step 3: Password</h3>
+    <div class="form-field d-flex align-items-center">
+
+
+        <DxTextBox @bind-Text="@Password"
+                   Password="true"
+                   CssClass="cw-320" />
+
+        <!--input @bind="Email" type="email" name="email" id="email" placeholder="Email"-->
+    </div>
+
+    <!--input @bind="Password" type="password" placeholder="Enter your password" /-->
+    <a class="btn btn-primary mt-3" @onclick="SubmitRegistration">Next</a>
+</div>
+
+@code {
+        [Parameter]
+        public string Password { get; set; }
+
+        [Parameter]
+        public EventCallback<string> PasswordChanged { get; set; }
+
+        [Parameter]
+        public EventCallback onSubmit { get; set; }
+
+        
+
+        public async Task SubmitRegistration()
+        {
+        await PasswordChanged.InvokeAsync(Password);
+        await onSubmit.InvokeAsync();
+        }
+}
+
diff --git a/TIAMSharedUI/Pages/Login.razor b/TIAMSharedUI/Pages/Login.razor
index d3019bea..379ff910 100644
--- a/TIAMSharedUI/Pages/Login.razor
+++ b/TIAMSharedUI/Pages/Login.razor
@@ -19,8 +19,8 @@
         <div class="p-3 mt-3">
             <div class="form-field d-flex align-items-center">
                 <span class="far fa-user"></span>
-                <input type="tel" @bind-value="loginModel.PhoneNumber" name="phoneNumber" id="phoneNumber" placeholder="Phone number">
-                <ValidationMessage For="@(() => loginModel.PhoneNumber)" />
+                <input type="email" @bind-value="loginModel.Email" name="email" id="phoneNumber" placeholder="Phone number">
+                <ValidationMessage For="@(() => loginModel.Email)" />
             </div>
             <div class="form-field d-flex align-items-center">
                 <span class="fas fa-key"></span>
diff --git a/TIAMSharedUI/Pages/Register.razor b/TIAMSharedUI/Pages/Register.razor
index c958eef8..60a89244 100644
--- a/TIAMSharedUI/Pages/Register.razor
+++ b/TIAMSharedUI/Pages/Register.razor
@@ -1,4 +1,6 @@
 @page "/register"
+@using TIAMWebApp.Shared.Application.Models.PageModels;
+@using TIAMSharedUI.Pages.Components;
 @inject NavigationManager navManager
 <PageTitle>Register</PageTitle>
 
@@ -10,21 +12,36 @@
             Let's create your account!
         </div>
         <form class="p-3 mt-3">
-        <!--DxMaskedInput @bind-Value="@Telephone"
-                       CssClass="cw-320"
-                       Mask="+00 (999) 000-0000">
-            <DxTextMaskProperties Placeholder="Placeholder" SaveLiteral="SaveLiterals" />
-        </DxMaskedInput-->
-
-            <div class="form-field d-flex align-items-center">
-                <span class="far fa-user"></span>
-                <input type="tel" name="phoneNumber" id="phoneNumber" placeholder="Phone number">
-            </div>
+        <div>
+            @switch (currentStep)
+            {
+                case 1:
+                    <Step1 @bind-Email="regModel.Email" onNext="GoToNextStep" />;
+                    break;
+                case 2:
+                    <Step2 @bind-PhoneNumber="regModel.PhoneNumber" onNext="GoToNextStep" />;
+                    break;
+                case 3:
+                    <Step3 @bind-Password="regModel.Password" onSubmit="SubmitRegistration" />;
+                    break;
+            }
+        </div>
       
-        <a class="btn btn-primary mt-3" @onclick="next">Next</a>
+        
         </form>
+    @{
+        if(!registered)
+        {
 
+            <div>
+                <p>@regModel.Email</p>
+                <p>@regModel.PhoneNumber</p>
+                <p>@regModel.Password</p>
+            </div>
+        }
 
+}
+        
 
         <div class="text-center fs-6">
             Already have an account? <a href="login">Sign in here!</a>
@@ -32,17 +49,38 @@
     </div>
 
 @code {
+        
+        RegistrationModel regModel = new();
+        /*IEnumerable<char> PredefinedPlaceholders = new List<char>() { '_', '#' };
+        string Telephone { get; set; } = "5625595830";
+        char Placeholder { get; set; } = '_';
+        bool SaveLiterals { get; set; } = true;*/
 
-    /*IEnumerable<char> PredefinedPlaceholders = new List<char>() { '_', '#' };
-    string Telephone { get; set; } = "5625595830";
-    char Placeholder { get; set; } = '_';
-    bool SaveLiterals { get; set; } = true;*/
+        private void next()
+        {
+            navManager.NavigateTo("register2");
+        }
 
-    private void next()
+    private int currentStep = 1;
+
+    private string Email { get; set; }
+    private string PhoneNumber { get; set; }
+    private string Password { get; set; }
+    bool registered = false;
+
+    private void GoToNextStep(string someString)
     {
-        navManager.NavigateTo("register2");
+        currentStep++;
+    }
+
+    private void SubmitRegistration()
+    {
+        // Implement your registration logic here
+        // You can use Email, PhoneNumber, and Password variables
+        // Reset currentStep after successful registration
+        registered = true;
+        currentStep = 1;
     }
-    
-}
 
 
+}
\ No newline at end of file
diff --git a/TIAMSharedUI/Pages/Registerold.razor b/TIAMSharedUI/Pages/Registerold.razor
new file mode 100644
index 00000000..1114bf1f
--- /dev/null
+++ b/TIAMSharedUI/Pages/Registerold.razor
@@ -0,0 +1,48 @@
+@page "/registerOld"
+@inject NavigationManager navManager
+<PageTitle>Register</PageTitle>
+
+<div class="wrapper">
+        <div class="my-logo">
+            <img src="_content/TIAMSharedUI/images/png-logo-0.png" alt="">
+        </div>
+        <div class="text-center mt-4 name">
+            Let's create your account!
+        </div>
+        <form class="p-3 mt-3">
+        <!--DxMaskedInput @bind-Value="@Telephone"
+                       CssClass="cw-320"
+                       Mask="+00 (999) 000-0000">
+            <DxTextMaskProperties Placeholder="Placeholder" SaveLiteral="SaveLiterals" />
+        </DxMaskedInput-->
+
+            <div class="form-field d-flex align-items-center">
+                <span class="far fa-user"></span>
+                <input type="tel" name="phoneNumber" id="phoneNumber" placeholder="Phone number">
+            </div>
+      
+        <a class="btn btn-primary mt-3" @onclick="next">Next</a>
+        </form>
+
+
+
+        <div class="text-center fs-6">
+            Already have an account? <a href="login">Sign in here!</a>
+        </div>
+    </div>
+
+@code {
+
+    /*IEnumerable<char> PredefinedPlaceholders = new List<char>() { '_', '#' };
+    string Telephone { get; set; } = "5625595830";
+    char Placeholder { get; set; } = '_';
+    bool SaveLiterals { get; set; } = true;*/
+
+    private void next()
+    {
+        navManager.NavigateTo("register2");
+    }
+    
+}
+
+
diff --git a/TIAMSharedUI/Pages/Registerold.razor.css b/TIAMSharedUI/Pages/Registerold.razor.css
new file mode 100644
index 00000000..8f676d9d
--- /dev/null
+++ b/TIAMSharedUI/Pages/Registerold.razor.css
@@ -0,0 +1,3 @@
+.wrapper {
+    max-width: 400px;
+}
diff --git a/TIAMWebApp/Shared/Models/PageModels/LoginModel.cs b/TIAMWebApp/Shared/Models/PageModels/LoginModel.cs
index dbe163b7..ef69b1ba 100644
--- a/TIAMWebApp/Shared/Models/PageModels/LoginModel.cs
+++ b/TIAMWebApp/Shared/Models/PageModels/LoginModel.cs
@@ -12,7 +12,7 @@ namespace TIAMWebApp.Shared.Application.Models.PageModels
         [Required]
         public string? Password { get; set; }
         [Required]
-        public string? PhoneNumber { get; set; }
+        public string? Email { get; set; }
         
     }
 }