feat: implement authentication and authorization features, add book and user management controllers, and enhance UI for login and registration

Frontend/Controllers/AuthController.cs

@@ -0,0 +1,110 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Authentication;
+using Microsoft.AspNetCore.Authentication.Cookies;
+using System.Security.Claims;
+using Frontend.Models.Dtos;
+using Frontend.Services;
+
+namespace Frontend.Controllers
+{
+    public class AuthController : Controller
+    {
+        private readonly LibraryApiClient _apiClient;
+
+        public AuthController(LibraryApiClient apiClient)
+        {
+            _apiClient = apiClient;
+        }
+
+        [HttpGet]
+        public IActionResult Login() => View();
+
+        [HttpPost]
+        public async Task<IActionResult> Login(LoginRequest request)
+        {
+            if (!ModelState.IsValid) return View(request);
+
+            var response = await _apiClient.LoginAsync(request);
+            if (response != null && !string.IsNullOrEmpty(response.Token))
+            {
+                // Store token in cookie
+                var cookieOptions = new CookieOptions
+                {
+                    HttpOnly = true,
+                    Secure = true,
+                    SameSite = SameSiteMode.Strict,
+                    Expires = DateTime.UtcNow.AddDays(7)
+                };
+                Response.Cookies.Append("AuthToken", response.Token, cookieOptions);
+                
+                await SignInUserAsync(response, request.Email);
+
+                TempData["Success"] = "Welcome back!";
+                return RedirectToAction("Index", "Home");
+            }
+
+            ModelState.AddModelError("", "Invalid email or password.");
+            return View(request);
+        }
+
+        [HttpGet]
+        public IActionResult Register() => View();
+
+        [HttpPost]
+        public async Task<IActionResult> Register(RegisterRequest request)
+        {
+            if (!ModelState.IsValid) return View(request);
+
+            var response = await _apiClient.RegisterAsync(request);
+            if (response != null && !string.IsNullOrEmpty(response.Token))
+            {
+                var cookieOptions = new CookieOptions
+                {
+                    HttpOnly = true,
+                    Secure = true,
+                    SameSite = SameSiteMode.Strict,
+                    Expires = DateTime.UtcNow.AddDays(7)
+                };
+                Response.Cookies.Append("AuthToken", response.Token, cookieOptions);
+
+                await SignInUserAsync(response, request.Email);
+
+                TempData["Success"] = "Account created successfully!";
+                return RedirectToAction("Index", "Home");
+            }
+
+            ModelState.AddModelError("", "Registration failed. Email might already be in use.");
+            return View(request);
+        }
+
+        private async Task SignInUserAsync(AuthResponse response, string email)
+        {
+            var claims = new List<Claim>
+            {
+                new Claim(ClaimTypes.Name, response.FullName),
+                new Claim(ClaimTypes.Email, email),
+                new Claim(ClaimTypes.Role, string.IsNullOrEmpty(response.Role) ? "Member" : response.Role)
+            };
+
+            var claimsIdentity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+            var authProperties = new AuthenticationProperties
+            {
+                IsPersistent = true,
+                ExpiresUtc = DateTimeOffset.UtcNow.AddDays(7)
+            };
+
+            await HttpContext.SignInAsync(
+                CookieAuthenticationDefaults.AuthenticationScheme,
+                new ClaimsPrincipal(claimsIdentity),
+                authProperties);
+        }
+
+        public async Task<IActionResult> Logout()
+        {
+            Response.Cookies.Delete("AuthToken");
+            await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
+            TempData["Success"] = "Logged out successfully.";
+            return RedirectToAction("Login");
+        }
+    }
+}

Frontend/Controllers/BooksController.cs

