diff --git a/Presentation/ASPNET/FrontEnd/Pages/CustomerCategories/CustomerCategoryList.cshtml b/Presentation/ASPNET/FrontEnd/Pages/CustomerCategories/CustomerCategoryList.cshtml
index 70619065..77ee1499 100644
--- a/Presentation/ASPNET/FrontEnd/Pages/CustomerCategories/CustomerCategoryList.cshtml
+++ b/Presentation/ASPNET/FrontEnd/Pages/CustomerCategories/CustomerCategoryList.cshtml
@@ -4,56 +4,57 @@
 }
 
 <div id="app" v-cloak>
-    <div class="row">
-        <div class="col-12">
-            <div class="grid-container">
-                <div ref="mainGridRef"></div>
+    <div class="container-fluid py-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2 class="fw-bold text-primary">Customer Categories</h2>
+            <button class="btn btn-gradient-primary shadow-sm" v-on:click="handler.openAddModal">
+                <i class="bi bi-plus-lg me-1"></i> Add New Category
+            </button>
+        </div>
+
+        <div class="card shadow-lg border-0 rounded-4">
+            <div class="card-body p-0">
+                <div class="grid-container p-3">
+                    <div ref="mainGridRef"></div>
+                </div>
             </div>
         </div>
     </div>
 
+    <!-- Modern Modal -->
     <div class="modal fade" ref="mainModalRef" id="MainModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
         <div class="modal-dialog modal-dialog-centered modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" v-text="state.mainTitle"></h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
+                <div class="modal-header bg-gradient text-white py-3">
+                    <h5 class="modal-title fw-semibold" v-text="state.mainTitle"></h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body">
-                    <input type="hidden" v-model="state.id" id="Id" name="Id" />
+
+                <div class="modal-body p-4">
                     <form id="MainForm">
-                        <div class="row">
-                            <div class="col-md-12">
-                                <div class="card">
-                                    <div class="card-header">
-                                        <h5>Main Info</h5>
-                                    </div>
-                                    <div class="card-body">
-                                        <div class="row mb-2">
-                                            <div class="col-md-6">
-                                                <label for="Name">Name</label>
-                                                <input ref="nameRef" v-model="state.name" />
-                                                <label class="text-danger" v-text="state.errors.name"></label>
-                                            </div>
-                                        </div>
-                                        <div class="row mb-2">
-                                            <div class="col-12">
-                                                <label for="Description">Description</label>
-                                                <textarea class="form-control" rows="3" v-model="state.description"></textarea>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
+                        <div class="row g-3">
+                            <div class="col-md-6">
+                                <label for="Name" class="form-label fw-semibold">Name</label>
+                                <input ref="nameRef" v-model="state.name" class="form-control rounded-3 shadow-sm" placeholder="Enter category name" />
+                                <div class="text-danger small mt-1" v-text="state.errors.name"></div>
+                            </div>
+
+                            <div class="col-12">
+                                <label for="Description" class="form-label fw-semibold">Description</label>
+                                <textarea class="form-control rounded-3 shadow-sm" rows="4" v-model="state.description" placeholder="Write a brief description..."></textarea>
                             </div>
                         </div>
                     </form>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+
+                <div class="modal-footer border-0 px-4 pb-4 d-flex justify-content-end">
+                    <button type="button" class="btn btn-outline-secondary rounded-3 px-4" data-bs-dismiss="modal">
+                        Close
+                    </button>
                     <button type="button"
                             id="MainSaveButton"
-                            class="btn"
-                            v-bind:class="state.deleteMode ? 'btn-danger' : 'btn-primary'"
+                            class="btn rounded-3 px-4 ms-2"
+                            v-bind:class="state.deleteMode ? 'btn-danger' : 'btn-primary btn-gradient-primary'"
                             v-on:click="handler.handleSubmit"
                             v-bind:disabled="state.isSubmitting">
                         <span class="spinner-border spinner-border-sm me-2" v-if="state.isSubmitting" role="status" aria-hidden="true"></span>
