diff --git a/beakpeek/lib/View/Map/heat_map.dart b/beakpeek/lib/View/Map/heat_map.dart
index 70d66de2..e718af2d 100644
--- a/beakpeek/lib/View/Map/heat_map.dart
+++ b/beakpeek/lib/View/Map/heat_map.dart
@@ -70,7 +70,7 @@ class HeatMapState extends State<HeatMap> {
                   'This is an Endangered Species! Est. Population: $population',
                   style: GlobalStyles.contentPrimary(context).copyWith(
                     fontWeight: FontWeight.w400,
-                    color: const Color.fromARGB(255, 202, 110, 104),
+                    color: AppColors.textColor(context),
                     fontSize: 12,
                   ),
                   textAlign: TextAlign.left, // Align the text to the right
@@ -84,7 +84,7 @@ class HeatMapState extends State<HeatMap> {
                   'This is not an Endangered Species!',
                   style: GlobalStyles.contentPrimary(context).copyWith(
                     fontWeight: FontWeight.w400,
-                    color: const Color.fromARGB(255, 119, 189, 121),
+                    color: AppColors.textColor(context),
                     fontSize: 16,
                   ),
                   textAlign: TextAlign.left, // Align the text to the right
diff --git a/beakpeek/lib/View/Sightings/sightings.dart b/beakpeek/lib/View/Sightings/sightings.dart
index bfaac46f..1041a2b7 100644
--- a/beakpeek/lib/View/Sightings/sightings.dart
+++ b/beakpeek/lib/View/Sightings/sightings.dart
@@ -106,34 +106,10 @@ class _SightingsState extends State<Sightings> {
                 mainAxisSize: MainAxisSize.min,
                 children: [
                   Text(
-                    'Filter by:',
+                    'Sort by name:',
                     style: GlobalStyles.contentPrimary(context),
                   ),
-                  const SizedBox(width: 8.0),
-                  DropdownButton<String>(
-                    dropdownColor: AppColors.popupColor(context),
-                    value: selectedFilter,
-                    items: [
-                      DropdownMenuItem(
-                        value: 'name',
-                        child: Text(
-                          'Name',
-                          style: GlobalStyles.contentPrimary(context),
-                        ),
-                      ),
-                      DropdownMenuItem(
-                        value: 'rarity',
-                        child: Text(
-                          'Rarity',
-                          style: GlobalStyles.contentPrimary(context),
-                        ),
-                      ),
-                    ],
-                    onChanged: onFilterChanged,
-                    style: GlobalStyles.primaryButtonText(context),
-                    underline: Container(),
-                  ),
-                  const SizedBox(width: 16.0),
+                  SizedBox(width: screenWidth * 0.08),
                   Row(
                     children: [
                       SizedBox(
@@ -148,13 +124,13 @@ class _SightingsState extends State<Sightings> {
                               reportRateASC();
                             }
                           },
-                          child: Icon(
-                            Icons.arrow_upward,
-                            color: AppColors.iconColor(context),
+                          child: Text(
+                            'A-Z',
+                            style: GlobalStyles.secondaryButtonText(context),
                           ),
                         ),
                       ),
-                      const SizedBox(width: 8.0),
+                      const SizedBox(width: 6.0),
                       SizedBox(
                         width: 80.0,
                         height: 34.0,
@@ -167,12 +143,13 @@ class _SightingsState extends State<Sightings> {
                               reportRateDESC();
                             }
                           },
-                          child: Icon(
-                            Icons.arrow_downward,
-                            color: AppColors.iconColor(context),
+                          child: Text(
+                            'Z-A',
+                            style: GlobalStyles.secondaryButtonText(context),
                           ),
                         ),
                       ),
+                      SizedBox(height: screenHeight * 0.05),
                     ],
                   ),
                 ],
diff --git a/beakpeek/lib/View/UserProfile/user_profile_widgets.dart b/beakpeek/lib/View/UserProfile/user_profile_widgets.dart
index 2019c4f3..a050f48a 100644
--- a/beakpeek/lib/View/UserProfile/user_profile_widgets.dart
+++ b/beakpeek/lib/View/UserProfile/user_profile_widgets.dart
@@ -65,7 +65,7 @@ Widget levelProgressBar(BuildContext context) {
         xpLabel,
         style: GlobalStyles.contentPrimary(context).copyWith(
           fontWeight: FontWeight.bold,
-          color: AppColors.primaryColorLight,
+          color: Colors.black54,
           fontSize: 16,
         ),
       ),
diff --git a/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Login.cshtml b/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Login.cshtml
index 3695a4ae..e5ee18fc 100644
--- a/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Login.cshtml
+++ b/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Login.cshtml
@@ -6,70 +6,157 @@ ViewData["Title"] = "Log in";
 @* Model.ReturnUrl = Request.Query["ReturnUrl"]; *@
 }
 
