diff --git a/ASI.Basecode.WebApp/ASI.Basecode.WebApp.csproj b/ASI.Basecode.WebApp/ASI.Basecode.WebApp.csproj
index ee031fa..4f21f09 100644
--- a/ASI.Basecode.WebApp/ASI.Basecode.WebApp.csproj
+++ b/ASI.Basecode.WebApp/ASI.Basecode.WebApp.csproj
@@ -6,6 +6,40 @@
     <UserSecretsId>872bac6a-ed64-4226-a559-064bd37b166e</UserSecretsId>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Compile Remove="Views\NewFolder1\**" />
+    <Compile Remove="Views\NewFolder\**" />
+    <Compile Remove="Views\Shared\NewFolder\**" />
+    <Content Remove="Views\NewFolder1\**" />
+    <Content Remove="Views\NewFolder\**" />
+    <Content Remove="Views\Shared\NewFolder\**" />
+    <EmbeddedResource Remove="Views\NewFolder1\**" />
+    <EmbeddedResource Remove="Views\NewFolder\**" />
+    <EmbeddedResource Remove="Views\Shared\NewFolder\**" />
+    <EntityDeploy Remove="Views\NewFolder1\**" />
+    <EntityDeploy Remove="Views\NewFolder\**" />
+    <EntityDeploy Remove="Views\Shared\NewFolder\**" />
+    <None Remove="Views\NewFolder1\**" />
+    <None Remove="Views\NewFolder\**" />
+    <None Remove="Views\Shared\NewFolder\**" />
+    <TypeScriptCompile Remove="Views\NewFolder1\**" />
+    <TypeScriptCompile Remove="Views\NewFolder\**" />
+    <TypeScriptCompile Remove="Views\Shared\NewFolder\**" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Compile Remove="Controllers\HomeController1.cs" />
+    <Compile Remove="Controllers\NotifProfileController.cs" />
+    <Compile Remove="Views\Shared\Index1.cshtml.cs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Remove="Views\Shared\Calendar.cshtml" />
+    <Content Remove="Views\Shared\Component.razor" />
+    <Content Remove="Views\Shared\Index.cshtml" />
+    <Content Remove="Views\Shared\Index1.cshtml" />
+  </ItemGroup>
+
   <ItemGroup>
     <None Remove="appsettings.json.rej" />
   </ItemGroup>
@@ -39,4 +73,12 @@
   <ItemGroup>
     <Folder Include="wwwroot\img\" />
   </ItemGroup>
+
+  <ItemGroup>
+    <UpToDateCheckInput Remove="Views\Shared\Calendar.cshtml" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <_ContentIncludedByDefault Remove="Views\Shared\Calendar.cshtml" />
+  </ItemGroup>
 </Project>
diff --git a/ASI.Basecode.WebApp/Controllers/AccountController.cs b/ASI.Basecode.WebApp/Controllers/AccountController.cs
index 3a55a55..d2f3f36 100644
--- a/ASI.Basecode.WebApp/Controllers/AccountController.cs
+++ b/ASI.Basecode.WebApp/Controllers/AccountController.cs
@@ -26,6 +26,7 @@ public class AccountController : ControllerBase<AccountController>
         private readonly TokenProviderOptionsFactory _tokenProviderOptionsFactory;
         private readonly IConfiguration _appConfiguration;
         private readonly IUserService _userService;
+        private const string AdminUserId = "admin"; // Temporary admin user ID
 
         /// <summary>
         /// Initializes a new instance of the <see cref="AccountController"/> class.
@@ -77,7 +78,7 @@ public ActionResult Login()
         /// <param name="model">The model.</param>
         /// <param name="returnUrl">The return URL.</param>
         /// <returns> Created response view </returns>
-        [HttpPost]
+        /*[HttpPost]
         [AllowAnonymous]
         public async Task<IActionResult> Login(LoginViewModel model, string returnUrl)
         {
@@ -92,7 +93,7 @@ public async Task<IActionResult> Login(LoginViewModel model, string returnUrl)
 
             return RedirectToAction("Index", "Home");
 
-            /*var loginResult = _userService.AuthenticateUser(model.UserId, model.Password, ref user);
+            *//*var loginResult = _userService.AuthenticateUser(model.UserId, model.Password, ref user);
             if (loginResult == LoginResult.Success)
             {
                 // 認証OK
@@ -106,7 +107,40 @@ public async Task<IActionResult> Login(LoginViewModel model, string returnUrl)
                 TempData["ErrorMessage"] = "Incorrect UserId or Password";
                 return View();
             }
-            return View();*/
+            return View();*//*
+        }*/
+
+        //the code above being commented is the original login logic of basecode. The code below this comment is the temporary solution for login para mapasok si admin
+
+        [HttpPost]
+        [AllowAnonymous]
+        public async Task<IActionResult> Login(LoginViewModel model, string returnUrl)
+        {
+            this._session.SetString("HasSession", "Exist");
+
+            // Temporary login logic
+            if (model.UserId == AdminUserId && model.Password == "adminpass")
+            {
+                // Admin login
+                User user = new() { Id = 1, UserId = AdminUserId, Name = "Admin User", Password = "adminpass" };
+                await this._signInManager.SignInAsync(user);
+                this._session.SetString("UserName", user.Name);
+                this._session.SetString("UserRole", "Admin");
+                return RedirectToAction("Index", "Admin");
+            }
+            else if (!string.IsNullOrEmpty(model.UserId) && !string.IsNullOrEmpty(model.Password))
+            {
+                // Regular user login
+                User user = new() { Id = 2, UserId = model.UserId, Name = model.UserId, Password = model.Password };
+                await this._signInManager.SignInAsync(user);
+                this._session.SetString("UserName", user.Name);
+                this._session.SetString("UserRole", "User");
+                return RedirectToAction("Index", "Home");
+            }
+
+            // Invalid login
+            TempData["ErrorMessage"] = "Incorrect UserId or Password";
+            return View();
         }
 
         [HttpGet]
