feat(ux): Finalize advanced UX with plot zoom, export, and shadcn UI consistency.

frontend/src/components/auth/RegisterForm.tsx

@@ -14,6 +14,8 @@ import {
 import { Input } from "@/components/ui/input"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { useState } from "react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { AlertCircle } from "lucide-react"
 import axios from "axios"
 
 interface RegisterFormProps {
@@ -62,9 +64,10 @@ export function RegisterForm({ onSuccess, onToggleMode }: RegisterFormProps) {
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             {error && (
-              <div className="p-3 text-sm font-medium text-destructive bg-destructive/10 rounded-md">
-                {error}
-              </div>
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
             )}
             <FormField
               control={form.control}
@@ -112,13 +115,13 @@ export function RegisterForm({ onSuccess, onToggleMode }: RegisterFormProps) {
         </Form>
         <div className="mt-4 text-center text-sm">
           Already have an account?{" "}
-          <button
-            type="button"
-            className="underline underline-offset-4 hover:text-primary"
+          <Button
+            variant="link"
+            className="p-0 h-auto font-normal"
             onClick={onToggleMode}
           >
             Login
-          </button>
+          </Button>
         </div>
       </CardContent>
     </Card>