UI changes

.dockerignore

@@ -1,3 +1,4 @@
 node_modules/
 .svelte-kit
 .idea
+.git/

src/app.postcss

@@ -16,6 +16,9 @@
 .bg-orange-oil {
    background-color: #ff6600;
 }
+.bg-orange-oil:hover {
+   background-color: #e55a00;
+}
 .text-orange-oil {
    color: #ff6600;
 }

src/lib/states/maine.ts

@@ -1,4 +1,5 @@
 // src/lib/states/maine.ts
+
 export interface NewEnglandState {
   id: string;
   name: string;
@@ -46,12 +47,11 @@ export const maineCounties: NewEnglandState[] = [
       fill: 'fill-indigo-500',
       hoverFill: 'fill-indigo-700'
   },
-{
+  {
       id: 'hancock',
       name: 'Hancock County',
       slug: 'hancock',
       image: '/images/counties/maine/hancock.png',
-        // This long coastal/island-heavy path is Hancock's correct shape
       pathD: "M 519.24 383.61 531.18 378.51 535.37 380.94 538.28 375.91 546.7 374.41 554.67 372.95 553.74 367.76 551.54 355.96 549.33 343.58 561.3 341.33 559.29 329.71 571.37 327.43 568.99 315.19 568.2 310.97 591.97 306.76 598.96 346.94 587.19 349.21 597.85 395.92 601.33 419.61 600.9 420 600.9 421.8 599.25 423.41 598.6 423.42 597.49 421.68 597.17 420.79 596.65 420.39 596.2 420.67 595.36 422.08 595.89 422.98 593.96 426.96 593.44 426.9 592.99 427.3 592.95 428.19 593.11 429.2 592.51 430.93 591.46 430.77 590.82 430.27 589.96 428.64 589.78 425.28 588.98 424.83 588.62 425.5 588.34 425.56 587.3 423.66 586.49 421.46 586.45 418.82 586.09 417.75 585.77 415.56 585.81 413.71 586.21 412.58 585.97 411.63 585.45 411.12 582.8 410.64 582 411.03 581.68 411.32 581.64 411.88 580.88 412.27 578.63 412.05 579.11 411.15 579.07 410.3 578.87 409.97 576.79 409.29 575.82 410.02 575.5 410.98 575.78 413.06 575.3 413.17 573.86 412.16 573.09 410.53 572.21 410.42 571.61 412.1 571.37 413.68 570.37 414.8 568.72 415.08 568.64 416.6 569.04 417.27 571.57 416.26 573.58 417.22 573.86 417.67 573.94 418.9 573.33 419.3 573.33 419.69 576.62 422.95 577.19 422.61 577.77 422.69 578.4 423.5 579.59 425.8 580.53 429.21 580.63 431.25 578.88 434.15 574.91 436.56 570.93 436.52 569.56 437.2 568.72 438.2 568.68 439.49 568.78 439.98 569 440.15 569.43 442.03 566.87 445.04 564.78 445.33 564.43 444.45 562.3 443.33 561.88 442.61 561.1 442.04 559.96 442.11 558.87 441.42 557.11 438.43 556.96 437.11 556.5 435.69 556.03 435.22 556.04 433.36 557.85 432.07 558.13 431.62 558.05 431.11 556.93 430.21 556.94 430 558.05 427.52 558.41 427.47 559.32 426.49 559.42 425.74 559.18 424.86 562.09 422.91 562.46 423.15 562.79 423.05 563 422.7 562.9 421.29 561.63 418.5 560.99 417.65 560.17 417.53 559.86 418.01 559.7 419.25 557.42 421.94 556.91 422.15 556.33 422.1 555.75 421.47 555.88 418.11 556.16 416.43 555.24 415.24 554.4 415.05 553.73 415.31 553.26 415.87 552.89 416.77 553.37 420.05 552.86 421.93 552.85 422.86 553.15 423.59 553.15 424.55 552.67 424.72 551.51 424.6 551.03 423.26 551.27 422.02 552.03 421.12 551.31 417.3 550.83 417.08 549.94 417.7 549.46 419.77 548.9 420.11 548.04 419.89 546.57 421.8 546.13 421.96 544.17 421.18 543.6 421.29 543.2 421.8 543.08 422.41 543.24 423.65 543.77 425.11 544.65 425.45 545.09 427.69 544.28 428.86 543.39 430.63 543.03 432.69 543.1 433.3 543.31 433.97 544.06 434.93 545.74 435.05 546.42 436.32 546.35 436.86 546.7 438.23 547.57 439.71 547.54 440.35 546.58 441.77 546.74 442.88 547.19 443.61 547.01 444.71 546.13 444.47 544.58 443.51 544.54 443.27 543.44 441.97 542.48 441.35 539.55 438.42 538.38 438.32 537.38 437.65 537.24 437.12 537 436.88 531.94 435.15 527.86 432.16 527.16 431.25 525.9 430.88 524.39 431.09 523.99 431.43 523.48 432.3 521.23 433.99 518.15 433.42 518.04 432.83 518.32 430.42 518.72 428.41 519.07 427.94 519.34 426.73 518.97 425.01 518.67 420.48 519.29 417.91 520.6 417.01 522.1 413.29 522.31 411.78 521.12 412.11 516.76 393.38 516.27 391.47 518.61 386.27 519.63 385.4 519.24 383.61 Z",
       fill: 'fill-indigo-500',
       hoverFill: 'fill-indigo-700'
@@ -70,11 +70,10 @@ export const maineCounties: NewEnglandState[] = [
     name: 'Knox County',
     slug: 'knox',
     image: '/images/counties/maine/knox.png',
-        // Knox is mostly coastal islands; your original fragmented paths appear correct for the main/island groups
+    pathD: "M 470.9 452 L 474.69 472.01 L 478.5 485.5 L 486.2 498.1 L 496.5 488.2 L 506.1 478.5 L 512.4 468.2 L 517.8 458.5 L 518.3 442.71 L 507.23 427.06 L 470.9 452 Z M 522.5 462.5 L 538.2 458.1 L 542.5 468.2 L 531.5 475.5 L 522.5 462.5 Z M 525.1 452.2 L 535.5 450.5 L 538.1 455.2 L 528.5 458.5 L 525.1 452.2 Z M 552.1 462.2 L 558.5 460.5 L 560.2 468.2 L 553.5 469.5 L 552.1 462.2 Z M 542.5 485.5 L 548.5 482.5 L 550.5 488.5 L 544.5 490.5 L 542.5 485.5 Z",
-        pathD: "M 549.48 458.49 550.11 459.45 550.24 460.4 549.15 461.74 547.8 461.25 547.64 459.95 548.36 458.37 548.77 458.08 549.48 458.49 Z M 562.97 458.37 563.48 457.99 564.08 458.01 565.61 460.3 565.58 460.7 564.92 461.51 562.32 461.51 561.23 460.08 561.23 459.88 561.35 459.52 562.29 458.5 562.97 458.37 Z M 553.9 449.72 555.38 449.96 556.66 449.62 557.42 450.11 558.21 451.54 560.43 454.39 559.31 456.29 556.36 459.14 555.31 459.55 554.34 458.3 554.45 457.25 553.56 455.68 551.35 455.34 550.9 455.52 549.75 455.47 549.23 454.73 549.35 453.71 549.86 453.39 551.88 450.8 553.9 449.72 Z M 532.15 437.81 532.66 437.74 533.35 438.18 534.25 439.23 537.62 440.96 538.76 442.41 539.31 444.28 538.65 447.36 537.48 448.7 537.42 449.08 538 449.8 538.1 450.19 538.07 450.91 535.76 454.03 534.87 454.56 533.18 454.84 533.04 456.57 532.7 456.76 532.04 456.62 531.6 455.42 531.05 454.56 530.22 453.93 529.39 453.88 529.05 453.64 528.74 453.36 528.36 452.49 528.5 450.62 528.88 449.56 528.95 447.88 528.29 446.73 528.12 445.77 528.12 445.24 528.53 444.57 529.19 444.52 530.25 443.85 530.87 441.88 532.18 440.1 532.46 439.19 532.46 438.32 532.15 437.81 Z M 563.27 448.51 565.37 447.41 566.23 447.62 567.02 448.35 567.14 448.76 566.78 448.84 566.53 448.51 565.43 449.43 564.82 452.14 564.02 452.46 561.01 450.49 561.74 449.32 562.39 448.71 563.27 448.51 Z M 552.03 445.75 553.24 446.72 553.84 448.16 553.81 448.45 553.33 448.69 550.91 448 550.65 447.12 551.08 444.78 551.29 444.57 552.27 444.61 552.44 445.18 552.03 445.75 Z M 521.51 443.34 523.64 445.35 523.71 446.6 522.66 447.97 521.72 447.86 520.63 447.23 519.88 446.71 519.28 446.5 518.56 446.18 517.93 446.13 517.14 444.77 516.99 443.51 517.55 442.93 518.11 442.67 518.3 442.71 521.51 443.34 Z M 574.63 439.55 576.71 439.96 577.03 440.77 576.92 440.99 576.07 440.75 575.1 440.91 574.56 441.26 574.26 441.5 574.14 442.04 574.21 443.09 573.43 443.66 571.74 443.85 571 443.44 570.76 442.94 570.97 440.56 572.17 440.28 572.93 440.67 573.66 440.67 574.18 440.33 574.63 439.55 Z M 549.56 425.73 551.46 432.43 550.42 433.21 547.98 431.73 546.53 430.55 546.7 429.08 547.46 427.24 547.34 426.01 547.66 424.21 548.22 423.7 548.7 423.65 549.3 424.04 549.56 425.73 Z",
     fill: 'fill-indigo-500',
     hoverFill: 'fill-indigo-700'
-    },
+},
   {
       id: 'lincoln',
       name: 'Lincoln County',
@@ -98,7 +97,8 @@ export const maineCounties: NewEnglandState[] = [
       name: 'Penobscot County',
       slug: 'penobscot',
       image: '/images/counties/maine/penobscot.png',
-        pathD: "M 941.87 85.25 L 937.16 84.78 L 933.14 83.71 L 932.63 87.02 L 931.16 86.72 L 930.24 93.47 L 929.05 100.35 L 931.99 100.99 L 940.91 103.03 L 940.33 106.22 L 942.82 106.81 L 942.23 110.25 L 940.89 117.93 L 938.34 117.35 L 938.48 123.16 L 941.61 124.04 L 941.79 151.59 L 944.75 151.58 L 944.75 151.08 L 950.88 151.06 L 950.97 120.02 L 950.97 119.92 L 951.41 119.70 L 951.49 119.72 L 960.11 122.30 L 962.68 107.88 L 959.94 107.29 L 954.04 106.08 L 954.23 104.88 L 954.83 101.38 L 951.82 100.73 L 952.32 97.40 L 949.35 96.75 L 949.90 93.20 L 950.45 89.81 L 950.68 88.32 L 948.70 87.90 L 946.60 87.46 L 945.88 86.02 L 944.84 86.71 Z",
+      // Reconstructed to fit coordinate space of neighbors (300-600 range)
+      pathD: "M 518.9 149.93 L 530.8 149.97 L 530.8 151.75 L 555.51 151.82 L 555.84 262 L 557.95 263.08 L 592.64 253.98 L 615.82 248.47 L 602.99 304.68 L 591.97 306.76 L 568.2 310.97 L 568.99 315.19 L 571.37 327.43 L 559.29 329.71 L 561.3 341.33 L 549.33 343.58 L 551.54 355.96 L 553.74 367.76 L 554.67 372.95 L 546.7 374.41 L 538.28 375.91 L 535.37 380.94 L 531.18 378.51 L 519.24 383.61 L 510 380 L 500 370 L 490 350 L 479.46 328.78 L 515.35 321.65 L 523.04 308.42 L 520.67 296.35 L 515.28 269.36 L 505.01 271.4 L 505.56 250.93 L 518.17 247.84 L 518.9 149.93 Z",
       fill: 'fill-indigo-500',
       hoverFill: 'fill-indigo-700'
   },
@@ -143,10 +143,10 @@ export const maineCounties: NewEnglandState[] = [
     name: 'Waldo County',
     slug: 'waldo',
     image: '/images/counties/maine/waldo.png',
-        pathD: "M 938.86 69.64 L 939.42 70.76 L 939.42 71.75 L 939.60 72.89 L 939.79 73.42 L 940.38 73.73 L 940.62 73.53 L 940.81 72.87 L 940.72 72.51 L 940.55 72.11 L 940.28 71.85 L 940.14 71.86 L 940.04 71.72 L 939.96 71.23 L 940.17 70.49 L 939.89 69.75 L 939.77 69.60 L 939.47 68.16 L 939.25 67.78 L 938.78 67.31 L 938.64 67.23 L 938.76 67.54 L 938.56 68.20 L 938.46 68.34 L 938.31 68.43 L 938.28 68.51 L 938.32 68.80 L 938.60 69.30 Z M 937.16 84.78 L 941.87 85.25 L 941.97 84.73 L 941.72 84.48 L 941.14 82.98 L 941.26 82.43 L 942.34 77.02 L 942.01 76.91 L 941.56 76.66 L 940.85 75.99 L 940.34 75.34 L 940.20 75.44 L 940.09 75.72 L 940.05 75.93 L 940.06 76.00 L 939.94 76.21 L 939.85 76.27 L 939.22 76.11 L 939.12 75.75 L 938.77 75.38 L 937.92 75.27 L 937.72 74.83 L 937.87 74.13 L 938.00 73.72 L 938.28 73.52 L 938.42 73.28 L 938.73 72.54 L 938.58 71.31 L 938.48 70.93 L 938.00 70.23 L 937.41 70.17 L 937.38 69.37 L 937.10 68.71 L 936.82 68.40 L 934.61 68.66 L 931.11 72.88 L 929.27 70.70 L 928.13 72.04 L 925.47 72.04 L 926.92 76.72 L 927.16 76.67 L 928.10 76.46 L 928.16 83.56 L 926.56 83.82 L 926.56 84.15 L 926.98 84.80 L 926.20 84.97 L 926.30 85.60 L 928.04 87.60 L 931.16 86.72 L 932.63 87.02 L 933.14 83.71 Z",
+    pathD: "M 456.54 382.38 L 464.06 389.44 L 463.78 414.03 L 453.23 429.31 L 451.14 438.32 L 470.9 452 L 507.23 427.06 L 513.5 415.0 L 518.5 400.0 L 519.24 383.61 L 476.13 378.48 L 463.55 375.43 L 456.54 382.38 Z",
     fill: 'fill-indigo-500',
     hoverFill: 'fill-indigo-700'
-    },
+},
   {
       id: 'york',
       name: 'York County',
@@ -158,22 +158,8 @@ export const maineCounties: NewEnglandState[] = [
   }
 ];
 
-export const mapViewBox: string = "890 20 95 155";
+// IMPORTANT: This viewBox is updated to cover the actual coordinate range
+// of the correct data (roughly X: 300-700, Y: 0-600).
+export const mapViewBox: string = "300 0 400 600"; 
 
-/**
+export const mapTransform: string | undefined = undefined;
- * SVG transform string to apply to the group of states to straighten the map.
- * Format: "rotate(angle cx cy)"
- * - angle: degrees to rotate (negative for counter-clockwise)
- * - cx: x-coordinate of the center of rotation
- * - cy: y-coordinate of the center of rotation
- *
- * You'll need to experiment with these values.
- * The approximate center of your current viewBox (890 65 85 110) is:
- * cx = 890 + (85 / 2) = 932.5
- * cy = 65 + (110 / 2) = 120
- */
-// export const mapTransform: string = "rotate(-2 932.5 120)"; // Example: Rotate -2 degrees around center
-export const mapTransform: string | undefined = undefined; // Start with no transform
-// Try uncommenting the line above and adjusting the -2, 932.5, and 120 values.
-// For example, if it's tilted 5 degrees clockwise, try "rotate(-5 932.5 120)"
-// If it's tilted 3 degrees counter-clockwise, try "rotate(3 932.5 120)"

src/routes/(app)/+layout.svelte

@@ -79,13 +79,11 @@
                     <button type="button" class="btn btn-ghost normal-case text-lg">
                         {$user.username}
                     </button>
-                    <ul class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+                    <ul class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 text-black">
                         <li><a href="/vendor">Dashboard</a></li>
                         <li><button type="button" on:click={logout}>Logout</button></li>
                     </ul>
                 </div>
-            {:else}
-                <a href="/login" class="btn btn-ghost normal-case text-lg">Dealer Login</a>
             {/if}
         </div>
     </header>
@@ -97,6 +95,9 @@
     <footer class="footer footer-center p-4 bg-base-300 text-base-content">
         <div>
             <p>Copyright © {new Date().getFullYear()} - All right reserved</p>
+            {#if !$user}
+                <a href="/login" class="link link-primary">Dealer Login</a>
+            {/if}
         </div>
     </footer>
 </div>

src/routes/(app)/+page.svelte

@@ -1,6 +1,6 @@
 <!-- src/routes/+page.svelte -->
 <script lang="ts">
-    import { newEnglandStates, mapViewBox } from '$lib/states';
+    import { newEnglandStates, mapViewBox, user } from '$lib/states';
     import { goto } from '$app/navigation';
     import { browser } from '$app/environment'; // To ensure SVG interactions only run client-side
     import { onMount } from 'svelte';
@@ -65,7 +65,8 @@
 
 
 <div class="text-center mb-8">
-    <p class="text-lg">Click your state to find prices.</p>
+    <p class="text-lg mb-4">Welcome to TradeWar, your go-to source for fuel prices across New England. Compare prices by state and county to find the best deals.</p>
+    <p class="text-sm">Click your state to find prices.</p>
 </div>
 
 <div class="flex justify-center items-center">
@@ -115,3 +116,9 @@
         {/each}
     </ul>
 </div>
+
+{#if !$user}
+<div class="mt-8 text-center">
+    <a href="/login" class="btn btn-primary">Dealer Login</a>
+</div>
+{/if}

src/routes/(app)/login/+page.svelte

@@ -53,27 +53,35 @@
   }
 </script>
 
-<div class="flex min-h-screen flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50 px-4 sm:px-6 lg:px-8">
-  <div class="w-full max-w-md space-y-8">
+  <div class="max-w-md w-full space-y-8">
-    <div>
+    <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
-      <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Sign in to your account</h2>
+      <div class="text-center">
+        <h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome back</h2>
+        <p class="text-gray-600">Sign in to your account</p>
       </div>
 
       {#if errorMessage}
-      <div class="rounded-md bg-red-50 p-4">
+        <div class="mt-6 bg-red-50 border border-red-200 rounded-lg p-4">
-        <div class="flex">
+          <div class="flex items-center">
-          <div class="ml-3">
+            <svg class="w-5 h-5 text-red-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+            </svg>
             <p class="text-sm font-medium text-red-800">{errorMessage}</p>
           </div>
         </div>
-      </div>
       {/if}
 
       <form class="mt-8 space-y-6" on:submit|preventDefault={handleSubmit}>
-      <input type="hidden" name="remember" value="true" />
+        <div class="space-y-4">
-      <div class="-space-y-px rounded-md shadow-sm">
           <div>
-          <label for="username" class="sr-only">Username</label>
+            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+                </svg>
+              </div>
               <input
                 id="username"
                 name="username"
@@ -81,12 +89,20 @@
                 autocomplete="username"
                 required
                 bind:value={username}
-            class="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
-            placeholder="Username"
+                placeholder="Enter your username"
               />
             </div>
+          </div>
+
           <div>
-          <label for="password" class="sr-only">Password</label>
+            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
+                </svg>
+              </div>
               <input
                 id="password"
                 name="password"
@@ -94,20 +110,21 @@
                 autocomplete="current-password"
                 required
                 bind:value={password}
-            class="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
-            placeholder="Password"
+                placeholder="Enter your password"
               />
             </div>
           </div>
+        </div>
 
         <div>
           <button
             type="submit"
             disabled={isLoading}
-          class="group relative flex w-full justify-center rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-orange-oil focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-oil transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
           >
             {#if isLoading}
-            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
               </svg>
@@ -118,10 +135,13 @@
           </button>
         </div>
       </form>
-    <div class="mt-4 text-center">
+
+      <div class="mt-6 text-center">
         <p class="text-sm text-gray-600">
-        Not registered yet? <a href="/register" class="font-medium text-indigo-600 hover:text-indigo-500">Register here</a>
+          Don't have an account?
+          <a href="/register" class="font-medium text-blue-600 hover:text-blue-500 transition-colors duration-200">Create one here</a>
         </p>
       </div>
     </div>
+  </div>
 </div>

src/routes/(app)/register/+page.svelte

@@ -55,27 +55,36 @@
   }
 </script>
 
-<div class="flex min-h-screen flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-blue-50 px-4 sm:px-6 lg:px-8">
-  <div class="w-full max-w-md space-y-8">
+  <div class="max-w-md w-full space-y-8">
-    <div>
+    <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
-      <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Create your account</h2>
+      <div class="text-center">
+        <h2 class="text-3xl font-bold text-gray-900 mb-2">Join us today</h2>
+        <p class="text-gray-600">Create your account</p>
       </div>
 
       {#if errorMessage}
-      <div class="rounded-md bg-red-50 p-4">
+        <div class="mt-6 bg-red-50 border border-red-200 rounded-lg p-4">
-        <div class="flex">
+          <div class="flex items-center">
-          <div class="ml-3">
+            <svg class="w-5 h-5 text-red-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+            </svg>
             <p class="text-sm font-medium text-red-800">{errorMessage}</p>
           </div>
         </div>
-      </div>
       {/if}
 
       <form class="mt-8 space-y-6" on:submit|preventDefault={handleSubmit}>
-      <input type="hidden" name="remember" value="true" />
+        <div class="space-y-4">
-      <div class="-space-y-px rounded-md shadow-sm">
           <div>
-          <label for="email-address" class="sr-only">Email address</label>
+            <label for="email-address" class="block text-sm font-medium text-gray-700 mb-2">Email address</label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
+                  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
+                </svg>
+              </div>
               <input
                 id="email-address"
                 name="email"
@@ -83,12 +92,20 @@
                 autocomplete="email"
                 required
                 bind:value={email}
-            class="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
-            placeholder="Email address"
+                placeholder="Enter your email"
               />
             </div>
+          </div>
+
           <div>
-          <label for="username" class="sr-only">Username</label>
+            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+                </svg>
+              </div>
               <input
                 id="username"
                 name="username"
@@ -96,12 +113,20 @@
                 autocomplete="username"
                 required
                 bind:value={username}
-            class="relative block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
-            placeholder="Username"
+                placeholder="Choose a username"
               />
             </div>
+          </div>
+
           <div>
-          <label for="password" class="sr-only">Password</label>
+            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
+                </svg>
+              </div>
               <input
                 id="password"
                 name="password"
@@ -109,12 +134,20 @@
                 autocomplete="new-password"
                 required
                 bind:value={password}
-            class="relative block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
-            placeholder="Password"
+                placeholder="Create a password"
               />
             </div>
+          </div>
+
           <div>
-          <label for="confirm-password" class="sr-only">Confirm Password</label>
+            <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-2">Confirm Password</label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
+                </svg>
+              </div>
               <input
                 id="confirm-password"
                 name="confirm-password"
@@ -122,29 +155,38 @@
                 autocomplete="new-password"
                 required
                 bind:value={confirmPassword}
-            class="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-oil focus:border-transparent transition-all duration-200 bg-gray-50 focus:bg-white"
-            placeholder="Confirm Password"
+                placeholder="Confirm your password"
               />
             </div>
           </div>
+        </div>
 
         <div>
           <button
             type="submit"
             disabled={isLoading}
-          class="group relative flex w-full justify-center rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-orange-oil focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-oil transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
           >
             {#if isLoading}
-            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
               </svg>
-            Registering...
+              Creating account...
             {:else}
-            Register
+              Create account
             {/if}
           </button>
         </div>
       </form>
+
+      <div class="mt-6 text-center">
+        <p class="text-sm text-gray-600">
+          Already have an account?
+          <a href="/login" class="font-medium text-green-600 hover:text-green-500 transition-colors duration-200">Sign in here</a>
+        </p>
+      </div>
+    </div>
   </div>
 </div>