@@ -146,5 +180,17 @@ public async Task<IActionResult> SignOutUser()
             await this._signInManager.SignOutAsync();
             return RedirectToAction("Login", "Account");
         }
+
+        /// <summary>
+        /// Sign Out current admin and return login view.
+        /// </summary>
+        /// <returns>Created response view</returns>
+        [AllowAnonymous]
+        public async Task<IActionResult> SignOutAdmin()
+        {
+            await this._signInManager.SignOutAsync();
+            HttpContext.Session.Clear();
+            return RedirectToAction("Login", "Account");
+        }
     }
 }
diff --git a/ASI.Basecode.WebApp/Controllers/AdminController.cs b/ASI.Basecode.WebApp/Controllers/AdminController.cs
new file mode 100644
index 0000000..1c855cf
--- /dev/null
+++ b/ASI.Basecode.WebApp/Controllers/AdminController.cs
@@ -0,0 +1,83 @@
+using ASI.Basecode.WebApp.Mvc;
+using AutoMapper;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging;
+
+namespace ASI.Basecode.WebApp.Controllers
+{
+    /// <summary>
+    /// Admin Controller
+    /// </summary>
+    public class AdminController : ControllerBase<AdminController>
+    {
+        /// <summary>
+        /// Constructor
+        /// </summary>
+        /// <param name="httpContextAccessor"></param>
+        /// <param name="loggerFactory"></param>
+        /// <param name="configuration"></param>
+        /// <param name="localizer"></param>
+        /// <param name="mapper"></param>
+        public AdminController(IHttpContextAccessor httpContextAccessor,
+                               ILoggerFactory loggerFactory,
+                               IConfiguration configuration,
+                               IMapper mapper = null) : base(httpContextAccessor, loggerFactory, configuration, mapper)
+        {
+
+        }
+
+        /// <summary>
+        /// Returns Admin Home View.
+        /// </summary>
+        /// <returns> Admin Home View </returns>
+        public IActionResult Index()
+        {
+            if (HttpContext.Session.GetString("UserRole") != "Admin")
+            {
+                return RedirectToAction("Login", "Account");
+            }
+            return View();
+        }
+
+        /// <summary>
+        /// Returns Admin Analytics View.
+        /// </summary>
+        /// <returns> Admin Analytics View </returns>
+        public IActionResult Analytics()
+        {
+            if (HttpContext.Session.GetString("UserRole") != "Admin")
+            {
+                return RedirectToAction("Login", "Account");
+            }
+            return View();
+        }
+
+        /// <summary>
+        /// Returns Manage Roles View.
+        /// </summary>
+        /// <returns> Manage Roles View </returns>
+        public IActionResult ManageRoles()
+        {
+            if (HttpContext.Session.GetString("UserRole") != "Admin")
+            {
+                return RedirectToAction("Login", "Account");
+            }
+            return View();
+        }
+
+        /// <summary>
+        /// Returns Admin Settings View.
+        /// </summary>
+        /// <returns> Admin Settings View </returns>
+        public IActionResult AdminSettings()
+        {
+            if (HttpContext.Session.GetString("UserRole") != "Admin")
+            {
+                return RedirectToAction("Login", "Account");
+            }
+            return View();
+        }
+    }
+}
diff --git a/ASI.Basecode.WebApp/Controllers/HomeController.cs b/ASI.Basecode.WebApp/Controllers/HomeController.cs
index b0c6e99..19d579a 100644
--- a/ASI.Basecode.WebApp/Controllers/HomeController.cs
+++ b/ASI.Basecode.WebApp/Controllers/HomeController.cs
@@ -1,40 +1,52 @@
-using ASI.Basecode.WebApp.Mvc;
-using AutoMapper;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.Extensions.Configuration;
-using Microsoft.Extensions.Logging;
+    using ASI.Basecode.WebApp.Mvc;
+    using AutoMapper;
+    using Microsoft.AspNetCore.Http;
+    using Microsoft.AspNetCore.Mvc;
+    using Microsoft.Extensions.Configuration;
+    using Microsoft.Extensions.Logging;
 
-namespace ASI.Basecode.WebApp.Controllers
-{
-    /// <summary>
-    /// Home Controller
-    /// </summary>
-    public class HomeController : ControllerBase<HomeController>
+    namespace ASI.Basecode.WebApp.Controllers
     {
         /// <summary>
-        /// Constructor
+        /// Home Controller
         /// </summary>
-        /// <param name="httpContextAccessor"></param>
-        /// <param name="loggerFactory"></param>
-        /// <param name="configuration"></param>
-        /// <param name="localizer"></param>
-        /// <param name="mapper"></param>
-        public HomeController(IHttpContextAccessor httpContextAccessor,
-                              ILoggerFactory loggerFactory,
-                              IConfiguration configuration,
-                              IMapper mapper = null) : base(httpContextAccessor, loggerFactory, configuration, mapper)
+        public class HomeController : ControllerBase<HomeController>
         {
+            /// <summary>
+            /// Constructor
+            /// </summary>
+            /// <param name="httpContextAccessor"></param>
+            /// <param name="loggerFactory"></param>
+            /// <param name="configuration"></param>
+            /// <param name="localizer"></param>
+            /// <param name="mapper"></param>
+            public HomeController(IHttpContextAccessor httpContextAccessor,
+                                  ILoggerFactory loggerFactory,
+                                  IConfiguration configuration,
+                                  IMapper mapper = null) : base(httpContextAccessor, loggerFactory, configuration, mapper)
+            {
 
-        }
+            }
 
-        /// <summary>
-        /// Returns Home View.
-        /// </summary>
-        /// <returns> Home View </returns>
-        public IActionResult Index()
-        {
-            return View();
-        }
+            /// <summary>
+            /// Returns Home View.
+            /// </summary>
+            /// <returns> Home View </returns>
+            public IActionResult Index()
+            {
+                return View();
+            }
+            public IActionResult ViewBookings()
+            {
+                return View();
+            }
+            public IActionResult Calendar()
+            {
+                return View();
+            }
+            public IActionResult UserSettings()
+            {
+                return View();
+            }
+         }
     }