@@ -66,6 +67,44 @@
     </div>
 </div>
 
+@section styles {
+    <style>
+        body {
+            background-color: #f6f8fa;
+            font-family: 'Inter', 'Segoe UI', sans-serif;
+        }
+
+        .btn-gradient-primary {
+            background: linear-gradient(135deg, #007bff 0%, #0056d2 100%);
+            color: white !important;
+            transition: all 0.2s ease-in-out;
+        }
+        .btn-gradient-primary:hover {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .modal-header.bg-gradient {
+            background: linear-gradient(135deg, #0056d2 0%, #007bff 100%);
+        }
+
+        .card {
+            border-radius: 1rem !important;
+        }
+
+        input.form-control, textarea.form-control {
+            border: 1px solid #e0e6ed !important;
+            transition: border-color 0.2s, box-shadow 0.2s;
+        }
+        input.form-control:focus, textarea.form-control:focus {
+            border-color: #007bff !important;
+            box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
+        }
+
+        [v-cloak] { display: none; }
+    </style>
+}
+
 @section scripts {
     <script src="~/FrontEnd/Pages/CustomerCategories/CustomerCategoryList.cshtml.js"></script>
-}
\ No newline at end of file
+}
diff --git a/Presentation/ASPNET/Program.cs b/Presentation/ASPNET/Program.cs
index b30b3786..053bf842 100644
--- a/Presentation/ASPNET/Program.cs
+++ b/Presentation/ASPNET/Program.cs
@@ -1,21 +1,48 @@
 using ASPNET.BackEnd;
 using ASPNET.BackEnd.Common.Middlewares;
 using ASPNET.FrontEnd;
+using Serilog;
 
 var builder = WebApplication.CreateBuilder(args);
 
-//>>> Create Logs folder for Serilog
+//>>> Configure Serilog logging
 var logPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "app_data", "logs");
-if (!Directory.Exists(logPath))
+try
 {
-    Directory.CreateDirectory(logPath);
+    if (!Directory.Exists(logPath))
+    {
+        Directory.CreateDirectory(logPath);
+    }
 }
+catch (Exception ex)
+{
+    Console.WriteLine($"Failed to create logs directory: {ex.Message}");
+}
+
+// Configure Serilog
+Log.Logger = new LoggerConfiguration()
+    .WriteTo.File(Path.Combine(logPath, "app.log"), rollingInterval: RollingInterval.Day)
+    .CreateLogger();
+
+builder.Host.UseSerilog();
 
 builder.Services.AddBackEndServices(builder.Configuration);
 builder.Services.AddFrontEndServices();
 
+// Configure CORS policy
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("AllowAll", policy =>
+    {
+        policy.AllowAnyOrigin()
+              .AllowAnyHeader()
+              .AllowAnyMethod();
+    });
+});
+
 var app = builder.Build();
 
+// Register backend services and routes
 app.RegisterBackEndBuilder(app.Environment, app, builder.Configuration);
 
 if (!app.Environment.IsDevelopment())
@@ -25,13 +52,32 @@
 }
 
 app.UseRouting();
-app.UseCors();
-app.UseMiddleware<GlobalApiExceptionHandlerMiddleware>();
+
+// Apply CORS policy
+app.UseCors("AllowAll");
+
+// Authentication & Authorization
 app.UseAuthentication();
 app.UseAuthorization();
-app.MapStaticAssets();
 
+// Global exception middleware should be after auth
+app.UseMiddleware<GlobalApiExceptionHandlerMiddleware>();
+
+// Map static assets and frontend/backend routes
+app.MapStaticAssets();
 app.MapFrontEndRoutes();
 app.MapBackEndRoutes();
 
-app.Run();
+// Safe startup
+try
+{
+    app.Run();
+}
+catch (Exception ex)
+{
+    Log.Fatal(ex, "Application failed to start");
+}
+finally
+{
+    Log.CloseAndFlush();
+}