@@ -0,0 +1,109 @@
+using Microsoft.AspNetCore.Mvc;
+using Frontend.Services;
+using Frontend.Models.Dtos;
+
+namespace Frontend.Controllers
+{
+    public class BooksController : Controller
+    {
+        private readonly LibraryApiClient _apiClient;
+
+        public BooksController(LibraryApiClient apiClient)
+        {
+            _apiClient = apiClient;
+        }
+
+        public async Task<IActionResult> Index()
+        {
+            var books = await _apiClient.GetBooksAsync();
+            return View(books);
+        }
+
+        public async Task<IActionResult> Details(int id)
+        {
+            var book = await _apiClient.GetBookAsync(id);
+            if (book == null) return NotFound();
+            return View(book);
+        }
+
+        [HttpGet]
+        public async Task<IActionResult> Create()
+        {
+            ViewBag.Categories = await _apiClient.GetCategoriesAsync();
+            return View();
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Create(BookCreateRequest request)
+        {
+            if (!ModelState.IsValid)
+            {
+                ViewBag.Categories = await _apiClient.GetCategoriesAsync();
+                return View(request);
+            }
+
+            var result = await _apiClient.CreateBookAsync(request);
+            if (result != null)
+            {
+                TempData["Success"] = "Book added successfully!";
+                return RedirectToAction(nameof(Index));
+            }
+
+            ModelState.AddModelError("", "Failed to create book.");
+            ViewBag.Categories = await _apiClient.GetCategoriesAsync();
+            return View(request);
+        }
+
+        [HttpGet]
+        public async Task<IActionResult> Edit(int id)
+        {
+            var book = await _apiClient.GetBookAsync(id);
+            if (book == null) return NotFound();
+
+            ViewBag.Categories = await _apiClient.GetCategoriesAsync();
+            return View(new BookUpdateRequest 
+            { 
+                Title = book.Title, 
+                Author = book.Author, 
+                Description = book.Description,
+                TotalCopies = book.TotalCopies
+            });
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Edit(int id, BookUpdateRequest request)
+        {
+            if (!ModelState.IsValid)
+            {
+                ViewBag.Categories = await _apiClient.GetCategoriesAsync();
+                return View(request);
+            }
+
+            var result = await _apiClient.UpdateBookAsync(id, request);
+            if (result != null)
+            {
+                TempData["Success"] = "Book updated successfully!";
+                return RedirectToAction(nameof(Index));
+            }
+
+            ModelState.AddModelError("", "Failed to update book.");
+            ViewBag.Categories = await _apiClient.GetCategoriesAsync();
+            return View(request);
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Delete(int id)
+        {
+            var success = await _apiClient.DeleteBookAsync(id);
+            if (success)
+            {
+                TempData["Success"] = "Book removed from catalog.";
+            }
+            else
+            {
+                TempData["Error"] = "Failed to delete book.";
+            }
+            return RedirectToAction(nameof(Index));
+        }
+    }
+}

Frontend/Controllers/BorrowingsController.cs

@@ -0,0 +1,61 @@
+using Microsoft.AspNetCore.Mvc;
+using Frontend.Services;
+using Frontend.Models.Dtos;
+
+namespace Frontend.Controllers
+{
+    public class BorrowingsController : Controller
+    {
+        private readonly LibraryApiClient _apiClient;
+
+        public BorrowingsController(LibraryApiClient apiClient)
+        {
+            _apiClient = apiClient;
+        }
+
+        public async Task<IActionResult> Index()
+        {
+            if (User.IsInRole("Admin"))
+            {
+                var allBorrowings = await _apiClient.GetAllBorrowingsAsync();
+                return View(allBorrowings);
+            }
+            else
+            {
+                var borrowings = await _apiClient.GetMyBorrowingsAsync();
+                return View(borrowings);
+            }
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Borrow(int bookId)
+        {
+            var request = new BorrowRequest { BookId = bookId };
+            var result = await _apiClient.BorrowBookAsync(request);
+
+            if (result != null)
+            {
+                TempData["Success"] = "Book borrowed successfully!";
+                return RedirectToAction(nameof(Index));
+            }
+
+            TempData["Error"] = "Failed to borrow book. Check your subscription or book availability.";
+            return RedirectToAction("Details", "Books", new { id = bookId });
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Return(int id)
+        {
+            var result = await _apiClient.ReturnBookAsync(id);
+            if (result != null)
+            {
+                TempData["Success"] = "Book returned successfully!";
+            }
+            else
+            {
+                TempData["Error"] = "Failed to process return.";
+            }
+            return RedirectToAction(nameof(Index));
+        }
+    }
+}

Frontend/Controllers/HomeController.cs

@@ -1,20 +1,47 @@
-using Frontend.Models;
 using Microsoft.AspNetCore.Mvc;
+using Frontend.Services;
 using System.Diagnostics;
+using Frontend.Models;
 
 namespace Frontend.Controllers
 {
     public class HomeController : Controller
     {
+        private readonly LibraryApiClient _apiClient;
         private readonly ILogger<HomeController> _logger;
 
-        public HomeController(ILogger<HomeController> logger)
+        public HomeController(LibraryApiClient apiClient, ILogger<HomeController> logger)
         {
+            _apiClient = apiClient;
             _logger = logger;
         }
 
-        public IActionResult Index()
+        public async Task<IActionResult> Index()
         {
+            try 
+            {
+                var books = await _apiClient.GetBooksAsync();
+                var borrowings = await _apiClient.GetMyBorrowingsAsync();
+                var members = await _apiClient.GetUsersAsync();
+                
+                ViewBag.TotalBooks = books.Count();
+                ViewBag.ActiveLoans = borrowings.Count(b => !b.ReturnDate.HasValue);
+                ViewBag.OverdueLoans = borrowings.Count(b => !b.ReturnDate.HasValue && b.DueDate < DateTime.UtcNow);
+                ViewBag.TotalMembers = members.Count();
+                
+                ViewBag.RecentBooks = books.Take(6);
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Failed to load dashboard data");
+                // Set default values if API fails
+                ViewBag.TotalBooks = 0;
+                ViewBag.ActiveLoans = 0;
+                ViewBag.OverdueLoans = 0;
+                ViewBag.TotalMembers = 0;
+                ViewBag.RecentBooks = Enumerable.Empty<Frontend.Models.Dtos.BookDto>();
+            }
+
             return View();
         }
 

Frontend/Controllers/MembersController.cs

@@ -0,0 +1,141 @@
+using Microsoft.AspNetCore.Mvc;
+using Frontend.Services;
+using Frontend.Models.Dtos;
+using Microsoft.AspNetCore.Authorization;
+
+namespace Frontend.Controllers
+{
+    [Authorize(Roles = "Admin")]
+    public class MembersController : Controller
+    {
+        private readonly LibraryApiClient _apiClient;
+
+        public MembersController(LibraryApiClient apiClient)
+        {
+            _apiClient = apiClient;
+        }
+
+        public async Task<IActionResult> Index()
+        {
+            var users = await _apiClient.GetUsersAsync();
+            return View(users);
+        }
+
+        public async Task<IActionResult> Details(int id)
+        {
+            var user = await _apiClient.GetUserAsync(id);
+            if (user == null) return NotFound();
+
+            var memberships = await _apiClient.GetMembershipsAsync();
+            var subscription = await _apiClient.GetUserSubscriptionAsync(id);
+
+            var viewModel = new Frontend.Models.MemberDetailsViewModel
+            {
+                User = user,
+                AvailableMemberships = memberships?.ToList() ?? new List<MembershipDto>(),
+                CurrentSubscription = subscription
+            };
+
+            return View(viewModel);
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> AssignSubscription(int id, int membershipId)
+        {
+            var request = new AdminSubscribeRequest { UserId = id, MembershipId = membershipId };
+            var result = await _apiClient.AdminSubscribeAsync(request);
+            if (result != null)
+            {
+                TempData["Success"] = "Subscription assigned successfully.";
+            }
+            else
+            {
+                TempData["Error"] = "Failed to assign subscription.";
+            }
+            return RedirectToAction(nameof(Details), new { id });
+        }
+
+        [HttpGet]
+        public IActionResult Create()
+        {
+            return View();
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Create(UserCreateRequest request)
+        {
+            if (!ModelState.IsValid) return View(request);
+
+            var result = await _apiClient.CreateUserAsync(request);
+            if (result != null)
+            {
+                TempData["Success"] = "Member created successfully!";
+                return RedirectToAction(nameof(Index));
+            }
+
+            ModelState.AddModelError("", "Failed to create member. Email might already exist.");
+            return View(request);
+        }
+
+        [HttpGet]
+        public async Task<IActionResult> Edit(int id)
+        {
+            var user = await _apiClient.GetUserAsync(id);
+            if (user == null) return NotFound();
+
+            return View(new UserUpdateRequest 
+            { 
+                FullName = user.FullName,
+                PhoneNumber = user.PhoneNumber,
+                StudentId = user.StudentId,
+                Address = user.Address
+            });
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Edit(int id, UserUpdateRequest request)
+        {
+            if (!ModelState.IsValid) return View(request);
+
+            var result = await _apiClient.UpdateUserAsync(id, request);
+            if (result != null)
+            {
+                TempData["Success"] = "Member updated successfully!";
+                return RedirectToAction(nameof(Index));
+            }
+
+            ModelState.AddModelError("", "Failed to update member.");
+            return View(request);
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> Delete(int id)
+        {
+            var success = await _apiClient.DeleteUserAsync(id);
+            if (success)
+            {
+                TempData["Success"] = "Member removed.";
+            }
+            else
+            {
+                TempData["Error"] = "Failed to delete member.";
+            }
+            return RedirectToAction(nameof(Index));
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> UpdateRole(int id, string role)
+        {
+            var success = await _apiClient.UpdateUserRoleAsync(id, role);
+            if (success)
+            {
+                TempData["Success"] = $"Role updated to {role}.";
+            }
+            else
+            {
+                TempData["Error"] = "Failed to update role.";
+            }
+            return RedirectToAction(nameof(Details), new { id });
+        }
+    }
+}

Frontend/Controllers/SubscriptionsController.cs

@@ -0,0 +1,34 @@
+using Microsoft.AspNetCore.Mvc;
+using Frontend.Services;
+using Frontend.Models.Dtos;
+using Frontend.Models;
+using Microsoft.AspNetCore.Authorization;
+using System.Threading.Tasks;
+using System.Linq;
+
+namespace Frontend.Controllers
+{
+    [Authorize(Roles = "Admin")]
+    public class SubscriptionsController : Controller
+    {
+        private readonly LibraryApiClient _apiClient;
+
+        public SubscriptionsController(LibraryApiClient apiClient)
+        {
+            _apiClient = apiClient;
+        }
+
+        public async Task<IActionResult> Index()
+        {
+            var memberships = await _apiClient.GetMembershipsAsync();
+
+            var viewModel = new SubscriptionsViewModel
+            {
+                AvailableMemberships = memberships?.ToList() ?? new List<MembershipDto>()
+            };
+
+            return View(viewModel);
+        }
+
+    }
+}

Frontend/Models/Dtos/LibraryDtos.cs

@@ -0,0 +1,166 @@
+namespace Frontend.Models.Dtos
+{
+    // Auth DTOs
+    public class RegisterRequest
+    {
+        public string FullName { get; set; } = string.Empty;
+        public string Email { get; set; } = string.Empty;
+        public string Password { get; set; } = string.Empty;
+        public string? PhoneNumber { get; set; }
+        public string? Address { get; set; }
+        public string? StudentId { get; set; }
+    }
+
+    public class LoginRequest
+    {
+        public string Email { get; set; } = string.Empty;
+        public string Password { get; set; } = string.Empty;
+    }
+
+    public class AuthResponse
+    {
+        public string Token { get; set; } = string.Empty;
+        public string FullName { get; set; } = string.Empty;
+        public string Role { get; set; } = string.Empty;
+        public DateTime Expiry { get; set; }
+    }
+
+    // Book DTOs
+    public class BookDto
+    {
+        public int Id { get; set; }
+        public string Title { get; set; } = string.Empty;
+        public string Isbn { get; set; } = string.Empty;
+        public string Author { get; set; } = string.Empty;
+        public string Status { get; set; } = string.Empty;
+        public bool IsActive { get; set; }
+        public string? Description { get; set; }
+        public int TotalCopies { get; set; }
+        public int AvailableCopies { get; set; }
+        public DateTime CreatedAt { get; set; }
+        public DateTime? UpdatedAt { get; set; }
+    }
+
+    public class BookCreateRequest
+    {
+        public string Title { get; set; } = string.Empty;
+        public string Isbn { get; set; } = string.Empty;
+        public string Author { get; set; } = string.Empty;
+        public string? Description { get; set; }
+        public int TotalCopies { get; set; }
+    }
+
+    public class BookUpdateRequest
+    {
+        public string Title { get; set; } = string.Empty;
+        public string Author { get; set; } = string.Empty;
+        public string? Description { get; set; }
+        public int TotalCopies { get; set; }
+    }
+
+    // Borrowing DTOs
+    public class BorrowingDto
+    {
+        public int Id { get; set; }
+        public int UserId { get; set; }
+        public string UserEmail { get; set; } = string.Empty;
+        public int BookId { get; set; }
+        public string BookTitle { get; set; } = string.Empty;
+        public DateTime BorrowDate { get; set; }
+        public DateTime DueDate { get; set; }
+        public DateTime? ReturnDate { get; set; } // This is ActualReturnDate in some contexts
+        public string Status { get; set; } = string.Empty;
+        public decimal FineAmount { get; set; }
+        public bool IsFinePaid { get; set; }
+    }
+
+    public class BorrowRequest
+    {
+        public int BookId { get; set; }
+    }
+
+    // Category DTOs
+    public class CategoryDto
+    {
+        public int Id { get; set; }
+        public string Name { get; set; } = string.Empty;
+    }
+
+    public class CategoryCreateRequest
+    {
+        public string Name { get; set; } = string.Empty;
+    }
+
+    // Subscription & Membership DTOs
+    public class MembershipDto
+    {
+        public int Id { get; set; }
+        public string Type { get; set; } = string.Empty;
+        public int MaxBooks { get; set; }
+        public int BorrowingDays { get; set; }
+        public decimal Price { get; set; }
+        public int DurationMonths { get; set; }
+    }
+
+    public class SubscriptionDto
+    {
+        public int Id { get; set; }
+        public int UserId { get; set; }
+        public int MembershipId { get; set; }
+        public string MembershipType { get; set; } = string.Empty;
+        public DateTime StartDate { get; set; }
+        public DateTime ExpiryDate { get; set; }
+        public bool IsActive { get; set; }
+    }
+
+    public class SubscribeRequest
+    {
+        public int MembershipId { get; set; }
+    }
+
+    public class AdminSubscribeRequest
+    {
+        public int UserId { get; set; }
+        public int MembershipId { get; set; }
+    }
+
+    // User DTOs
+    public class UserDto
+    {
+        public int Id { get; set; }
+        public string FullName { get; set; } = string.Empty;
+        public string Email { get; set; } = string.Empty;
+        public string? PhoneNumber { get; set; }
+        public string Role { get; set; } = string.Empty;
+        public bool IsActive { get; set; }
+        public string? StudentId { get; set; }
+        public string? Address { get; set; }
+        public DateTime CreatedAt { get; set; }
+        public DateTime? UpdatedAt { get; set; }
+        public bool? BanStatus { get; set; }
+        public DateTime? SuspensionEndDate { get; set; }
+    }
+
+    public class UserCreateRequest
+    {
+        public string FullName { get; set; } = string.Empty;
+        public string Email { get; set; } = string.Empty;
+        public string Password { get; set; } = string.Empty;
+        public string? PhoneNumber { get; set; }
+        public string? StudentId { get; set; }
+        public string? Address { get; set; }
+    }
+
+    public class UserUpdateRequest
+    {
+        public string FullName { get; set; } = string.Empty;
+        public string? PhoneNumber { get; set; }
+        public string? StudentId { get; set; }
+        public string? Address { get; set; }
+    }
+
+    public class UserRoleUpdateRequest
+    {
+        public string Role { get; set; } = string.Empty;
+    }
+}

Frontend/Models/MemberDetailsViewModel.cs

@@ -0,0 +1,12 @@
+using Frontend.Models.Dtos;
+using System.Collections.Generic;
+
+namespace Frontend.Models
+{
+    public class MemberDetailsViewModel
+    {
+        public UserDto User { get; set; } = new();
+        public SubscriptionDto? CurrentSubscription { get; set; }
+        public List<MembershipDto> AvailableMemberships { get; set; } = new();
+    }
+}

Frontend/Models/SubscriptionsViewModel.cs

@@ -0,0 +1,9 @@
+using Frontend.Models.Dtos;
+
+namespace Frontend.Models
+{
+    public class SubscriptionsViewModel
+    {
+        public List<MembershipDto> AvailableMemberships { get; set; } = new();
+    }
+}

Frontend/Program.cs

@@ -1,8 +1,27 @@
+using Microsoft.AspNetCore.Authentication.Cookies;
+
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
 builder.Services.AddControllersWithViews();
 
+builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
+    .AddCookie(options =>
+    {
+        options.LoginPath = "/Auth/Login";
+        options.AccessDeniedPath = "/Auth/AccessDenied";
+        options.ExpireTimeSpan = TimeSpan.FromDays(7);
+        options.SlidingExpiration = true;
+    });
+
+builder.Services.AddHttpClient("LibraryBackend", client =>
+{
+    client.BaseAddress = new Uri(builder.Configuration["BackendApiBaseUrl"] ?? "https://localhost:7028");
+});
+
+builder.Services.AddHttpContextAccessor();
+builder.Services.AddScoped<Frontend.Services.LibraryApiClient>();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.
@@ -18,6 +37,7 @@ app.UseStaticFiles();
 
 app.UseRouting();
 
+app.UseAuthentication();
 app.UseAuthorization();
 
 app.MapControllerRoute(

Frontend/Services/LibraryApiClient.cs

@@ -0,0 +1,197 @@
+using System.Net.Http.Json;
+using Frontend.Models.Dtos;
+
+namespace Frontend.Services
+{
+    public class LibraryApiClient
+    {
+        private readonly HttpClient _httpClient;
+        private readonly IHttpContextAccessor _httpContextAccessor;
+
+        public LibraryApiClient(IHttpClientFactory httpClientFactory, IHttpContextAccessor httpContextAccessor)
+        {
+            _httpClient = httpClientFactory.CreateClient("LibraryBackend");
+            _httpContextAccessor = httpContextAccessor;
+            
+            AddAuthHeaderFromCookie();
+        }
+
+        private void AddAuthHeaderFromCookie()
+        {
+            var token = _httpContextAccessor.HttpContext?.Request.Cookies["AuthToken"];
+            if (!string.IsNullOrEmpty(token))
+            {
+                _httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);
+            }
+        }
+
+        public void SetToken(string token)
+        {
+            if (!string.IsNullOrEmpty(token))
+            {
+                _httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);
+            }
+        }
+
+        #region Auth
+        public async Task<AuthResponse?> LoginAsync(LoginRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/auth/login", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<AuthResponse>() : null;
+        }
+
+        public async Task<AuthResponse?> RegisterAsync(RegisterRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/auth/register", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<AuthResponse>() : null;
+        }
+
+        public async Task<object?> GetProfileAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<object>("api/auth/me");
+        }
+        #endregion
+
+        #region Books
+        public async Task<IEnumerable<BookDto>> GetBooksAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<BookDto>>("api/books") ?? Enumerable.Empty<BookDto>();
+        }
+
+        public async Task<BookDto?> GetBookAsync(int id)
+        {
+            return await _httpClient.GetFromJsonAsync<BookDto>($"api/books/{id}");
+        }
+
+        public async Task<BookDto?> CreateBookAsync(BookCreateRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/books", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<BookDto>() : null;
+        }
+
+        public async Task<BookDto?> UpdateBookAsync(int id, BookUpdateRequest request)
+        {
+            var response = await _httpClient.PutAsJsonAsync($"api/books/{id}", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<BookDto>() : null;
+        }
+
+        public async Task<bool> DeleteBookAsync(int id)
+        {
+            var response = await _httpClient.DeleteAsync($"api/books/{id}");
+            return response.IsSuccessStatusCode;
+        }
+        #endregion
+
+        #region Borrowings
+        public async Task<BorrowingDto?> BorrowBookAsync(BorrowRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/borrowings/borrow", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<BorrowingDto>() : null;
+        }
+
+        public async Task<BorrowingDto?> ReturnBookAsync(int id)
+        {
+            var response = await _httpClient.PostAsync($"api/borrowings/return/{id}", null);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<BorrowingDto>() : null;
+        }
+
+        public async Task<IEnumerable<BorrowingDto>> GetMyBorrowingsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<BorrowingDto>>("api/borrowings/me") ?? Enumerable.Empty<BorrowingDto>();
+        }
+
+        public async Task<IEnumerable<BorrowingDto>> GetAllBorrowingsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<BorrowingDto>>("api/borrowings") ?? Enumerable.Empty<BorrowingDto>();
+        }
+        #endregion
+
+        #region Categories
+        public async Task<IEnumerable<CategoryDto>> GetCategoriesAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<CategoryDto>>("api/categories") ?? Enumerable.Empty<CategoryDto>();
+        }
+
+        public async Task<CategoryDto?> CreateCategoryAsync(CategoryCreateRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/categories", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<CategoryDto>() : null;
+        }
+
+        public async Task<bool> DeleteCategoryAsync(int id)
+        {
+            var response = await _httpClient.DeleteAsync($"api/categories/{id}");
+            return response.IsSuccessStatusCode;
+        }
+        #endregion
+
+        #region Subscriptions
+        public async Task<IEnumerable<MembershipDto>> GetMembershipsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<MembershipDto>>("api/memberships") ?? Enumerable.Empty<MembershipDto>();
+        }
+
+        public async Task<SubscriptionDto?> GetMySubscriptionAsync()
+        {
+            try {
+                return await _httpClient.GetFromJsonAsync<SubscriptionDto>("api/subscriptions/me");
+            } catch { return null; }
+        }
+
+        public async Task<SubscriptionDto?> SubscribeAsync(SubscribeRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/subscriptions/subscribe", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<SubscriptionDto>() : null;
+        }
+
+        public async Task<SubscriptionDto?> GetUserSubscriptionAsync(int userId)
+        {
+            try {
+                return await _httpClient.GetFromJsonAsync<SubscriptionDto>($"api/subscriptions/user/{userId}");
+            } catch { return null; }
+        }
+
+        public async Task<SubscriptionDto?> AdminSubscribeAsync(AdminSubscribeRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/subscriptions/admin-subscribe", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<SubscriptionDto>() : null;
+        }
+        #endregion
+
+        #region Users
+        public async Task<IEnumerable<UserDto>> GetUsersAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<UserDto>>("api/users") ?? Enumerable.Empty<UserDto>();
+        }
+
+        public async Task<UserDto?> GetUserAsync(int id)
+        {
+            return await _httpClient.GetFromJsonAsync<UserDto>($"api/users/{id}");
+        }
+
+        public async Task<UserDto?> CreateUserAsync(UserCreateRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/users", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<UserDto>() : null;
+        }
+
+        public async Task<UserDto?> UpdateUserAsync(int id, UserUpdateRequest request)
+        {
+            var response = await _httpClient.PutAsJsonAsync($"api/users/{id}", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<UserDto>() : null;
+        }
+
+        public async Task<bool> UpdateUserRoleAsync(int id, string role)
+        {
+            var response = await _httpClient.PutAsJsonAsync($"api/users/role/{id}", new UserRoleUpdateRequest { Role = role });
+            return response.IsSuccessStatusCode;
+        }
+
+        public async Task<bool> DeleteUserAsync(int id)
+        {
+            var response = await _httpClient.DeleteAsync($"api/users/{id}");
+            return response.IsSuccessStatusCode;
+        }
+        #endregion
+    }
+}

Frontend/Views/Auth/Login.cshtml

@@ -0,0 +1,49 @@
+@model Frontend.Models.Dtos.LoginRequest
+@{
+    ViewData["Title"] = "Sign In";
+    Layout = "_Layout";
+}
+
+<div class="min-h-[calc(100vh-200px)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl border border-slate-200 shadow-xl">
+        <div>
+            <div class="mx-auto h-12 w-12 bg-slate-900 rounded-xl flex items-center justify-center text-white mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
+            </div>
+            <h2 class="text-center text-3xl font-extrabold text-slate-900 tracking-tight">Welcome back</h2>
+            <p class="mt-2 text-center text-sm text-slate-500">
+                Continue where you left off.
+            </p>
+        </div>
+        <form class="mt-8 space-y-6" asp-action="Login" method="POST">
+            <div asp-validation-summary="ModelOnly" class="text-red-500 text-sm mb-4 bg-red-50 p-3 rounded-lg border border-red-100"></div>
+            
+            <div class="space-y-4">
+                <div>
+                    <label asp-for="Email" class="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
+                    <input asp-for="Email" type="email" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="name@example.com">
+                    <span asp-validation-for="Email" class="text-xs text-red-500 mt-1"></span>
+                </div>
+                <div>
+                    <div class="flex items-center justify-between mb-1">
+                        <label asp-for="Password" class="block text-sm font-medium text-slate-700">Password</label>
+                        <a href="#" class="text-xs font-medium text-slate-900 hover:underline">Forgot password?</a>
+                    </div>
+                    <input asp-for="Password" type="password" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="••••••••">
+                    <span asp-validation-for="Password" class="text-xs text-red-500 mt-1"></span>
+                </div>
+            </div>
+
+            <div>
+                <button type="submit" class="group relative w-full flex justify-center py-2.5 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900 transition-all">
+                    Sign In
+                </button>
+            </div>
+            
+            <div class="text-center">
+                <span class="text-sm text-slate-500">Don't have an account?</span>
+                <a asp-action="Register" class="text-sm font-medium text-slate-900 hover:underline ml-1">Create one for free</a>
+            </div>
+        </form>
+    </div>
+</div>

Frontend/Views/Auth/Register.cshtml

@@ -0,0 +1,51 @@
+@model Frontend.Models.Dtos.RegisterRequest
+@{
+    ViewData["Title"] = "Create Account";
+    Layout = "_Layout";
+}
+
+<div class="min-h-[calc(100vh-200px)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl border border-slate-200 shadow-xl">
+        <div>
+            <div class="mx-auto h-12 w-12 bg-slate-900 rounded-xl flex items-center justify-center text-white mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
+            </div>
+            <h2 class="text-center text-3xl font-extrabold text-slate-900 tracking-tight">Join our Library</h2>
+            <p class="mt-2 text-center text-sm text-slate-500">
+                Start your reading journey today.
+            </p>
+        </div>
+        <form class="mt-8 space-y-6" asp-action="Register" method="POST">
+            <div asp-validation-summary="ModelOnly" class="text-red-500 text-sm mb-4 bg-red-50 p-3 rounded-lg border border-red-100"></div>
+            
+            <div class="space-y-4">
+                <div>
+                    <label asp-for="FullName" class="block text-sm font-medium text-slate-700 mb-1">Full Name</label>
+                    <input asp-for="FullName" type="text" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="John Doe">
+                    <span asp-validation-for="FullName" class="text-xs text-red-500 mt-1"></span>
+                </div>
+                <div>
+                    <label asp-for="Email" class="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
+                    <input asp-for="Email" type="email" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="name@example.com">
+                    <span asp-validation-for="Email" class="text-xs text-red-500 mt-1"></span>
+                </div>
+                <div>
+                    <label asp-for="Password" class="block text-sm font-medium text-slate-700 mb-1">Password</label>
+                    <input asp-for="Password" type="password" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="••••••••">
+                    <span asp-validation-for="Password" class="text-xs text-red-500 mt-1"></span>
+                </div>
+            </div>
+
+            <div>
+                <button type="submit" class="group relative w-full flex justify-center py-2.5 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900 transition-all">
+                    Create Account
+                </button>
+            </div>
+            
+            <div class="text-center">
+                <span class="text-sm text-slate-500">Already have an account?</span>
+                <a asp-action="Login" class="text-sm font-medium text-slate-900 hover:underline ml-1">Sign in</a>
+            </div>
+        </form>
+    </div>
+</div>

Frontend/Views/Books/Create.cshtml

@@ -0,0 +1,83 @@
+@model Frontend.Models.Dtos.BookCreateRequest
+@{
+    ViewData["Title"] = "Add New Book";
+}
+
+<div class="mb-8">
+    <a asp-action="Index" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+        Back to Catalog
+    </a>
+
+    <div class="max-w-3xl mx-auto">
+        <div class="mb-8">
+            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Add New Book</h1>
+            <p class="mt-2 text-slate-500">Fill in the details below to add a new book to the library catalog.</p>
+        </div>
+
+        <div class="card p-6 sm:p-8">
+            <form asp-action="Create" method="post" class="space-y-6">
+                <!-- Validation Summary -->
+                <div asp-validation-summary="ModelOnly" class="text-sm text-red-600 bg-red-50 p-3 rounded-md"></div>
+
+                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                    <!-- Title -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="Title" class="block text-sm font-medium text-slate-700">Book Title <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="Title" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. The Great Gatsby" required />
+                            <span asp-validation-for="Title" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Author -->
+                    <div>
+                        <label asp-for="Author" class="block text-sm font-medium text-slate-700">Author <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="Author" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. F. Scott Fitzgerald" required />
+                            <span asp-validation-for="Author" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- ISBN -->
+                    <div>
+                        <label asp-for="Isbn" class="block text-sm font-medium text-slate-700">ISBN <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="Isbn" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. 978-0743273565" required />
+                            <span asp-validation-for="Isbn" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Total Copies -->
+                    <div>
+                        <label asp-for="TotalCopies" class="block text-sm font-medium text-slate-700">Total Copies <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="TotalCopies" type="number" min="1" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="1" required />
+                            <span asp-validation-for="TotalCopies" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+                    
+                    <div class="hidden sm:block"></div> <!-- Empty spacer -->
+
+                    <!-- Description -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="Description" class="block text-sm font-medium text-slate-700">Description</label>
+                        <div class="mt-1">
+                            <textarea asp-for="Description" rows="4" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Brief summary of the book..."></textarea>
+                            <span asp-validation-for="Description" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                    <a asp-action="Index" class="btn-secondary">Cancel</a>
+                    <button type="submit" class="btn-primary">Add Book</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
+}

Frontend/Views/Books/Details.cshtml

@@ -0,0 +1,71 @@
+@model Frontend.Models.Dtos.BookDto
+@{
+    ViewData["Title"] = Model.Title;
+}
+
+<div class="mb-8">
+    <a asp-action="Index" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+        Back to Catalog
+    </a>
+    
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+        <!-- Book Cover Image -->
+        <div class="lg:col-span-1">
+            <div class="aspect-[2/3] w-full rounded-2xl bg-slate-100 border border-slate-200 shadow-sm flex items-center justify-center text-slate-300">
+                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+            </div>
+        </div>
+
+        <!-- Book Info -->
+        <div class="lg:col-span-2 space-y-8">
+            <div>
+                <span class="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600 mb-4 tracking-wide uppercase">@Model.Status</span>
+                <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight">@Model.Title</h1>
+                <p class="text-xl text-slate-500 mt-2 font-medium">by @Model.Author</p>
+            </div>
+
+            <div class="prose prose-slate max-w-none">
+                <h3 class="text-lg font-bold text-slate-900 border-b border-slate-100 pb-2 mb-4 uppercase tracking-wider text-sm">Description</h3>
+                <p class="text-slate-600 leading-relaxed">
+                    @(string.IsNullOrEmpty(Model.Description) ? "No description available for this book." : Model.Description)
+                </p>
+            </div>
+
+            <div class="grid grid-cols-2 gap-8 border-y border-slate-100 py-6">
+                <div>
+                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">ISBN</h4>
+                    <p class="text-sm font-semibold text-slate-900">@Model.Isbn</p>
+                </div>
+                <div>
+                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Availability</h4>
+                    <p class="text-sm font-semibold @(Model.AvailableCopies > 0 ? "text-emerald-600" : "text-rose-600")">
+                        @(Model.AvailableCopies > 0 ? $"{Model.AvailableCopies} / {Model.TotalCopies} units in stock" : "Currently occupied")
+                    </p>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4 pt-4">
+                @if (Model.AvailableCopies > 0)
+                {
+                    <form asp-controller="Borrowings" asp-action="Borrow" method="POST">
+                        <input type="hidden" name="BookId" value="@Model.Id" />
+                        <button type="submit" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Borrow This Book</button>
+                    </form>
+                }
+                else
+                {
+                    <button disabled class="btn-primary py-3 px-8 text-base opacity-50 cursor-not-allowed">Out of Stock</button>
+                }
+                
+                <a asp-action="Edit" asp-route-id="@Model.Id" class="btn-secondary py-3 px-8 text-base">Edit Details</a>
+                
+                <form asp-action="Delete" asp-route-id="@Model.Id" method="POST" onsubmit="return confirm('Are you sure you want to remove this book from the catalog?');">
+                    <button type="submit" class="p-3 text-rose-600 hover:text-rose-700 hover:bg-rose-50 rounded-xl transition-colors">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

Frontend/Views/Books/Edit.cshtml

@@ -0,0 +1,74 @@
+@model Frontend.Models.Dtos.BookUpdateRequest
+@{
+    ViewData["Title"] = "Edit Book";
+}
+
+<div class="mb-8">
+    <a asp-action="Index" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+        Back to Catalog
+    </a>
+
+    <div class="max-w-3xl mx-auto">
+        <div class="mb-8">
+            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Edit Book</h1>
+            <p class="mt-2 text-slate-500">Update the details for this book.</p>
+        </div>
+
+        <div class="card p-6 sm:p-8">
+            <form asp-action="Edit" method="post" class="space-y-6">
+                <!-- Validation Summary -->
+                <div asp-validation-summary="ModelOnly" class="text-sm text-red-600 bg-red-50 p-3 rounded-md"></div>
+
+                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                    <!-- Title -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="Title" class="block text-sm font-medium text-slate-700">Book Title <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="Title" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" required />
+                            <span asp-validation-for="Title" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Author -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="Author" class="block text-sm font-medium text-slate-700">Author <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="Author" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" required />
+                            <span asp-validation-for="Author" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Total Copies -->
+                    <div>
+                        <label asp-for="TotalCopies" class="block text-sm font-medium text-slate-700">Total Copies <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="TotalCopies" type="number" min="1" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" required />
+                            <span asp-validation-for="TotalCopies" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+                    
+                    <div class="hidden sm:block"></div> <!-- Empty spacer -->
+
+                    <!-- Description -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="Description" class="block text-sm font-medium text-slate-700">Description</label>
+                        <div class="mt-1">
+                            <textarea asp-for="Description" rows="4" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white"></textarea>
+                            <span asp-validation-for="Description" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                    <a asp-action="Index" class="btn-secondary">Cancel</a>
+                    <button type="submit" class="btn-primary">Save Changes</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
+}

Frontend/Views/Books/Index.cshtml

@@ -0,0 +1,74 @@
+@model IEnumerable<Frontend.Models.Dtos.BookDto>
+@{
+    ViewData["Title"] = "Books Catalog";
+}
+
+<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+    <div>
+        <h1 class="text-3xl font-bold tracking-tight text-slate-900">Books Catalog</h1>
+        <p class="mt-2 text-slate-500">Explore and discover your next great read.</p>
+    </div>
+    <div class="flex items-center gap-3">
+        <a asp-action="Create" class="btn-primary">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+            Add New Book
+        </a>
+    </div>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
+    <div class="md:col-span-3">
+        <div class="relative">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-4 w-4 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                </svg>
+            </div>
+            <input type="text" class="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent sm:text-sm shadow-sm" placeholder="Search by title, author or ISBN...">
+        </div>
+    </div>
+</div>
+
+<!-- Book Grid -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-8">
+    @foreach (var book in Model)
+    {
+        <div class="group card hover:shadow-lg transition-all duration-300">
+            <div class="relative aspect-[2/3] w-full bg-slate-100 flex items-center justify-center text-slate-300 overflow-hidden text-center p-4">
+                <div class="flex flex-col items-center gap-4">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                    <span class="text-[10px] font-bold text-slate-400">@book.Isbn</span>
+                </div>
+                
+                @if (book.AvailableCopies <= 0)
+                {
+                    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-[2px] flex items-center justify-center">
+                        <span class="bg-white text-slate-900 text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded">Out of Stock</span>
+                    </div>
+                }
+            </div>
+            <div class="p-4">
+                <div class="flex items-start justify-between gap-2">
+                    <div class="min-w-0">
+                        <h3 class="text-sm font-bold text-slate-900 truncate group-hover:text-amber-600 transition-colors">
+                            <a asp-action="Details" asp-route-id="@book.Id">@book.Title</a>
+                        </h3>
+                        <p class="text-xs text-slate-500 mt-0.5 truncate">@book.Author</p>
+                    </div>
+                </div>
+                <div class="mt-4 flex items-center justify-between">
+                    <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600">@book.Status</span>
+                    <span class="text-[10px] font-medium @(book.AvailableCopies > 0 ? "text-emerald-600" : "text-rose-600")">
+                        @book.AvailableCopies / @book.TotalCopies
+                    </span>
+                </div>
+                <div class="mt-4 pt-4 border-t border-slate-50 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <a asp-action="Details" asp-route-id="@book.Id" class="flex-1 btn-secondary py-1 text-[11px]">Details</a>
+                    <a asp-action="Edit" asp-route-id="@book.Id" class="p-1.5 rounded-md border border-slate-200 hover:bg-slate-50 text-slate-600">
+                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    }
+</div>

Frontend/Views/Borrowings/Index.cshtml

@@ -0,0 +1,105 @@
+@model IEnumerable<Frontend.Models.Dtos.BorrowingDto>
+@{
+    ViewData["Title"] = "My Loans";
+}
+
+<div class="mb-8">
+    <h1 class="text-3xl font-bold tracking-tight text-slate-900">@(User.IsInRole("Admin") ? "All Active Loans" : "My Loans")</h1>
+    <p class="mt-2 text-slate-500">Track your current borrowings and return upcoming books.</p>
+</div>
+
+<div class="card overflow-hidden">
+    <div class="overflow-x-auto">
+        <table class="w-full text-left border-collapse">
+            <thead>
+                <tr class="bg-slate-50/50 border-b border-slate-100">
+                    <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Book Information</th>
+                    @if (User.IsInRole("Admin"))
+                    {
+                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Member</th>
+                    }
+                    <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Dates</th>
+                    <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Status</th>
+                    <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Fines</th>
+                    <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Actions</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+                @if (!Model.Any())
+                {
+                    <tr>
+                        <td colspan="@(User.IsInRole("Admin") ? 6 : 5)" class="px-6 py-12 text-center text-slate-400 italic">
+                            You don't have any borrowing history yet.
+                        </td>
+                    </tr>
+                }
+                @foreach (var loan in Model)
+                {
+                    <tr class="hover:bg-slate-50 transition-colors group">
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-14 bg-slate-100 rounded flex items-center justify-center text-slate-300">
+                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                                </div>
+                                <div class="min-w-0">
+                                    <p class="text-sm font-bold text-slate-900 truncate">@loan.BookTitle</p>
+                                    <p class="text-[11px] text-slate-500 mt-0.5">Loan ID: #@loan.Id</p>
+                                </div>
+                            </div>
+                        </td>
+                        @if (User.IsInRole("Admin"))
+                        {
+                            <td class="px-6 py-4">
+                                <div class="text-sm font-medium text-slate-900 truncate">@loan.UserEmail</div>
+                                <div class="text-[11px] text-slate-500 mt-0.5">User ID: #@loan.UserId</div>
+                            </td>
+                        }
+                        <td class="px-6 py-4">
+                            <div class="space-y-1">
+                                <p class="text-[11px]"><span class="text-slate-400">Borrowed:</span> <span class="font-medium text-slate-700">@loan.BorrowDate.ToString("MMM dd, yyyy")</span></p>
+                                <p class="text-[11px]"><span class="text-slate-400">Due:</span> <span class="font-medium @(loan.DueDate < DateTime.Now && loan.Status == "Borrowed" ? "text-rose-600" : "text-slate-700")">@loan.DueDate.ToString("MMM dd, yyyy")</span></p>
+                                @if (loan.ReturnDate.HasValue)
+                                {
+                                    <p class="text-[11px]"><span class="text-slate-400">Returned:</span> <span class="font-medium text-emerald-600">@loan.ReturnDate.Value.ToString("MMM dd, yyyy")</span></p>
+                                }
+                            </div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
+                                @(loan.Status == "Borrowed" ? "bg-amber-100 text-amber-700" : "bg-emerald-100 text-emerald-700")">
+                                @loan.Status
+                            </span>
+                        </td>
+                        <td class="px-6 py-4">
+                            @if (loan.FineAmount > 0)
+                            {
+                                <div class="flex flex-col">
+                                    <span class="text-xs font-bold @(loan.IsFinePaid ? "text-slate-500 line-through" : "text-rose-600")">
+                                        MMK @loan.FineAmount.ToString("N0")
+                                    </span>
+                                    @if (loan.IsFinePaid)
+                                    {
+                                        <span class="text-[10px] text-emerald-600 font-medium">Paid</span>
+                                    }
+                                </div>
+                            }
+                            else
+                            {
+                                <span class="text-[11px] text-slate-400">No Fines</span>
+                            }
+                        </td>
+                        <td class="px-6 py-4 text-right">
+                            @if (loan.Status == "Borrowed")
+                            {
+                                <form asp-action="Return" method="POST" onsubmit="return confirm('Ready to return this book?');">
+                                    <input type="hidden" name="id" value="@loan.Id" />
+                                    <button type="submit" class="btn-secondary py-1.5 px-4 text-xs font-bold">@(User.IsInRole("Admin") ? "Process Return" : "Return Book")</button>
+                                </form>
+                            }
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+</div>

Frontend/Views/Home/Index.cshtml

@@ -1,8 +1,123 @@
-@{
-    ViewData["Title"] = "Home Page";
+@{
+    ViewData["Title"] = "Dashboard";
 }
 
-<div class="text-center">
-    <h1 class="display-4">Welcome</h1>
-    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
+<div class="mb-10">
+    <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 border-b border-slate-100 pb-4 mb-2">Welcome Back</h1>
+    <p class="text-slate-500 font-medium">Here's what's happening with the library today.</p>
+</div>
+
+<!-- Stats Grid -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+    <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300">
+        <div class="flex items-center justify-between">
+            <div class="p-2 bg-slate-50 rounded-lg group-hover:bg-slate-100 transition-colors">
+                <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+            </div>
+            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Books</span>
+        </div>
+        <div>
+            <div class="text-3xl font-bold text-slate-900">@ViewBag.TotalBooks</div>
+            <div class="text-xs text-slate-500 mt-1 font-medium italic">Total in catalog</div>
+        </div>
+    </div>
+
+    <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300">
+        <div class="flex items-center justify-between">
+            <div class="p-2 bg-emerald-50 rounded-lg group-hover:bg-emerald-100 transition-colors">
+                <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
+            </div>
+            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Active Loans</span>
+        </div>
+        <div>
+            <div class="text-3xl font-bold text-slate-900">@ViewBag.ActiveLoans</div>
+            <div class="text-xs text-slate-500 mt-1 font-medium italic">Checking out right now</div>
+        </div>
+    </div>
+
+    <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 border-l-4 border-l-rose-500">
+        <div class="flex items-center justify-between">
+            <div class="p-2 bg-rose-50 rounded-lg group-hover:bg-rose-100 transition-colors">
+                <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            </div>
+            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest text-rose-500">Overdue</span>
+        </div>
+        <div>
+            <div class="text-3xl font-bold text-rose-600">@ViewBag.OverdueLoans</div>
+            <div class="text-xs text-rose-500 mt-1 font-medium italic">Require attention</div>
+        </div>
+    </div>
+
+    <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300">
+        <div class="flex items-center justify-between">
+            <div class="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
+                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+            </div>
+            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Active Members</span>
+        </div>
+        <div>
+            <div class="text-3xl font-bold text-slate-900">@ViewBag.TotalMembers</div>
+            <div class="text-xs text-slate-500 mt-1 font-medium italic">In the community</div>
+        </div>
+    </div>
+</div>
+
+<!-- Recent Arrivals -->
+<div class="mb-12">
+    <div class="flex items-center justify-between mb-8">
+        <h2 class="text-2xl font-bold text-slate-900 tracking-tight">Recent Arrivals</h2>
+        <a asp-controller="Books" asp-action="Index" class="text-sm font-bold text-slate-500 hover:text-slate-900 flex items-center group">
+            Browse All 
+            <svg class="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
+        </a>
+    </div>
+    
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+        @foreach (var book in (IEnumerable<Frontend.Models.Dtos.BookDto>)ViewBag.RecentBooks)
+        {
+            <div class="group cursor-pointer">
+                <div class="aspect-[2/3] w-full bg-slate-100 rounded-xl mb-3 flex items-center justify-center text-slate-300 group-hover:shadow-lg transition-all duration-300 relative overflow-hidden">
+                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                    @if (book.AvailableCopies <= 0)
+                    {
+                        <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-[1px] flex items-center justify-center">
+                            <span class="bg-white text-slate-900 text-[8px] font-bold uppercase px-2 py-1 rounded">Out</span>
+                        </div>
+                    }
+                </div>
+                <h3 class="text-xs font-bold text-slate-900 truncate group-hover:text-amber-600 transition-colors">
+                    <a asp-controller="Books" asp-action="Details" asp-route-id="@book.Id">@book.Title</a>
+                </h3>
+                <p class="text-[10px] text-slate-500 truncate mt-0.5 font-medium">@book.Author</p>
+            </div>
+        }
+    </div>
+</div>
+
+<!-- Quick Actions -->
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <div class="bg-slate-900 text-white rounded-3xl p-8 flex flex-col justify-between overflow-hidden relative group">
+        <div class="relative z-10">
+            <h2 class="text-2xl font-bold mb-2">Explore the Library</h2>
+            <p class="text-slate-400 text-sm max-w-[280px]">Access thousands of books across all categories with a premium member account.</p>
+        </div>
+        <div class="mt-8 relative z-10">
+            <a asp-controller="Books" asp-action="Index" class="inline-flex items-center bg-white text-slate-900 px-6 py-2.5 rounded-full text-sm font-bold hover:bg-slate-100 transition-colors">
+                View Catalog
+            </a>
+        </div>
+        <svg class="absolute bottom-0 right-0 w-48 h-48 text-slate-800 -mb-12 -mr-12 opacity-50 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+    </div>
+
+    <div class="bg-amber-50 rounded-3xl p-8 flex flex-col justify-between group border border-amber-100">
+        <div>
+            <h2 class="text-2xl font-bold text-slate-900 mb-2">My Current Loans</h2>
+            <p class="text-slate-600 text-sm max-w-[280px]">Don't forget to return your books on time to avoid late fees.</p>
+        </div>
+        <div class="mt-8">
+            <a asp-controller="Borrowings" asp-action="Index" class="inline-flex items-center text-slate-900 px-6 py-2.5 rounded-full text-sm font-bold border-2 border-slate-900 hover:bg-slate-900 hover:text-white transition-all">
+                Manage My Loans
+            </a>
+        </div>
+    </div>
 </div>

Frontend/Views/Members/Create.cshtml

@@ -0,0 +1,90 @@
+@model Frontend.Models.Dtos.UserCreateRequest
+@{
+    ViewData["Title"] = "Add New Member";
+}
+
+<div class="mb-8">
+    <a asp-action="Index" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+        Back to Directory
+    </a>
+
+    <div class="max-w-3xl mx-auto">
+        <div class="mb-8">
+            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Add New Member</h1>
+            <p class="mt-2 text-slate-500">Register a new member to the library system.</p>
+        </div>
+
+        <div class="card p-6 sm:p-8">
+            <form asp-action="Create" method="post" class="space-y-6">
+                <!-- Validation Summary -->
+                <div asp-validation-summary="ModelOnly" class="text-sm text-red-600 bg-red-50 p-3 rounded-md"></div>
+
+                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                    <!-- FullName -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="FullName" class="block text-sm font-medium text-slate-700">Full Name <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="FullName" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="John Doe" required />
+                            <span asp-validation-for="FullName" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Email -->
+                    <div>
+                        <label asp-for="Email" class="block text-sm font-medium text-slate-700">Email Address <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="Email" type="email" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="you@domain.com" required />
+                            <span asp-validation-for="Email" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Password -->
+                    <div>
+                        <label asp-for="Password" class="block text-sm font-medium text-slate-700">Password <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="Password" type="password" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" required />
+                            <span asp-validation-for="Password" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Phone Number -->
+                    <div>
+                        <label asp-for="PhoneNumber" class="block text-sm font-medium text-slate-700">Phone Number</label>
+                        <div class="mt-1">
+                            <input asp-for="PhoneNumber" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="+123456789" />
+                            <span asp-validation-for="PhoneNumber" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Student ID -->
+                    <div>
+                        <label asp-for="StudentId" class="block text-sm font-medium text-slate-700">Student ID</label>
+                        <div class="mt-1">
+                            <input asp-for="StudentId" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Optional" />
+                            <span asp-validation-for="StudentId" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Address -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="Address" class="block text-sm font-medium text-slate-700">Address</label>
+                        <div class="mt-1">
+                            <textarea asp-for="Address" rows="3" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Full address details"></textarea>
+                            <span asp-validation-for="Address" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                    <a asp-action="Index" class="btn-secondary">Cancel</a>
+                    <button type="submit" class="btn-primary">Create Member</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
+}

Frontend/Views/Members/Details.cshtml

@@ -0,0 +1,137 @@
+@model Frontend.Models.MemberDetailsViewModel
+@{
+    ViewData["Title"] = "Member Details";
+}
+
+<div class="mb-8">
+    <a asp-action="Index" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+        Back to Directory
+    </a>
+    
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+        <div class="lg:col-span-1">
+            <div class="aspect-square w-full rounded-2xl bg-slate-900 flex flex-col items-center justify-center text-white p-6 shadow-xl">
+                <div class="text-6xl font-black mb-4 tracking-tighter">
+                    @(Model.User.FullName?.Substring(0, 2).ToUpper() ?? "U")
+                </div>
+                <h2 class="text-xl font-bold text-center">@Model.User.FullName</h2>
+                <div class="mt-2 inline-flex rounded-full px-3 py-1 text-xs font-semibold leading-5 @(Model.User.Role == "Admin" ? "bg-amber-500/20 text-amber-200" : "bg-blue-500/20 text-blue-200")">
+                    @Model.User.Role
+                </div>
+            </div>
+        </div>
+
+        <div class="lg:col-span-2 space-y-8">
+            <div>
+                <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight mb-2">Member Profile</h1>
+                <div class="flex items-center gap-3">
+                    @if (Model.User.BanStatus == true)
+                    {
+                        <span class="inline-flex items-center rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-800 tracking-wide uppercase">Suspended</span>
+                    }
+                    else if (Model.User.IsActive)
+                    {
+                        <span class="inline-flex items-center rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-800 tracking-wide uppercase">Active</span>
+                    }
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 border-y border-slate-100 py-6">
+                <div>
+                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Email</h4>
+                    <p class="text-sm font-semibold text-slate-900">@Model.User.Email</p>
+                </div>
+                <div>
+                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Phone</h4>
+                    <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(Model.User.PhoneNumber) ? "-" : Model.User.PhoneNumber)</p>
+                </div>
+                <div>
+                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Student ID</h4>
+                    <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(Model.User.StudentId) ? "-" : Model.User.StudentId)</p>
+                </div>
+                <div>
+                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Joined</h4>
+                    <p class="text-sm font-semibold text-slate-900">@Model.User.CreatedAt.ToString("MMM dd, yyyy")</p>
+                </div>
+                <div class="sm:col-span-2">
+                    <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Address</h4>
+                    <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(Model.User.Address) ? "-" : Model.User.Address)</p>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4 pt-4 flex-wrap">
+                <a asp-action="Edit" asp-route-id="@Model.User.Id" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Edit Details</a>
+                
+                <form asp-action="UpdateRole" asp-route-id="@Model.User.Id" method="POST" class="inline-block">
+                    <input type="hidden" name="role" value="@(Model.User.Role == "Admin" ? "Member" : "Admin")" />
+                    <button type="submit" class="btn-secondary py-3 px-8 text-base">
+                        Make @(Model.User.Role == "Admin" ? "Member" : "Admin")
+                    </button>
+                </form>
+
+                <form asp-action="Delete" asp-route-id="@Model.User.Id" method="POST" onsubmit="return confirm('Are you sure you want to completely remove this member? This action cannot be undone.');">
+                    <button type="submit" class="p-3 text-rose-600 hover:text-rose-700 hover:bg-rose-50 rounded-xl transition-colors">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                    </button>
+                </form>
+            </div>
+            
+            <!-- Subscription Management -->
+            <div class="mt-8 pt-8 border-t border-slate-100">
+                <h3 class="text-2xl font-bold text-slate-900 mb-6">Manage Subscription</h3>
+                
+                @if (Model.CurrentSubscription != null && Model.CurrentSubscription.IsActive)
+                {
+                    <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-6">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <span class="text-sm text-green-800 font-semibold uppercase tracking-wider">Active Plan</span>
+                                <h4 class="text-xl font-bold text-green-900">@Model.CurrentSubscription.MembershipType</h4>
+                            </div>
+                            <div class="text-right">
+                                <div class="text-xs text-green-700">Expires On</div>
+                                <div class="font-bold text-green-900">@Model.CurrentSubscription.ExpiryDate.ToString("MMM dd, yyyy")</div>
+                            </div>
+                        </div>
+                    </div>
+                }
+                else
+                {
+                    <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-6">
+                        <p class="text-slate-600 font-medium">No active subscription for this member.</p>
+                    </div>
+                }
+
+                <h4 class="text-lg font-semibold text-slate-900 mb-4">Assign New Plan</h4>
+                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                    @foreach (var plan in Model.AvailableMemberships)
+                    {
+                        var isCurrent = Model.CurrentSubscription?.IsActive == true && Model.CurrentSubscription.MembershipId == plan.Id;
+                        <div class="card p-4 relative @(isCurrent ? "ring-2 ring-slate-900 border-slate-900" : "")">
+                            @if (isCurrent)
+                            {
+                                <div class="absolute top-0 right-0 -mt-2 -mr-2 bg-slate-900 text-white text-xs font-bold px-2 py-1 rounded-md">Current</div>
+                            }
+                            <h5 class="font-bold text-slate-900 text-lg mb-1">@plan.Type</h5>
+                            <p class="text-slate-500 font-medium text-sm mb-4">@plan.Price.ToString("N0") MMK / @plan.DurationMonths mo</p>
+                            
+                            @if (!isCurrent)
+                            {
+                                <form asp-action="AssignSubscription" method="post" onsubmit="return confirm('Assign @plan.Type plan to this member?');">
+                                    <input type="hidden" name="id" value="@Model.User.Id" />
+                                    <input type="hidden" name="membershipId" value="@plan.Id" />
+                                    <button type="submit" class="w-full btn-secondary text-sm">Assign Plan</button>
+                                </form>
+                            }
+                            else
+                            {
+                                <button disabled class="w-full btn-secondary text-sm opacity-50 cursor-not-allowed">Current Plan</button>
+                            }
+                        </div>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Frontend/Views/Members/Edit.cshtml

@@ -0,0 +1,72 @@
+@model Frontend.Models.Dtos.UserUpdateRequest
+@{
+    ViewData["Title"] = "Edit Member";
+}
+
+<div class="mb-8">
+    <a asp-action="Index" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+        Back to Directory
+    </a>
+
+    <div class="max-w-3xl mx-auto">
+        <div class="mb-8">
+            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Edit Member</h1>
+            <p class="mt-2 text-slate-500">Update member's profile details.</p>
+        </div>
+
+        <div class="card p-6 sm:p-8">
+            <form asp-action="Edit" method="post" class="space-y-6">
+                <!-- Validation Summary -->
+                <div asp-validation-summary="ModelOnly" class="text-sm text-red-600 bg-red-50 p-3 rounded-md"></div>
+
+                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                    <!-- FullName -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="FullName" class="block text-sm font-medium text-slate-700">Full Name <span class="text-rose-500">*</span></label>
+                        <div class="mt-1">
+                            <input asp-for="FullName" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" required />
+                            <span asp-validation-for="FullName" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Phone Number -->
+                    <div>
+                        <label asp-for="PhoneNumber" class="block text-sm font-medium text-slate-700">Phone Number</label>
+                        <div class="mt-1">
+                            <input asp-for="PhoneNumber" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                            <span asp-validation-for="PhoneNumber" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Student ID -->
+                    <div>
+                        <label asp-for="StudentId" class="block text-sm font-medium text-slate-700">Student ID</label>
+                        <div class="mt-1">
+                            <input asp-for="StudentId" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                            <span asp-validation-for="StudentId" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+
+                    <!-- Address -->
+                    <div class="sm:col-span-2">
+                        <label asp-for="Address" class="block text-sm font-medium text-slate-700">Address</label>
+                        <div class="mt-1">
+                            <textarea asp-for="Address" rows="3" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white"></textarea>
+                            <span asp-validation-for="Address" class="mt-1 text-xs text-rose-500"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                    <a asp-action="Index" class="btn-secondary">Cancel</a>
+                    <button type="submit" class="btn-primary">Save Changes</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
+}

Frontend/Views/Members/Index.cshtml

@@ -0,0 +1,91 @@
+@model IEnumerable<Frontend.Models.Dtos.UserDto>
+@{
+    ViewData["Title"] = "Members Directory";
+}
+
+<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+    <div>
+        <h1 class="text-3xl font-bold tracking-tight text-slate-900">Members Directory</h1>
+        <p class="mt-2 text-slate-500">Manage library members and administrator accounts.</p>
+    </div>
+    <div class="flex items-center gap-3">
+        <a asp-action="Create" class="btn-primary">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+            Add New Member
+        </a>
+    </div>
+</div>
+
+<div class="card overflow-hidden">
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-slate-200">
+            <thead class="bg-slate-50">
+                <tr>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Member</th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Contact</th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Role</th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
+                    <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-slate-200">
+                @foreach (var user in Model)
+                {
+                    <tr class="hover:bg-slate-50 transition-colors">
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="flex items-center">
+                                <div class="h-10 w-10 flex-shrink-0 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-sm">
+                                    @(user.FullName?.Substring(0, 2).ToUpper() ?? "U")
+                                </div>
+                                <div class="ml-4">
+                                    <div class="text-sm font-medium text-slate-900">
+                                        <a asp-action="Details" asp-route-id="@user.Id" class="hover:underline">@user.FullName</a>
+                                    </div>
+                                    @if (!string.IsNullOrEmpty(user.StudentId))
+                                    {
+                                        <div class="text-xs text-slate-500 text-slate-500">ID: @user.StudentId</div>
+                                    }
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="text-sm text-slate-900">@user.Email</div>
+                            <div class="text-xs text-slate-500">@(string.IsNullOrEmpty(user.PhoneNumber) ? "No phone" : user.PhoneNumber)</div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 @(user.Role == "Admin" ? "bg-amber-100 text-amber-800" : "bg-blue-100 text-blue-800")">
+                                @user.Role
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            @if (user.BanStatus == true)
+                            {
+                                <span class="inline-flex rounded-full bg-rose-100 px-2 text-xs font-semibold leading-5 text-rose-800">
+                                    Suspended
+                                </span>
+                            }
+                            else if (user.IsActive)
+                            {
+                                <span class="inline-flex rounded-full bg-emerald-100 px-2 text-xs font-semibold leading-5 text-emerald-800">
+                                    Active
+                                </span>
+                            }
+                            else
+                            {
+                                <span class="inline-flex rounded-full bg-slate-100 px-2 text-xs font-semibold leading-5 text-slate-800">
+                                    Inactive
+                                </span>
+                            }
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                            <div class="flex items-center justify-end gap-3">
+                                <a asp-action="Details" asp-route-id="@user.Id" class="text-slate-600 hover:text-slate-900 transition-colors">Details</a>
+                                <a asp-action="Edit" asp-route-id="@user.Id" class="text-indigo-600 hover:text-indigo-900 transition-colors">Edit</a>
+                            </div>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+</div>

Frontend/Views/Shared/Components/_Card.cshtml

@@ -0,0 +1,4 @@
+@model string
+<div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden @Model">
+    @RenderBody()
+</div>

Frontend/Views/Shared/_Layout.cshtml

@@ -1,48 +1,213 @@
-<!DOCTYPE html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="en" class="h-full bg-slate-50">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@ViewData["Title"] - Frontend</title>
-    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
-    <link rel="stylesheet" href="~/Frontend.styles.css" asp-append-version="true" />
+    <title>@ViewData["Title"] - Library Management</title>
+    
+    <!-- Google Fonts: Inter -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Tailwind CSS Play CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                    },
+                    colors: {
+                        primary: {
+                            50: '#f8fafc',
+                            100: '#f1f5f9',
+                            200: '#e2e8f0',
+                            300: '#cbd5e1',
+                            400: '#94a3b8',
+                            500: '#64748b',
+                            600: '#475569',
+                            700: '#334155',
+                            800: '#1e293b',
+                            900: '#0f172a',
+                            950: '#020617',
+                        },
+                    },
+                }
+            }
+        }
+    </script>
+    
+    <style type="text/tailwindcss">
+        @@layer base {
+            body { @@apply text-slate-900 antialiased h-full; }
+        }
+        @@layer components {
+            .nav-link { @@apply flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md transition-colors; }
+            .nav-link-active { @@apply bg-slate-900 text-white; }
+            .nav-link-inactive { @@apply text-slate-600 hover:text-slate-900 hover:bg-slate-100; }
+            
+            .card { @@apply bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden; }
+            .btn-primary { @@apply inline-flex items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow transition-colors hover:bg-slate-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50; }
+            .btn-secondary { @@apply inline-flex items-center justify-center rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50; }
+        }
+    </style>
 </head>