-}
diff --git a/ASI.Basecode.WebApp/Controllers/ViewBookingsController.cs b/ASI.Basecode.WebApp/Controllers/ViewBookingsController.cs
new file mode 100644
index 0000000..8c7d170
--- /dev/null
+++ b/ASI.Basecode.WebApp/Controllers/ViewBookingsController.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ASI.Basecode.WebApp.Controllers
+{
+    public class ViewBookingsController : Controller
+    {
+        public IActionResult ViewBookings()
+        {
+            return View();
+        }
+    }
+}
diff --git a/ASI.Basecode.WebApp/Program.cs b/ASI.Basecode.WebApp/Program.cs
index c31c03e..3277f46 100644
--- a/ASI.Basecode.WebApp/Program.cs
+++ b/ASI.Basecode.WebApp/Program.cs
@@ -36,5 +36,19 @@
 app.MapControllers();
 app.MapRazorPages();
 
+
+app.UseEndpoints(endpoints =>
+{
+    endpoints.MapControllerRoute(
+        name: "admin",
+        pattern: "Admin/{action=Index}/{id?}",
+        defaults: new { controller = "Admin" });
+
+    endpoints.MapControllerRoute(
+        name: "default",
+        pattern: "{controller=Home}/{action=Index}/{id?}");
+});
+
+
 // Run application
 app.Run();
diff --git a/ASI.Basecode.WebApp/Startup.cs b/ASI.Basecode.WebApp/Startup.cs
index a997939..a42d089 100644
--- a/ASI.Basecode.WebApp/Startup.cs
+++ b/ASI.Basecode.WebApp/Startup.cs
@@ -119,6 +119,15 @@ public void ConfigureServices(IServiceCollection services)
             services.AddSingleton<IFileProvider>(
                 new PhysicalFileProvider(
                     Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")));
+
+
+            //gi add ni for session services
+            services.AddSession(options =>
+            {
+                options.IdleTimeout = TimeSpan.FromMinutes(30);
+                options.Cookie.HttpOnly = true;
+                options.Cookie.IsEssential = true;
+            });
         }
 
         /// <summary>
@@ -152,6 +161,9 @@ public void ConfigureApp(IApplicationBuilder app, IWebHostEnvironment env)
 
             this._app.UseAuthentication();
             this._app.UseAuthorization();
+
+            //for session use
+            this._app.UseSession();
         }
     }
 }