-<h1>@ViewData["Title"]</h1>
+<style>
+    body {
+        background-color: #f3f1eD;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    h1, h2, h3 {
+        color: #033a30;
+        text-align: center;
+    }
+
+    .login-container {
+        background-color: #f3f1eD;
+        padding: 30px;
+        border-radius: 10px;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+        margin-top: 50px;
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    .form-floating label {
+        font-weight: 600;
+        color: #1d695b;
+    }
+
+    .btn-primary {
+        background-color: #033a30;
+        border: none;
+        padding: 10px;
+        font-size: 1.2em;
+        border-radius: 30px;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .btn-primary:hover {
+        background-color: #1d695b;
+    }
+
+    .external-login-button {
+        margin: auto;
+        display: block;
+        width: 80%;
+        border-radius: 30px;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+        border: 1px solid #033a30;
+        color: #033a30;
+        padding: 10px;
+    }
+
+    .external-login-button .btn {
+        width: 100%;
+    }
+
+    .login-section {
+        padding: 10px;
+        background-color: #f3f1eD;
+    }
+
+    .form-check-label {
+        font-weight: 500;
+    }
+
+    .form-check-input {
+        margin-right: 10px;
+    }
+
+    #forgot-password, a {
+        color: #1d695b;
+        text-decoration: none;
+    }
+
+    #forgot-password:hover, a:hover {
+        text-decoration: underline;
+    }
+
+    .row {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .form-control {
+        border-radius: 15px;
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    }
+</style>
+
 <div class="row">
-    <div class="col-md-4">
-        <section>
+    <div class="col-md-4 login-container">
+        <section class="login-section">
             <form id="account" method="post">
-                <h2>Use a local account to log in.</h2>
+                <h2>Log in to Your Account</h2>
                 <hr />
                 <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
+                
+                @* Email field *@
                 <div class="form-floating mb-3">
                     <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true"
                         placeholder="name@example.com" />
                     <label asp-for="Input.Email" class="form-label">Email / Username</label>
                     <span asp-validation-for="Input.Email" class="text-danger"></span>
                 </div>
+
+                @* Password field *@
                 <div class="form-floating mb-3">
                     <input asp-for="Input.Password" class="form-control" autocomplete="current-password"
-                        aria-required="true" placeholder="password" />
+                        aria-required="true" placeholder="password" type="password" id="Input_Password" />
                     <label asp-for="Input.Password" class="form-label">Password</label>
                     <span asp-validation-for="Input.Password" class="text-danger"></span>
                 </div>
 
+                @* Show password checkbox *@
                 <div class="checkbox mb-3">
-                    <label class="form-label">
+                    <label class="form-check-label">
                         <input type="checkbox" name="showPassword" id="ckShowPass" onclick="myshowp(this)"
                             class="form-check-input" />
                         Show Password
                     </label>
                 </div>
+
+                @* Remember me checkbox *@
                 <div class="checkbox mb-3">
-                    <label asp-for="Input.RememberMe" class="form-label">
+                    <label asp-for="Input.RememberMe" class="form-check-label">
                         <input class="form-check-input" asp-for="Input.RememberMe" />
                         @Html.DisplayNameFor(m => m.Input.RememberMe)
                     </label>
                 </div>
+
+                @* Log in button *@
                 <div>
                     <button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>
                 </div>
 
+
                 <div>
+                    @* Register new user *@
                     <br />
                     <p>
                         <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
                     </p>
-
-                    <br />
-                    <p>
-                        <a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
-                    </p>
-
-                    <br />
-                    @* <p>
-                        <a asp-area="Identity" asp-page="/Account/Register">Register</a>
-                    </p> *@
-                    @* <p>
-                        <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
-                    </p> *@
                 </div>
             </form>
         </section>
     </div>
-    <div class="col-md-6 col-md-offset-2">
-        <section>
+
+    <div class="col-md-6">
+        <section class="login-section">
+            <br>
             <h3>Use another service to log in.</h3>
-            <hr />
+            <br>
             @{
             if ((Model.ExternalLogins?.Count ?? 0) == 0)
             {
@@ -89,8 +176,10 @@ ViewData["Title"] = "Log in";
                     <p>
                         @foreach (var provider in Model.ExternalLogins!)
                         {
-                        <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name"
-                            title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                            <button type="submit" class="btn btn-outline-primary external-login-button" name="provider" value="@provider.Name"
+                                title="Log in using your @provider.DisplayName account">
+                                Log in with @provider.DisplayName
+                            </button>
                         }
                     </p>
                 </div>
diff --git a/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Register.cshtml b/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Register.cshtml
index 6e03f2c5..efcc20dc 100644
--- a/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Register.cshtml
+++ b/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Register.cshtml
@@ -4,36 +4,136 @@
     ViewData["Title"] = "Register";
 }
 
-<h1>@ViewData["Title"]</h1>
+<style>
+    body {
+        background-color: #f3f1eD;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    h1, h2, h3 {
+        color: #033a30;
+        text-align: center;
+    }
+
+    .login-container {
+        background-color: #f3f1eD;
+        padding: 30px;
+        border-radius: 10px;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+        margin-top: 50px;
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    .form-floating label {
+        font-weight: 600;
+        color: #1d695b;
+    }
+
+    .btn-primary {
+        background-color: #033a30;
+        border: none;
+        padding: 10px;
+        font-size: 1.2em;
+        border-radius: 30px;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .btn-primary:hover {
+        background-color: #1d695b;
+    }
+
+    .external-login-button {
+        margin: auto;
+        display: block;
+        width: 80%;
+        border-radius: 30px;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+        border: 1px solid #033a30;
+        color: #033a30;
+        padding: 10px;
+    }
+
+    .external-login-button .btn {
+        width: 100%;
+    }
+
+    .login-section {
+        padding: 10px;
+        background-color: #f3f1eD;
+    }
+
+    .form-check-label {
+        font-weight: 500;
+    }
+
+    .form-check-input {
+        margin-right: 10px;
+    }
+
+    #forgot-password, a {
+        color: #1d695b;
+        text-decoration: none;
+    }
+
+    #forgot-password:hover, a:hover {
+        text-decoration: underline;
+    }
+
+    .row {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .form-control {
+        border-radius: 15px;
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    }
+</style>
 
 <div class="row">
-    <div class="col-md-4">
-        <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post">
-            <h2>Create a new account.</h2>
-            <hr />
-            <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
-            <div class="form-floating mb-3">
-                <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
-                <label asp-for="Input.Email">Email</label>
-                <span asp-validation-for="Input.Email" class="text-danger"></span>
-            </div>
-            <div class="form-floating mb-3">
-                <input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
-                <label asp-for="Input.Password">Password</label>
-                <span asp-validation-for="Input.Password" class="text-danger"></span>
-            </div>
-            <div class="form-floating mb-3">
-                <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
-                <label asp-for="Input.ConfirmPassword">Confirm Password</label>
-                <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
-            </div>
-            <button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
-        </form>
+    <div class="col-md-4 login-container">
+        <section class="login-section">
+            <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post">
+                <h2>Create a New Account</h2>
+                <hr />
+                <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
+
+                @* Email field *@
+                <div class="form-floating mb-3">
+                    <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                    <label asp-for="Input.Email">Email</label>
+                    <span asp-validation-for="Input.Email" class="text-danger"></span>
+                </div>
+
+                @* Password field *@
+                <div class="form-floating mb-3">
+                    <input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
+                    <label asp-for="Input.Password">Password</label>
+                    <span asp-validation-for="Input.Password" class="text-danger"></span>
+                </div>
+
+                @* Confirm Password field *@
+                <div class="form-floating mb-3">
+                    <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
+                    <label asp-for="Input.ConfirmPassword">Confirm Password</label>
+                    <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
+                </div>
+
+                @* Register button *@
+                <div>
+                    <button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
+                </div>
+            </form>
+        </section>
     </div>
-    <div class="col-md-6 col-md-offset-2">
-        <section>
-            <h3>Use another service to register.</h3>
-            <hr />
+
+    <div class="col-md-6">
+        <section class="login-section">
+            <br>
+            <h3>Use Another Service to Register</h3>
+            <br>
             @{
                 if ((Model.ExternalLogins?.Count ?? 0) == 0)
                 {
@@ -51,7 +151,9 @@
                             <p>
                                 @foreach (var provider in Model.ExternalLogins!)
                                 {
-                                    <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                                    <button type="submit" class="btn btn-outline-primary external-login-button" name="provider" value="@provider.Name" title="Register using your @provider.DisplayName account">
+                                        Register with @provider.DisplayName
+                                    </button>
                                 }
                             </p>
                         </div>