-<body>
-    <header>
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
-            <div class="container-fluid">
-                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Frontend</a>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
-                        aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
-                    <ul class="navbar-nav flex-grow-1">
-                        <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
-                        </li>
-                    </ul>
+<body class="h-full">
+    <div class="flex h-full overflow-hidden">
+        <!-- Sidebar -->
+        <aside class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0 z-50">
+            <div class="flex flex-col flex-grow border-r border-slate-200 bg-white pt-5 pb-4 overflow-y-auto">
+                <div class="flex items-center flex-shrink-0 px-4 gap-2">
+                    <div class="bg-slate-900 rounded-lg p-1.5 text-white">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
+                    </div>
+                    <span class="text-lg font-bold tracking-tight">Library OS</span>
+                </div>
+                <div class="mt-8 flex-grow flex flex-col">
+                    <nav class="flex-1 px-2 space-y-1">
+                        <a asp-controller="Home" asp-action="Index" class="nav-link @(ViewContext.RouteData.Values["Controller"]?.ToString() == "Home" ? "nav-link-active" : "nav-link-inactive")">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="15" rx="1"/></svg>
+                            Dashboard
+                        </a>
+                        <a href="/Books" class="nav-link nav-link-inactive">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                            Books Catalog
+                        </a>
+                        <a href="/Borrowings" class="nav-link nav-link-inactive">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"/><path d="M3 16.2V21m0 0h4.8M3 21l6-6"/><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"/><path d="M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>
+                            Active Loans
+                        </a>
+                        @if (User.Identity?.IsAuthenticated == true && User.IsInRole("Admin"))
+                        {
+                            <a href="/Members" class="nav-link @(ViewContext.RouteData.Values["Controller"]?.ToString() == "Members" ? "nav-link-active" : "nav-link-inactive")">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                                Members
+                            </a>
+                        }
+                        
+                        @if (User.Identity?.IsAuthenticated == true && User.IsInRole("Admin"))
+                        {
+                            <a href="/Subscriptions" class="nav-link @(ViewContext.RouteData.Values["Controller"]?.ToString() == "Subscriptions" ? "nav-link-active" : "nav-link-inactive")">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
+                                Memberships
+                            </a>
+                        }
+
+                    </nav>
+                </div>
+                <div class="px-4 py-4 border-t border-slate-100">
+                    <div class="flex items-center gap-3">
+                        <div class="h-8 w-8 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-xs uppercase">
+                            @(User.Identity?.IsAuthenticated == true ? User.Identity.Name?.Substring(0, 2) : "GU")
+                        </div>
+                        <div class="flex flex-col">
+                            @if (User.Identity?.IsAuthenticated == true)
+                            {
+                                <span class="text-sm font-medium">@User.Identity.Name</span>
+                                <span class="text-xs text-slate-500">@User.Claims.FirstOrDefault(c => c.Type == System.Security.Claims.ClaimTypes.Role)?.Value</span>
+                            }
+                            else
+                            {
+                                <span class="text-sm font-medium">Guest User</span>
+                                <span class="text-xs text-slate-500">Sign in to borrow</span>
+                            }
+                        </div>
+                    </div>
                 </div>
             </div>
-        </nav>
-    </header>
-    <div class="container">
-        <main role="main" class="pb-3">
-            @RenderBody()
-        </main>
-    </div>
+        </aside>
 
-    <footer class="border-top footer text-muted">
-        <div class="container">
-            &copy; 2026 - Frontend - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
+        <!-- Main Content Wrapper -->
+        <div class="md:pl-64 flex flex-col flex-1 w-0">
+            <!-- Topbar -->
+            <header class="flex-shrink-0 flex h-16 bg-white border-bottom border-slate-200">
+                <div class="flex-1 px-4 flex justify-between">
+                    <div class="flex-1 flex items-center">
+                        <div class="w-full max-w-sm">
+                            <label for="search" class="sr-only">Search</label>
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <svg class="h-4 w-4 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                                <input id="search" name="search" class="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-md leading-5 bg-slate-50 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-900 focus:border-slate-900 sm:text-sm transition-all" placeholder="Search books, authors, ISBN..." type="search">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ml-4 flex items-center md:ml-6 gap-4">
+                        <button type="button" class="bg-white p-1 rounded-full text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900">
+                            <span class="sr-only">View notifications</span>
+                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                            </svg>
+                        </button>
+                        @if (User.Identity?.IsAuthenticated == true)
+                        {
+                            <a href="/Auth/Logout" class="btn-secondary py-1.5">Logout</a>
+                        }
+                        else
+                        {
+                            <a href="/Auth/Login" class="btn-primary py-1.5">Sign In</a>
+                        }
+                    </div>
+                </div>
+            </header>
+
+            <!-- Main Content -->
+            <main class="flex-1 relative overflow-y-auto focus:outline-none">
+                <div class="py-8 px-4 sm:px-6 md:px-8 max-w-7xl mx-auto">
+                    @RenderBody()
+                </div>
+            </main>
         </div>
-    </footer>
+    </div>
+
+    <!-- Toast Notification Container -->
+    <div id="toast-container" class="fixed bottom-5 right-5 z-[100] flex flex-col gap-3 pointer-events-none"></div>
+
+    <script>
+        function showToast(message, type = 'success') {
+            const container = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            
+            const bgColor = type === 'success' ? 'bg-slate-900' : 'bg-red-600';
+            const icon = type === 'success' 
+                ? '<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>'
+                : '<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>';
+
+            toast.className = `${bgColor} text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 transition-all duration-300 transform translate-y-10 opacity-0 pointer-events-auto min-w-[250px]`;
+            toast.innerHTML = `
+                <div class="shrink-0">${icon}</div>
+                <div class="text-sm font-medium tracking-tight">${message}</div>
+            `;
+
+            container.appendChild(toast);
+
+            // Animate in
+            setTimeout(() => {
+                toast.classList.remove('translate-y-10', 'opacity-0');
+            }, 10);
+
+            // Remove after 3 seconds
+            setTimeout(() => {
+                toast.classList.add('translate-y-[-10px]', 'opacity-0');
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+
+        // Auto-show notifications from TempData if available
+        document.addEventListener('DOMContentLoaded', () => {
+            const success = '@TempData["Success"]';
+            const error = '@TempData["Error"]';
+            if (success) showToast(success, 'success');
+            if (error) showToast(error, 'error');
+        });
+    </script>
+
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
-    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Scripts", required: false)
 </body>

Frontend/Views/Subscriptions/Index.cshtml

@@ -0,0 +1,47 @@
+@model Frontend.Models.SubscriptionsViewModel
+
+@{
+    ViewData["Title"] = "Memberships";
+}
+
+<div class="mb-8">
+    <h1 class="text-2xl font-bold text-slate-900">Memberships</h1>
+    <p class="text-slate-600 mt-1">Available membership plans in the system</p>
+</div>
+
+<!-- Available Plans Section -->
+<div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        @foreach (var plan in Model.AvailableMemberships)
+        {
+            <div class="card flex flex-col h-full relative transition duration-200 hover:shadow-md">
+                <div class="p-6 border-b border-slate-100 flex-grow">
+                    <h3 class="text-lg font-bold text-slate-900 uppercase tracking-wider mb-2">@plan.Type</h3>
+                    <div class="flex items-baseline gap-1 mb-4">
+                        <span class="text-3xl font-extrabold text-slate-900">@plan.Price.ToString("N0") <span class="text-lg text-slate-500 font-medium">MMK</span></span>
+                        <span class="text-slate-500 font-medium">/ @(plan.DurationMonths == 1 ? "month" : $"{plan.DurationMonths} months")</span>
+                    </div>
+                    
+                    <ul class="space-y-3 mt-6">
+                        <li class="flex gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 flex-shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span class="text-slate-600">Borrow up to <span class="font-bold text-slate-900">@plan.MaxBooks books</span> at a time</span>
+                        </li>
+                        <li class="flex gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 flex-shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span class="text-slate-600">Keep books for <span class="font-bold text-slate-900">@plan.BorrowingDays days</span></span>
+                        </li>
+                        <li class="flex gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500 flex-shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
+                            <span class="text-slate-600">Full catalog access</span>
+                        </li>
+                    </ul>
+                </div>
+                
+                <div class="p-4 bg-slate-50 mt-auto text-center border-t border-slate-100">
+                    <span class="text-xs text-slate-500 font-medium uppercase tracking-widest">System Plan</span>
+                </div>
+            </div>
+        }
+    </div>
+</div>

Frontend/appsettings.json

@@ -5,5 +5,6 @@
       "Microsoft.AspNetCore": "Warning"
     }
   },
-  "AllowedHosts": "*"
+  "AllowedHosts": "*",
+  "BackendApiBaseUrl": "https://localhost:7028"
 }