diff --git a/ASI.Basecode.WebApp/Views/Admin/AdminSettings.cshtml b/ASI.Basecode.WebApp/Views/Admin/AdminSettings.cshtml
new file mode 100644
index 0000000..9f081b6
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Admin/AdminSettings.cshtml
@@ -0,0 +1,63 @@
+@{
+    ViewData["Title"] = "Admin Settings";
+}
+<div class="outer-container">
+    <div class="main-content">
+        <h1>Admin Settings</h1>
+        <!--I add dri admin settings code for later -->
+    </div>
+</div>
+
+@section Styles {
+    <style>
+
+         @* css code ni sa container, ayaw labti para uniform, scroll down naay space adto for manipulating styles *@
+
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .outer-container {
+            background-color: #f0f0f0;
+            padding: 20px;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+            height: calc(100vh - 40px);
+            width: 105%;
+            margin: 0 auto;
+            max-width: 105%;
+            position: relative;
+            overflow: hidden;
+            top: 20px;
+        }
+
+        .main-content {
+            height: 85vh;
+            background-color: #185D62;
+            padding: 20px;
+            color: #fff;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            top: -5px;
+        }
+
+        h1 {
+            font-size: 36px;
+            font-weight: 500;
+            margin-top: 0;
+            margin-bottom: 30px;
+            letter-spacing: 0.5px;
+        }
+
+         <!--Add dri code sa imong css styles sa imong admin settings nga code-->
+
+    </style>
+}
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Admin/Analytics.cshtml b/ASI.Basecode.WebApp/Views/Admin/Analytics.cshtml
new file mode 100644
index 0000000..b14ff3e
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Admin/Analytics.cshtml
@@ -0,0 +1,63 @@
+@{
+    ViewData["Title"] = "Analytics";
+}
+<div class="outer-container">
+    <div class="main-content">
+        <h1>Report and Analytics</h1>
+        <!--I add dri report and analytics code for later -->
+    </div>
+</div>
+
+@section Styles {
+    <style>
+
+         @* css code ni sa container, ayaw labti para uniform, scroll down naay space adto for manipulating styles *@
+
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .outer-container {
+            background-color: #f0f0f0;
+            padding: 20px;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+            height: calc(100vh - 40px);
+            width: 105%;
+            margin: 0 auto;
+            max-width: 105%;
+            position: relative;
+            overflow: hidden;
+            top: 20px;
+        }
+
+        .main-content {
+            height: 85vh;
+            background-color: #185D62;
+            padding: 20px;
+            color: #fff;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            top: -5px;
+        }
+
+        h1 {
+            font-size: 36px;
+            font-weight: 500;
+            margin-top: 0;
+            margin-bottom: 30px;
+            letter-spacing: 0.5px;
+        }
+
+        <!--Add dri code sa imong css styles sa imong report and analytics nga code-->
+
+    </style>
+}
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Admin/Index.cshtml b/ASI.Basecode.WebApp/Views/Admin/Index.cshtml
new file mode 100644
index 0000000..368a7b2
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Admin/Index.cshtml
@@ -0,0 +1,62 @@
+@{
+    ViewData["Title"] = "Admin Home Page";
+}
+<div class="outer-container">
+    <div class="main-content">
+        <h1>Admin Home</h1>
+        <!--I add dri admin home code for later -->
+    </div>
+</div>
+
+@section Styles {
+    <style>
+
+        @* css code ni sa container, ayaw labti para uniform, scroll down naay space adto for manipulating styles *@
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .outer-container {
+            background-color: #f0f0f0;
+            padding: 20px;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+            height: calc(100vh - 40px);
+            width: 105%;
+            margin: 0 auto;
+            max-width: 105%;
+            position: relative;
+            overflow: hidden;
+            top: 20px;
+        }
+
+        .main-content {
+            height: 85vh;
+            background-color: #185D62;
+            padding: 20px;
+            color: #fff;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            top: -5px;
+        }
+
+        h1 {
+            font-size: 36px;
+            font-weight: 500;
+            margin-top: 0;
+            margin-bottom: 30px;
+            letter-spacing: 0.5px;
+        }
+
+         <!--Add dri code sa imong css styles sa imong admin home nga code-->
+
+    </style>
+}
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Admin/ManageRoles.cshtml b/ASI.Basecode.WebApp/Views/Admin/ManageRoles.cshtml
new file mode 100644
index 0000000..50b6ae8
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Admin/ManageRoles.cshtml
@@ -0,0 +1,64 @@
+@{
+    ViewData["Title"] = "Manage Roles";
+}
+<div class="outer-container">
+    <div class="main-content">
+        <h1>Manage Roles</h1>
+        <!--I add dri manage roles code for later -->
+    </div>
+</div>
+
+@section Styles {
+    <style>
+
+         @* css code ni sa container, ayaw labti para uniform, scroll down naay space adto for manipulating styles *@
+
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .outer-container {
+            background-color: #f0f0f0;
+            padding: 20px;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+            height: calc(100vh - 40px);
+            width: 105%;
+            margin: 0 auto;
+            max-width: 105%;
+            position: relative;
+            overflow: hidden;
+            top: 20px;
+        }
+
+        .main-content {
+            height: 85vh;
+            background-color: #185D62;
+            padding: 20px;
+            color: #fff;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            top: -5px;
+        }
+
+        h1 {
+            font-size: 36px;
+            font-weight: 500;
+            margin-top: 0;
+            margin-bottom: 30px;
+            letter-spacing: 0.5px;
+        }
+
+        <!--Add dri code sa imong css styles sa imong manage roles nga code-->
+
+
+    </style>
+}
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Home/Calendar.cshtml b/ASI.Basecode.WebApp/Views/Home/Calendar.cshtml
new file mode 100644
index 0000000..3d2b2fc
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Home/Calendar.cshtml
@@ -0,0 +1,63 @@
+@{
+    ViewData["Title"] = "Calendar";
+}
+<div class="outer-container">
+    <div class="main-content">
+        <h1>Calendar</h1>
+        <!--I add dri calendar code for later -->
+    </div>
+</div>
+
+@section Styles {
+    <style>
+
+         @* css code ni sa container, ayaw labti para uniform, scroll down naay space adto for manipulating styles *@
+
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .outer-container {
+            background-color: #f0f0f0;
+            padding: 20px;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+            height: calc(100vh - 40px);
+            width: 105%;
+            margin: 0 auto;
+            max-width: 105%;
+            position: relative;
+            overflow: hidden;
+            top: 20px;
+        }
+
+        .main-content {
+            height: 85vh;
+            background-color: #185D62;
+            padding: 20px;
+            color: #fff;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            top: -5px;
+        }
+
+        h1 {
+            font-size: 36px;
+            font-weight: 500;
+            margin-top: 0;
+            margin-bottom: 30px;
+            letter-spacing: 0.5px;
+        }
+
+        <!--Add dri code sa imong css styles sa imong calendar nga code-->
+
+    </style>
+}
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Home/Index.cshtml b/ASI.Basecode.WebApp/Views/Home/Index.cshtml
index d2d19bd..0a8353d 100644
--- a/ASI.Basecode.WebApp/Views/Home/Index.cshtml
+++ b/ASI.Basecode.WebApp/Views/Home/Index.cshtml
@@ -1,8 +1,500 @@
 @{
-    ViewData["Title"] = "Home Page";
+    ViewData["Title"] = "User Home Page";
 }
+<div class="outer-container">
+    <div class="main-content">
+        <div class="header">
+            <div id="addBookingTab" class="tab active" onclick="switchTab('addBooking')">
+                <i class="fas fa-plus"></i>
+                <span>Add Booking</span>
+            </div>
+            <div id="myBookingsTab" class="tab" onclick="switchTab('myBookings')">
+                <i class="fas fa-calendar-check"></i>
+                <span>My Bookings</span>
+            </div>
+        </div>
+        <div id="addBookingContent" class="content">
+            <div class="left-pane">
+                <div class="background-image">
+                    <div class="overlay">
+                        <div class="date-time">
+                            <span class="time-now">11:11</br>
+                            <span class="date-now">Tuesday, June 18</span>
+                        </div>
+                        <div class="book-now">
+                            <button>Book now</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="right-pane">
+                <div class="booking-info">
+                    <h2>Today's Booking</h2>
+                    <div class="booking-item">
+                        <span class="time">09:00</span>
+                        <span class="title">Project Management Mock Defense</span>
+                        <span class="location">Training Room</span>
+                    </div>
+                    <div class="booking-item">
+                        <span class="time">11:00</span>
+                        <span class="title">C# Mock Defense</span>
+                        <span class="location">Training Room</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="myBookingsContent" class="content" style="display: none;">
+            <!-- I add code dri for my bookings if ready na--> 
+        </div>
+    </div>
+</div>
+
+<div id="addMeetingModal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2>Add a Meeting</h2>
+        <form id="addMeetingForm">
+            <label for="meetingName">Meeting Name</label>
+            <input type="text" id="meetingName" name="meetingName" required>
+
+            <label for="startDate">Start Date</label>
+            <input type="date" id="startDate" name="startDate" required>
+
+            <label for="startTime">Start Time</label>
+            <input type="time" id="startTime" name="startTime" required>
+
+            <label for="endDate">End Date</label>
+            <input type="date" id="endDate" name="endDate" required>
 
-<div class="text-center">
-    <h1 class="display-4">Welcome</h1>
-    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
+            <label for="endTime">End Time</label>
+            <input type="time" id="endTime" name="endTime" required>
+
+            <label for="recurring">Recurring</label>
+            <input type="checkbox" id="recurring" name="recurring">
+
+            <label for="room">Room</label>
+            <input type="text" id="room" name="room" required>
+
+            <div class="buttons">
+                <button type="button" id="addMeetingButton">Add Meeting</button>
+                <button type="button" id="resetButton">Reset</button>
+            </div>
+        </form>
+    </div>
 </div>
+
+<script>
+    function switchTab(tabName) {
+        // Taguan ani tanan content
+        document.getElementById('addBookingContent').style.display = 'none';
+        document.getElementById('myBookingsContent').style.display = 'none';
+
+        // Kuhaon ang active class sa tanan nga tabs
+        document.getElementById('addBookingTab').classList.remove('active');
+        document.getElementById('myBookingsTab').classList.remove('active');
+
+        // Ipakita ang gipili nga content ug ibutang ang active class
+        document.getElementById(tabName + 'Content').style.display = 'flex';
+        document.getElementById(tabName + 'Tab').classList.add('active');
+    }
+</script>
+
+<script>
+    // pagkuha sa modal
+    var modal = document.getElementById("addMeetingModal");
+
+    // pag open sa modal
+    var btn = document.querySelector(".book-now button");
+
+    // pag close sa modal
+    var span = document.getElementsByClassName("close")[0];
+
+    // mga buttons ubos sa modal form
+    var form = document.getElementById("addMeetingForm");
+    var addMeetingButton = document.getElementById("addMeetingButton");
+    var resetButton = document.getElementById("resetButton");
+
+    btn.onclick = function () {
+        modal.style.display = "block";
+    }
+
+    span.onclick = function () {
+        modal.style.display = "none";
+    }
+
+    // Kung i-click sa user bisan asa gawas sa modal, ma close sya
+    window.onclick = function (event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+
+    // Pag-handle sa form submission
+    addMeetingButton.onclick = function () {
+        // pagkuha sa data sa form
+        var meetingName = document.getElementById("meetingName").value;
+        var startDate = document.getElementById("startDate").value;
+        var startTime = document.getElementById("startTime").value;
+        var endDate = document.getElementById("endDate").value;
+        var endTime = document.getElementById("endTime").value;
+        var recurring = document.getElementById("recurring").checked;
+        var room = document.getElementById("room").value;
+
+        // submission logic diri
+        console.log("Meeting Name:", meetingName);
+        console.log("Start Date:", startDate);
+        console.log("Start Time:", startTime);
+        console.log("End Date:", endDate);
+        console.log("End Time:", endTime);
+        console.log("Recurring:", recurring);
+        console.log("Room:", room);
+
+        modal.style.display = "none";
+        form.reset();
+    }
+
+    // form reset
+    resetButton.onclick = function () {
+        form.reset();
+    }
+</script>
+
+@section Styles {
+    <style>
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .outer-container {
+            background-color: #f0f0f0;
+            padding: 20px;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: row;
+            height: 100vh; 
+            justify-content: center;
+            align-items: center;
+            height: calc(100vh - 40px);
+            width: 105%;
+            margin: 0 auto;
+            max-width: 105%;
+            position: relative;
+            overflow: hidden;
+            top: 20px;
+        }
+
+        .notification-profile {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            position: absolute;
+            top: 20px;
+            right: 20px;
+        }
+
+        .notification {
+            position: relative;
+            margin-right: 20px;
+            color: #185D62;
+            font-size: 24px;
+            cursor: pointer;
+        }
+
+        .badge {
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            background-color: red;
+            color: white;
+            font-size: 12px;
+            padding: 4px 6px;
+            border-radius: 50%;
+        }
+
+        .profile-picture {
+            position: relative;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 2px solid #1BC7D2;
+        }
+
+            .profile-picture img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: 50%;
+            }
+
+        .main-content {
+            height: 85vh;
+            background-color: #185D62;
+            padding: 20px;
+            color: #fff;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            top: -5px; 
+        }
+
+        .header {
+            display: flex;
+            justify-content: flex-start;
+            margin-bottom: 20px;
+            border-bottom: 2px solid #1BC7D2;
+        }
+
+            .header .tab {
+                padding: 10px 20px;
+                cursor: pointer;
+                background-color: #185D62;
+                color: #fff;
+                border-radius: 5px 5px 0 0;
+                margin-right: 10px;
+            }
+
+                .header .tab.active {
+                    background-color: #1BC7D2;
+                    color: #000;
+                }
+
+        .content {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            height: 100%;
+            overflow-y: hidden; 
+        }
+
+        .left-pane, .right-pane {
+            flex: 1;
+            margin: 10px;
+        }
+
+        .background-image {
+            background-image: url("/img/book.jpg");
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            width: 100%;
+            height: 85%;
+            position: relative;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            text-align: center;
+        }
+
+        .date-time {
+            margin-bottom: 20px;
+        }
+
+            .date-time .time-now,
+            .date-time .date-now {
+                display: block;
+                font-size: 40px; 
+                line-height: 1.2;
+                margin-bottom: 10px; 
+            }
+
+        .book-now button {
+            background-color: #5bc0de; 
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            font-size: 24px; 
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+        }
+
+            .book-now button:hover {
+                background-color: #31b0d5; 
+            }
+
+        .booking-info {
+            background-color: #fff;
+            color: #000;
+            padding: 20px;
+            border-radius: 10px;
+            width: 100%;
+        }
+
+        .booking-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+        }
+
+            .booking-item:not(:last-child) {
+                border-bottom: 1px solid #ccc;
+            }
+
+        .time {
+            font-weight: bold;
+            flex: 0 0 80px;
+        }
+
+        .title {
+            flex-grow: 1;
+            margin-left: 10px;
+        }
+
+        .location {
+            font-style: italic;
+            flex: 0 0 150px;
+            text-align: right;
+        }
+
+        .content {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            height: 100%;
+            overflow-y: auto;
+        }
+
+        #addBookingContent, #myBookingsContent {
+            display: flex;
+        }
+
+
+
+
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+            padding-top: 60px;
+        }
+
+        .modal-content {
+            background-color: #185D62;
+            margin: 5% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 500px;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            font-family: 'YourMainContainerFont', sans-serif; 
+            color: white; 
+            position: relative; 
+        }
+
+        .close {
+            color: #aaa;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            font-size: 28px;
+            font-weight: bold;
+        }
+
+            .close:hover,
+            .close:focus {
+                color: black;
+                text-decoration: none;
+                cursor: pointer;
+            }
+
+        form {
+            display: flex;
+            flex-direction: column;
+        }
+
+            form label {
+                margin-top: 10px;
+                font-weight: normal;
+                margin-bottom: 5px; 
+            }
+
+            form input, form button {
+                margin-top: 5px;
+                padding: 10px;
+                font-size: 16px;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+                font-weight: normal; 
+            }
+
+            form button {
+                margin-top: 20px;
+                cursor: pointer;
+                background-color: #1BC7D2;
+                color: white;
+                border: none;
+                font-weight: normal;
+            }
+
+            form .buttons {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 20px; 
+            }
+
+                form .buttons button {
+                    flex: 1;
+                    margin: 5px;
+                }
+
+        .inline-label {
+            display: inline;
+            margin-left: 10px;
+        }
+
+        .date-time {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px; 
+        }
+
+            .date-time label, .date-time input {
+                flex: 1;
+                margin-right: 10px;
+            }
+
+                .date-time input:last-child {
+                    margin-right: 0;
+                }
+
+        .recurring {
+            display: flex;
+            align-items: center;
+            margin-top: 10px;
+        }
+
+        form label, form input {
+            margin-bottom: 10px; 
+        }
+
+            form input#room {
+                margin-bottom: 20px; 
+            }
+    </style>
+}
+
diff --git a/ASI.Basecode.WebApp/Views/Home/UserSettings.cshtml b/ASI.Basecode.WebApp/Views/Home/UserSettings.cshtml
new file mode 100644
index 0000000..22cc107
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Home/UserSettings.cshtml
@@ -0,0 +1,63 @@
+@{
+    ViewData["Title"] = "User Settings";
+}
+<div class="outer-container">
+    <div class="main-content">
+        <h1>User Settings</h1>
+        <!--I add dri user settings code for later -->
+    </div>
+</div>
+
+@section Styles {
+    <style>
+
+         @* css code ni sa container, ayaw labti para uniform, scroll down naay space adto for manipulating styles *@
+
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .outer-container {
+            background-color: #f0f0f0;
+            padding: 20px;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+            height: calc(100vh - 40px);
+            width: 105%;
+            margin: 0 auto;
+            max-width: 105%;
+            position: relative;
+            overflow: hidden;
+            top: 20px;
+        }
+
+        .main-content {
+            height: 85vh;
+            background-color: #185D62;
+            padding: 20px;
+            color: #fff;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            top: -5px;
+        }
+
+        h1 {
+            font-size: 36px;
+            font-weight: 500;
+            margin-top: 0;
+            margin-bottom: 30px;
+            letter-spacing: 0.5px;
+        }
+
+         <!--Add dri code sa imong css styles sa imong user settings nga code-->
+
+    </style>
+}
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Home/ViewBookings.cshtml b/ASI.Basecode.WebApp/Views/Home/ViewBookings.cshtml
new file mode 100644
index 0000000..4bfe875
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Home/ViewBookings.cshtml
@@ -0,0 +1,63 @@
+@{
+    ViewData["Title"] = "View Bookings";
+}
+<div class="outer-container">
+    <div class="main-content">
+        <h1>View Bookings</h1>
+        <!--I add dri view bookings code for later -->
+    </div>
+</div>
+
+@section Styles {
+    <style>
+
+         @* css code ni sa container, ayaw labti para uniform, scroll down naay space adto for manipulating styles *@
+
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        .outer-container {
+            background-color: #f0f0f0;
+            padding: 20px;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+            height: calc(100vh - 40px);
+            width: 105%;
+            margin: 0 auto;
+            max-width: 105%;
+            position: relative;
+            overflow: hidden;
+            top: 20px;
+        }
+
+        .main-content {
+            height: 85vh;
+            background-color: #185D62;
+            padding: 20px;
+            color: #fff;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            top: -5px;
+        }
+
+        h1 {
+            font-size: 36px;
+            font-weight: 500;
+            margin-top: 0;
+            margin-bottom: 30px;
+            letter-spacing: 0.5px;
+        }
+
+        <!--Add dri code sa imong css styles sa imong view bookings nga code-->
+
+    </style>
+}
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Shared/Index.cshtml b/ASI.Basecode.WebApp/Views/Shared/Index.cshtml
new file mode 100644
index 0000000..e1dd794
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Shared/Index.cshtml
@@ -0,0 +1,5 @@
+@*
+    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
+*@
+@{
+}
diff --git a/ASI.Basecode.WebApp/Views/Shared/Index1.cshtml.cs b/ASI.Basecode.WebApp/Views/Shared/Index1.cshtml.cs
new file mode 100644
index 0000000..1f21bc1
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Shared/Index1.cshtml.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace ASI.Basecode.WebApp.Views.Shared
+{
+    public class Index1Model : PageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+}
diff --git a/ASI.Basecode.WebApp/Views/Shared/_AdminSidebar.cshtml b/ASI.Basecode.WebApp/Views/Shared/_AdminSidebar.cshtml
new file mode 100644
index 0000000..5e6290d
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Shared/_AdminSidebar.cshtml
@@ -0,0 +1,175 @@
+@*
+    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
+*@
+@{
+    <div class="sidebar">
+        <div class="logo">
+            <img src="/img/butang logo name ari idle" alt="Logo" />
+        </div>
+        <ul class="sidebar-menu">
+            <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">
+                <a asp-controller="Admin" asp-action="Index">
+                    <i class="fas fa-home"></i>
+                    <span>Home</span>
+                </a>
+            </li>
+            <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Analytics" ? "active" : "")">
+                <a asp-controller="Admin" asp-action="Analytics">
+                    <i class="fas fa-chart-bar"></i>
+                    <span>Analytics</span>
+                </a>
+            </li>
+            <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "ManageRoles" ? "active" : "")">
+                <a asp-controller="Admin" asp-action="ManageRoles">
+                    <i class="fas fa-users-cog"></i>
+                    <span>Manage Roles</span>
+                </a>
+            </li>
+            <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "AdminSettings" ? "active" : "")">
+                <a asp-controller="Admin" asp-action="AdminSettings">
+                    <i class="fas fa-cog"></i>
+                    <span>Settings</span>
+                </a>
+            </li>
+        </ul>
+        <div class="user-info">
+            <div class="notification-button">
+                <a href="#" id="notificationToggle">
+                    <i class="fas fa-bell"></i>
+                    <span class="notification-badge">3</span>
+                </a>
+            </div>
+            <div class="user-details">
+                <span class="user-name">Admin Kent John</span>
+                <span class="user-email">kennyadmin@gmail.com</span>
+            </div>
+            <div class="logout">
+                <a asp-action="SignOutAdmin" asp-controller="Account">
+                    <i class="fas fa-sign-out-alt"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+}
+
+<style>
+    .sidebar {
+        width: 265px;
+        height: 100vh;
+        background-color: #000;
+        color: #fff;
+        position: fixed;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 20px;
+        z-index: 1;
+    }
+
+    .logo img {
+        width: 100px;
+        height: auto;
+    }
+
+    .sidebar-menu {
+        list-style: none;
+        padding: 0;
+        margin: 20px 0;
+        width: 100%;
+    }
+
+        .sidebar-menu li {
+            width: 100%;
+        }
+
+            .sidebar-menu li a {
+                display: flex;
+                align-items: center;
+                padding: 10px 20px;
+                color: #fff;
+                text-decoration: none;
+                width: 100%;
+            }
+
+                .sidebar-menu li a:hover,
+                .sidebar-menu li.active a {
+                    background-color: #333;
+                }
+
+                .sidebar-menu li a i {
+                    margin-right: 10px;
+                }
+
+    .user-info {
+        margin-top: auto;
+        width: 100%;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .notification-button {
+        position: relative;
+    }
+
+        .notification-button a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            background-color: #333;
+            border-radius: 50%;
+            color: #fff;
+            text-decoration: none;
+            transition: background-color 0.3s ease;
+        }
+
+            .notification-button a:hover {
+                background-color: #555;
+            }
+
+    .notification-badge {
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        background-color: #ff4444;
+        color: #fff;
+        font-size: 12px;
+        font-weight: bold;
+        padding: 2px 6px;
+        border-radius: 50%;
+    }
+
+    .user-details {
+        flex-grow: 1;
+        margin-left: 15px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .user-name {
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+
+    .user-email {
+        font-size: 0.7em;
+        color: #bbb;
+    }
+
+    .logout a {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        text-decoration: none;
+    }
+
+        .logout a i {
+            font-size: 1.4em;
+        }
+</style>
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Shared/_Header.cshtml b/ASI.Basecode.WebApp/Views/Shared/_Header.cshtml
index 02b6b55..e8dc60e 100644
--- a/ASI.Basecode.WebApp/Views/Shared/_Header.cshtml
+++ b/ASI.Basecode.WebApp/Views/Shared/_Header.cshtml
@@ -1,4 +1,4 @@
-@using Microsoft.AspNetCore.Http
+@* @using Microsoft.AspNetCore.Http
 @inject IHttpContextAccessor HttpContextAccessor
 <header class="@((ViewBag.LoginView == true) ? "hide-navbar" : "")">
     <div class="logosec hover-pointer">
@@ -29,3 +29,4 @@
         </div>
     </div>
 </header>
+ *@
\ No newline at end of file
diff --git a/ASI.Basecode.WebApp/Views/Shared/_Layout.cshtml b/ASI.Basecode.WebApp/Views/Shared/_Layout.cshtml
index cf2c918..aaf588f 100644
--- a/ASI.Basecode.WebApp/Views/Shared/_Layout.cshtml
+++ b/ASI.Basecode.WebApp/Views/Shared/_Layout.cshtml
@@ -1,6 +1,4 @@
-@using static ASI.Basecode.Resources.Views.Screen
-
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
@@ -15,16 +13,30 @@
 </head>
 <body>
     @Html.Partial("_Header")
-    <div class="container">
+    @{
+        var isAdmin = Context.Session.GetString("UserRole") == "Admin";
+        var isLoginOrRegister = ViewContext.RouteData.Values["Controller"].ToString() == "Account" &&
+        (ViewContext.RouteData.Values["Action"].ToString() == "Login" ||
+        ViewContext.RouteData.Values["Action"].ToString() == "Register");
+    }
+
+    @if (!isLoginOrRegister)
+    {
+        if (isAdmin)
+        {
+            @Html.Partial("_AdminSidebar")
+        }
+        else
+        {
+            @Html.Partial("_UserSidebar")
+        }
+    }
+
+    <div class="container" style="@(isLoginOrRegister ? "margin-left: 0;" : "margin-left: 250px;")">
         <main role="main">
             @RenderBody()
         </main>
     </div>
-    <footer class="border-top footer text-muted">
-        <div class="container">
-            @Copyright
-        </div>
-    </footer>
 
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
diff --git a/ASI.Basecode.WebApp/Views/Shared/_UserSidebar.cshtml b/ASI.Basecode.WebApp/Views/Shared/_UserSidebar.cshtml
new file mode 100644
index 0000000..aae0464
--- /dev/null
+++ b/ASI.Basecode.WebApp/Views/Shared/_UserSidebar.cshtml
@@ -0,0 +1,175 @@
+@* 
+    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
+*@
+@{
+    <div class="sidebar">
+        <div class="logo">
+            <img src="/img/butang logo name ari idle" alt="Logo" />
+        </div>
+        <ul class="sidebar-menu">
+            <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">
+                <a asp-controller="Home" asp-action="Index">
+                    <i class="fas fa-home"></i>
+                    <span>Home</span>
+                </a>
+            </li>
+            <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "ViewBookings" ? "active" : "")">
+                <a asp-controller="Home" asp-action="ViewBookings">
+                    <i class="fas fa-calendar-alt"></i>
+                    <span>View Bookings</span>
+                </a>
+            </li>
+            <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Calendar" ? "active" : "")">
+                <a asp-controller="Home" asp-action="Calendar">
+                    <i class="fas fa-calendar"></i>
+                    <span>Calendar</span>
+                </a>
+            </li>
+            <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "UserSettings" ? "active" : "")">
+                <a asp-controller="Home" asp-action="UserSettings">
+                    <i class="fas fa-cog"></i>
+                    <span>Settings</span>
+                </a>
+            </li>
+        </ul>
+        <div class="user-info">
+            <div class="notification-button">
+                <a href="#" id="notificationToggle">
+                    <i class="fas fa-bell"></i>
+                    <span class="notification-badge">3</span>
+                </a>
+            </div>
+            <div class="user-details">
+                <span class="user-name">Kent John Dico</span>
+                <span class="user-email">kennydeku@gmail.com</span>
+            </div>
+            <div class="logout">
+                <a asp-action="SignOutUser" asp-controller="Account">
+                    <i class="fas fa-sign-out-alt"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+}
+
+<style>
+    .sidebar {
+        width: 265px;
+        height: 100vh;
+        background-color: #000;
+        color: #fff;
+        position: fixed;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 20px;
+        z-index: 1;
+    }
+
+    .logo img {
+        width: 100px;
+        height: auto;
+    }
+
+    .sidebar-menu {
+        list-style: none;
+        padding: 0;
+        margin: 20px 0;
+        width: 100%;
+    }
+
+        .sidebar-menu li {
+            width: 100%;
+        }
+
+            .sidebar-menu li a {
+                display: flex;
+                align-items: center;
+                padding: 10px 20px;
+                color: #fff;
+                text-decoration: none;
+                width: 100%;
+            }
+
+                .sidebar-menu li a:hover,
+                .sidebar-menu li.active a {
+                    background-color: #333;
+                }
+
+                .sidebar-menu li a i {
+                    margin-right: 10px;
+                }
+
+    .user-info {
+        margin-top: auto;
+        width: 100%;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .notification-button {
+        position: relative;
+    }
+
+        .notification-button a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            background-color: #333;
+            border-radius: 50%;
+            color: #fff;
+            text-decoration: none;
+            transition: background-color 0.3s ease;
+        }
+
+            .notification-button a:hover {
+                background-color: #555;
+            }
+
+    .notification-badge {
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        background-color: #ff4444;
+        color: #fff;
+        font-size: 12px;
+        font-weight: bold;
+        padding: 2px 6px;
+        border-radius: 50%;
+    }
+
+    .user-details {
+        flex-grow: 1;
+        margin-left: 15px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .user-name {
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+
+    .user-email {
+        font-size: 0.7em;
+        color: #bbb;
+    }
+
+    .logout a {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        text-decoration: none;
+    }
+
+        .logout a i {
+            font-size: 1.4em;
+        }
+</style> 
diff --git a/ASI.Basecode.WebApp/wwwroot/css/site.css b/ASI.Basecode.WebApp/wwwroot/css/site.css
index d3f4a7a..6e695e7 100644
--- a/ASI.Basecode.WebApp/wwwroot/css/site.css
+++ b/ASI.Basecode.WebApp/wwwroot/css/site.css
@@ -84,4 +84,7 @@ body {
 
 .w-1000px {
     width: 1000px;
-}
\ No newline at end of file
+}
+
+
+
diff --git a/ASI.Basecode.WebApp/wwwroot/css/style.css b/ASI.Basecode.WebApp/wwwroot/css/style.css
index 05d1acd..1758c8a 100644
--- a/ASI.Basecode.WebApp/wwwroot/css/style.css
+++ b/ASI.Basecode.WebApp/wwwroot/css/style.css
@@ -22,7 +22,7 @@
 }
 
 body {
-    background-color: var(--background-color4);
+    background-color: black;
     max-width: 100%;
     overflow-x: hidden;
 }
diff --git a/ASI.Basecode.WebApp/wwwroot/img/book.jpg b/ASI.Basecode.WebApp/wwwroot/img/book.jpg
new file mode 100644
index 0000000..89442ac
Binary files /dev/null and b/ASI.Basecode.WebApp/wwwroot/img/book.jpg differ
diff --git a/ASI.Basecode.sln b/ASI.Basecode.sln
index e20a71f..732d818 100644
--- a/ASI.Basecode.sln
+++ b/ASI.Basecode.sln
@@ -11,7 +11,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ASI.Basecode.Services", "AS
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{65A10F5F-9790-475E-A544-DF3FF6A41A66}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ASI.Basecode.Resources", "ASI.Basecode.Resources\ASI.Basecode.Resources.csproj", "{ED0C96A6-749E-413B-BF4D-8E405BEB172E}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ASI.Basecode.Resources", "ASI.Basecode.Resources\ASI.Basecode.Resources.csproj", "{ED0C96A6-749E-413B-BF4D-8E405BEB172E}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution