From dd4856c436abcb77d7f2bdf34019e2585b180ec5 Mon Sep 17 00:00:00 2001
From: maria papanagiotou <mariapapanagiwtou@gmail.com>
Date: Thu, 4 Jan 2024 10:40:28 +0200
Subject: [PATCH] new ui

---
 ui/next.config.js                             |   4 +-
 ui/src/components/LineRecordDialog.tsx        |   2 +-
 ui/src/components/NavBar.tsx                  |   4 +-
 ui/src/components/PhoneInput.tsx              |   1 +
 ui/src/components/ProtectedPage.tsx           |   2 +-
 ui/src/components/RecordDialog.tsx            |   2 +-
 ui/src/components/TextInput.tsx               |   4 +
 .../{VetDialog.tsx => UserDialog.tsx}         |  33 +--
 ui/src/components/button.module.css           |   4 +-
 ui/src/components/deleteModal.module.css      |   2 +-
 ui/src/components/navbar.module.css           |   2 +-
 ui/src/components/textInput.module.css        |   6 +-
 ui/src/pages/account.tsx                      |  13 +-
 ui/src/pages/auth/login.tsx                   |  23 +-
 ui/src/pages/auth/signup.tsx                  | 124 +++++------
 ui/src/pages/index.tsx                        | 123 +++++++----
 ui/src/pages/pet/[id]/edit.tsx                |   8 +-
 ui/src/pages/pet/[id]/index.tsx               | 199 ++++++++++++------
 ui/src/pages/pet/create.tsx                   |   9 +-
 19 files changed, 335 insertions(+), 230 deletions(-)
 rename ui/src/components/{VetDialog.tsx => UserDialog.tsx} (81%)

diff --git a/ui/next.config.js b/ui/next.config.js
index 7767ea3..82ee722 100644
--- a/ui/next.config.js
+++ b/ui/next.config.js
@@ -4,8 +4,8 @@ const nextConfig = {
     // reactStrictMode: true,
     env: {
         // // apiUrl: "http://localhost:8080/api",
-        // apiUrl: "https://mypetjournal-lqkz3.ondigitalocean.app/api",
-        apiUrl: "/api",
+        apiUrl: "https://mypetjournal-lqkz3.ondigitalocean.app/api",
+        // apiUrl: "/api",
     },
     images: {
         unoptimized: true
diff --git a/ui/src/components/LineRecordDialog.tsx b/ui/src/components/LineRecordDialog.tsx
index 0d944ba..8d0b877 100644
--- a/ui/src/components/LineRecordDialog.tsx
+++ b/ui/src/components/LineRecordDialog.tsx
@@ -188,7 +188,7 @@ export default class LineRecordDialog extends Component<LineRecordDialogProps, L
             <div id="defaultModal" tabIndex={-1} className={`fixed flex grow ${this.state?.show ? "" : "hidden"} z-50 h-screen w-full`}>
                 <div className="relative self-center mx-auto w-full max-w-2xl max-h-full">
                     {/*Modal content*/}
-                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700/60 backdrop-blur-lg">
                         {/*Modal header*/}
                         <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                             <h3 className="text-xl font-semibold text-gray-900 dark:text-white capitalize">
diff --git a/ui/src/components/NavBar.tsx b/ui/src/components/NavBar.tsx
index 6f4e9da..05cc66d 100644
--- a/ui/src/components/NavBar.tsx
+++ b/ui/src/components/NavBar.tsx
@@ -70,7 +70,9 @@ class NavBar extends BaseComponent<NavBarProps, NavBarState> {
                                 />
 
                                 <ArrowLeftOnRectangleIcon
-                                    className={"h-10 w-10 text-slate-300 p-2 rounded-full hover:bg-gray-600"}
+                                    className={
+                                        "h-10 w-10 text-cyan-50 dark:text-slate-300 p-2 rounded-full hover:bg-indigo-500/20 hover:dark:bg-gray-600"
+                                    }
                                     onClick={() => this.logout(() => this.props.router.replace("/auth/login"))}
                                 />
                             </div>
diff --git a/ui/src/components/PhoneInput.tsx b/ui/src/components/PhoneInput.tsx
index f32537e..72a8b5d 100644
--- a/ui/src/components/PhoneInput.tsx
+++ b/ui/src/components/PhoneInput.tsx
@@ -29,6 +29,7 @@ export default function PhoneInput(props: PhoneInputProps) {
             <Input
                 autoFormat={props.autoFormat}
                 countryCodeEditable={props.countryCodeEditable}
+                disableDropdown={props.disabled}
                 preferredCountries={props.preferredCountries}
                 inputProps={{
                     id: props.id,
diff --git a/ui/src/components/ProtectedPage.tsx b/ui/src/components/ProtectedPage.tsx
index 176803a..7cfbaf7 100644
--- a/ui/src/components/ProtectedPage.tsx
+++ b/ui/src/components/ProtectedPage.tsx
@@ -42,7 +42,7 @@ class ProtectedPage extends BaseComponent<ProtectedPageProps, ProtectedPageState
 
     render() {
         return TextUtils.isNotEmpty(this.state.token) ? (
-            <div className={`flex flex-col h-screen bg-slate-700`}>
+            <div className={`flex flex-col h-screen bg-slate-100 dark:bg-slate-700`}>
                 {!this.props.hideNav && <NavBar />}
                 <span className={`flex flex-col grow overflow-y-auto ${this.props.className}`}>{this.props.children}</span>
             </div>
diff --git a/ui/src/components/RecordDialog.tsx b/ui/src/components/RecordDialog.tsx
index b691be3..19c36fd 100644
--- a/ui/src/components/RecordDialog.tsx
+++ b/ui/src/components/RecordDialog.tsx
@@ -469,7 +469,7 @@ export default class RecordDialog extends Component<RecordDialogProps, RecordDia
             <div id="defaultModal" tabIndex={-1} className={`fixed flex grow ${this.state?.show ? "" : "hidden"} z-50 h-screen w-full`}>
                 <div className="relative self-center mx-auto w-full max-w-2xl max-h-full">
                     {/*Modal content*/}
-                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700/70 backdrop-blur-lg">
                         {/*Modal header*/}
                         <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                             {this.state.pet && (
diff --git a/ui/src/components/TextInput.tsx b/ui/src/components/TextInput.tsx
index 4e4eaac..a5a89c5 100644
--- a/ui/src/components/TextInput.tsx
+++ b/ui/src/components/TextInput.tsx
@@ -4,6 +4,7 @@ import styles from "./textInput.module.css"
 interface ButtonProps {
     id: string
     name: string
+    icon?: React.ReactElement
     type?: HTMLInputTypeAttribute
     required?: boolean
     autoComplete: string
@@ -35,6 +36,9 @@ export default function TextInput(props: ButtonProps) {
             <label htmlFor={props.id} className={props.showLabel ? styles.label : "sr-only"}>
                 {props.placeholder}
             </label>
+            {props.icon !== undefined && <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                {props.icon}
+            </div>}
             <input
                 required={props.required}
                 id={props.id}
diff --git a/ui/src/components/VetDialog.tsx b/ui/src/components/UserDialog.tsx
similarity index 81%
rename from ui/src/components/VetDialog.tsx
rename to ui/src/components/UserDialog.tsx
index 08e814d..464088e 100644
--- a/ui/src/components/VetDialog.tsx
+++ b/ui/src/components/UserDialog.tsx
@@ -1,21 +1,21 @@
 import React, {Component} from "react"
-import {EnvelopeIcon, MapIcon, PhoneIcon, UserIcon, XMarkIcon} from "@heroicons/react/20/solid"
+import {EnvelopeIcon, MapIcon, PhoneIcon, XMarkIcon} from "@heroicons/react/20/solid"
 import TextUtils from "@/Utils/TextUtils"
 import {User} from "@/models/user/User"
 import Avatar from "@/components/Avatar"
 
-interface VetDialogProps {
+interface UserDialogProps {
     onDismiss: () => void
 }
 
-interface VetDialogState {
+interface UserDialogState {
     title: string
     info: User
     show: boolean
 }
 
-export default class VetDialog extends Component<VetDialogProps, VetDialogState> {
-    constructor(props: VetDialogProps) {
+export default class UserDialog extends Component<UserDialogProps, UserDialogState> {
+    constructor(props: UserDialogProps) {
         super(props)
         this.state = {
             title: "Vet Information",
@@ -45,12 +45,12 @@ export default class VetDialog extends Component<VetDialogProps, VetDialogState>
     }
 
     render() {
-        const vet = this.state.info
+        const user = this.state.info
         return (
             <div id="defaultModal" tabIndex={-1} className={`fixed flex grow ${this.state?.show ? "" : "hidden"} z-50 h-screen w-full`}>
                 <div className="relative self-center mx-auto w-full max-w-2xl max-h-full">
                     {/*Modal content*/}
-                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700/60 backdrop-blur-lg">
                         {/*Modal header*/}
                         <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                             <h3 className="text-xl font-semibold text-gray-900 dark:text-white text-center">{this.state.title}</h3>
@@ -67,31 +67,34 @@ export default class VetDialog extends Component<VetDialogProps, VetDialogState>
                         {this.state.info !== undefined && (
                             <div className="px-12 py-4 space-y-4 max-h-96 overflow-y-auto justify-center">
                                 <div className={"flex items-center justify-center"}>
-                                    <Avatar icon={<UserIcon className={"flex p-1 h-[70px] w-[70px]"} />} />
+                                    <Avatar
+                                        avatarTitle={`${user.surname?.slice(0, 1) ?? ""}${user.name?.slice(0, 1) ?? ""}`}
+                                        className={"flex p-1 h-[70px] w-[70px]"}
+                                    />
                                 </div>
                                 <h3 className="text-center text-2xl text-indigo-100">
-                                    {vet.surname} {vet.name}
+                                    {user.surname} {user.name}
                                 </h3>
 
                                 <div className={"flex flex-col gap-2 mt-3"}>
-                                    {vet.email && (
+                                    {user.email && (
                                         <a
-                                            href={`mailto: ${vet.email}`}
+                                            href={`mailto: ${user.email}`}
                                             target={"_blank"}
                                             className={"flex gap-2 items-center text-indigo-100 hover:text-indigo-300 underline"}
                                         >
                                             <EnvelopeIcon className={"h-5 w-5"} />
-                                            {vet.email}
+                                            {user.email}
                                         </a>
                                     )}
-                                    {vet.phone && (
+                                    {user.phone && user.phone.length > 3 && (
                                         <a
-                                            href={`tel:${vet.phone}`}
+                                            href={`tel:${user.phone}`}
                                             target={"_parent"}
                                             className={"flex gap-2 items-center text-indigo-100 hover:text-indigo-300 underline"}
                                         >
                                             <PhoneIcon className={"h-5 w-5"} />
-                                            {vet.phone}
+                                            {user.phone}
                                         </a>
                                     )}
                                 </div>
diff --git a/ui/src/components/button.module.css b/ui/src/components/button.module.css
index ec945dd..04909bc 100644
--- a/ui/src/components/button.module.css
+++ b/ui/src/components/button.module.css
@@ -16,7 +16,7 @@
 }
 
 .btnSecondary:hover {
-    @apply ring-2 ring-indigo-700 text-white;
+    @apply ring-1 ring-indigo-700 shadow-lg text-indigo-500 dark:text-white;
 }
 
 .btnSecondary:focus-visible {
@@ -24,7 +24,7 @@
 }
 
 .btnGroup {
-    @apply m-0 rounded-none first:rounded-l-lg first:ml-0 last:rounded-r-lg border focus:z-10;
+    @apply m-0 rounded-none first:rounded-l-lg first:ml-0 last:rounded-r-lg border-0 focus:z-10 shadow-sm;
 }
 
 .btnPrimaryDisabled {
diff --git a/ui/src/components/deleteModal.module.css b/ui/src/components/deleteModal.module.css
index 1740470..c05397e 100644
--- a/ui/src/components/deleteModal.module.css
+++ b/ui/src/components/deleteModal.module.css
@@ -7,7 +7,7 @@
 }
 
 .content {
-    @apply relative rounded-lg shadow bg-gray-700
+    @apply relative rounded-lg shadow bg-gray-700/60 backdrop-blur-lg
 }
 
 .btnDelete {
diff --git a/ui/src/components/navbar.module.css b/ui/src/components/navbar.module.css
index c6931e2..7a7ee2c 100644
--- a/ui/src/components/navbar.module.css
+++ b/ui/src/components/navbar.module.css
@@ -1,5 +1,5 @@
 .navbar {
-    @apply sticky border-gray-200 bg-slate-800;
+    @apply sticky border-gray-200 bg-slate-900;
 }
 
 .rightSideContainer {
diff --git a/ui/src/components/textInput.module.css b/ui/src/components/textInput.module.css
index 3049447..c4b239f 100644
--- a/ui/src/components/textInput.module.css
+++ b/ui/src/components/textInput.module.css
@@ -1,5 +1,5 @@
 .textInput {
-    @apply relative flex border-0 py-1.5 text-gray-900 dark:text-slate-300 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
+    @apply flex border-0 py-1.5 text-gray-900 dark:text-slate-300 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
     dark:bg-slate-700 dark:ring-slate-600;
 }
 
@@ -8,7 +8,7 @@
 }
 
 .label {
-    @apply text-gray-900 dark:text-slate-300 text-sm mb-2;
+    @apply text-indigo-900 dark:text-slate-300 text-sm mb-2;
 }
 
 .textInputFull {
@@ -24,7 +24,7 @@
 }
 
 .textInputContainer {
-    @apply w-full flex flex-col;
+    @apply w-full flex flex-col relative;
 }
 
 .phoneInput {
diff --git a/ui/src/pages/account.tsx b/ui/src/pages/account.tsx
index 1d72f7f..e74bdb8 100644
--- a/ui/src/pages/account.tsx
+++ b/ui/src/pages/account.tsx
@@ -207,15 +207,16 @@ class Account extends BaseComponent<AccountProps, AccountState> {
         }
 
         return (
-            <ProtectedPage init={this.initPage} key={"account"} className={"bg-[url('/register-bg-dark.jpg')] bg-contain bg-center"}>
-                <div className="flex items-center mx-auto my-auto bg-slate-800 max-w-sm lg:max-w-xl border rounded-md border-indigo-600">
+            <ProtectedPage
+                init={this.initPage}
+                key={"account"}
+                className={"bg-[url('/register-bg.jpg')] dark:bg-[url('/register-bg-dark.jpg')] bg-contain bg-center"}
+            >
+                <div className="flex items-center mx-auto my-auto bg-white/40 dark:bg-slate-800/60 backdrop-blur-lg max-w-sm lg:max-w-xl shadow-lg rounded-md">
                     <div className="shadow-sm z-10 px-4 py-6">
-                        <div className="flex w-full justify-center">
-                            <h2 className="mb-6 text-center text-3xl font-bold tracking-tight text-indigo-100"></h2>
-                        </div>
                         <div className={"flex flex-row items-baseline justify-end"}>
                             <div className="flex justify-center pb-4 grow">
-                                <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-indigo-100  text-center">
+                                <h2 className="text-3xl font-bold tracking-tight text-indigo-900 dark:text-indigo-100  text-center">
                                     {this.state.viewOnly ? "Account Information" : "Update Account Information"}
                                 </h2>
                             </div>
diff --git a/ui/src/pages/auth/login.tsx b/ui/src/pages/auth/login.tsx
index eaad91b..8faaea4 100644
--- a/ui/src/pages/auth/login.tsx
+++ b/ui/src/pages/auth/login.tsx
@@ -74,9 +74,19 @@ class Login extends BaseComponent<LoginProps, LoginState> {
     render() {
         return (
             <main className="flex flex-col grow h-screen">
-                <NavBar hideAllPages buttons={<Button title={"Sign Up"} variant={"primary"} onClick={this.navigateToSignUp} />} />
+                <NavBar
+                    hideAllPages
+                    buttons={
+                        <Button
+                            title={"Sign Up"}
+                            variant={"primary"}
+                            onClick={this.navigateToSignUp}
+                            className={"shadow-sm shadow-indigo-700 hover:shadow-md hover:shadow-indigo-800"}
+                        />
+                    }
+                />
                 <div className="flex items-center justify-center h-full bg-[url('/register-bg.jpg')] dark:bg-[url('/register-bg-dark.jpg')] bg-contain bg-center">
-                    <div className="container items-center mx-auto bg-white dark:bg-slate-800 max-w-sm lg:max-w-md border rounded-md border-indigo-600  px-4 py-12 sm:px-6 lg:px-8">
+                    <div className="isolate container items-center mx-auto bg-white dark:bg-slate-800/30 max-w-sm lg:max-w-md rounded-md px-4 py-12 sm:px-6 lg:px-8 shadow-md backdrop-blur-sm">
                         <div className="w-full max-w-md space-y-8">
                             <div>
                                 <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
@@ -122,7 +132,14 @@ class Login extends BaseComponent<LoginProps, LoginState> {
                                     />
                                 </div>
                                 <ErrorMessage message={this.state.serverError} />
-                                <Button variant={"primary"} type={"submit"} title={"LogIn"} width={"full"} onClick={this.onSubmit} />
+                                <Button
+                                    variant={"primary"}
+                                    type={"submit"}
+                                    title={"LogIn"}
+                                    width={"full"}
+                                    onClick={this.onSubmit}
+                                    className={"drop-shadow-sm drop-shadow-indigo-600 hover:shadow-md hover:shadow-indigo-800"}
+                                />
                             </form>
                         </div>
                     </div>
diff --git a/ui/src/pages/auth/signup.tsx b/ui/src/pages/auth/signup.tsx
index 575b453..d18a701 100644
--- a/ui/src/pages/auth/signup.tsx
+++ b/ui/src/pages/auth/signup.tsx
@@ -2,12 +2,8 @@ import Button from "@/components/Button"
 import React from "react"
 import {UserType, UserTypeUtils} from "@/enums/UserType"
 import countries from "i18n-iso-countries"
-import PhoneInput from "@/components/PhoneInput"
 import "react-phone-input-2/lib/material.css"
-import TextUtils from "@/Utils/TextUtils"
 import TextInput from "@/components/TextInput"
-import textInputStyle from "@/components/textInput.module.css"
-import styles from "@/components/textInput.module.css"
 import {withRouter} from "next/router"
 import NavBar from "@/components/NavBar"
 import {Auth} from "@/models/user/User"
@@ -72,42 +68,6 @@ class Signup extends BaseComponent<SingUpProps, SingUpState> {
         this.setState({vm})
     }
 
-    private onCountryChange = (event: any) => {
-        const vm = this.state.vm
-        vm.country = event.currentTarget.value
-        this.setState({vm})
-    }
-
-    private onCityChange = (value: string) => {
-        const vm = this.state.vm
-        vm.city = value
-        this.setState({vm})
-    }
-
-    private onStateChange = (value: string) => {
-        const vm = this.state.vm
-        vm.state = value
-        this.setState({vm})
-    }
-
-    private onZipChange = (value: string) => {
-        const vm = this.state.vm
-        vm.zip = value
-        this.setState({vm})
-    }
-
-    private onAddressChange = (value: string) => {
-        const vm = this.state.vm
-        vm.address = value
-        this.setState({vm})
-    }
-
-    private onPhoneChanged = (phone: string) => {
-        const vm = this.state.vm
-        vm.phone = phone
-        this.setState({vm})
-    }
-
     private checkName = () => {
         this.state.vm.checkName()
         this.forceUpdate()
@@ -164,11 +124,21 @@ class Signup extends BaseComponent<SingUpProps, SingUpState> {
         const vm = this.state.vm
         return (
             <main className="flex flex-col h-screen ">
-                <NavBar hideAllPages buttons={<Button title={"Sign In"} variant={"primary"} onClick={this.navigateToSignIn} />} />
+                <NavBar
+                    hideAllPages
+                    buttons={
+                        <Button
+                            title={"Sign In"}
+                            variant={"primary"}
+                            onClick={this.navigateToSignIn}
+                            className={"shadow-sm shadow-indigo-700 hover:shadow-md hover:shadow-indigo-800"}
+                        />
+                    }
+                />
                 <div className="flex grow items-center justify-center bg-slate-900 bg-[url('/register-bg.jpg')] dark:bg-[url('/register-bg-dark.jpg')] bg-contain bg-center">
-                    <div className="my-4 flex items-center mx-auto bg-white dark:bg-slate-800 max-w-sm md:max-w-xl border rounded-md border-indigo-600">
+                    <div className="my-4 flex items-center mx-auto bg-white/40 dark:bg-slate-800/20 max-w-sm md:max-w-xl rounded-md backdrop-blur-md dark:backdrop-blur-sm shadow-md">
                         <div className="shadow-sm z-10 px-4 py-4">
-                            <h2 className="py-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-indigo-100">
+                            <h2 className="py-6 text-center text-3xl font-bold tracking-tight text-indigo-900 dark:text-indigo-100">
                                 Create your account
                             </h2>
                             <form className="space-y-4" method="POST" onSubmit={this.onSubmit}>
@@ -197,7 +167,7 @@ class Signup extends BaseComponent<SingUpProps, SingUpState> {
                                         required
                                         width={"full"}
                                         classNames="rounded-s-md"
-                                        placeholder="Name"
+                                        placeholder="Name*"
                                         value={vm.name}
                                         onInput={this.onNameChange}
                                         onBlur={this.checkName}
@@ -213,7 +183,7 @@ class Signup extends BaseComponent<SingUpProps, SingUpState> {
                                         required
                                         width={"full"}
                                         classNames="rounded-e-md"
-                                        placeholder="Surname"
+                                        placeholder="Surname*"
                                         value={vm.surname}
                                         onInput={this.onSurnameChange}
                                         onBlur={this.checkSurname}
@@ -223,39 +193,39 @@ class Signup extends BaseComponent<SingUpProps, SingUpState> {
                                     />
                                 </div>
 
-                                <div className="shadow-sm">
-                                    <TextInput
-                                        id="email-address"
-                                        name="email"
-                                        type="email"
-                                        required
-                                        width={"full"}
-                                        classNames="rounded-t-md"
-                                        placeholder="Email address"
-                                        value={vm.email}
-                                        onInput={this.onEmailChange}
-                                        onBlur={this.checkMail}
-                                        hasError={vm.hasEmailError}
-                                        errorMessage={vm.emailError}
-                                        autoComplete={"email"}
-                                    />
+                                <TextInput
+                                    id="email-address"
+                                    name="email"
+                                    type="email"
+                                    required
+                                    width={"full"}
+                                    classNames="rounded-md"
+                                    placeholder="Email address*"
+                                    value={vm.email}
+                                    onInput={this.onEmailChange}
+                                    onBlur={this.checkMail}
+                                    hasError={vm.hasEmailError}
+                                    errorMessage={vm.emailError}
+                                    autoComplete={"email"}
+                                    showLabel
+                                />
 
-                                    <TextInput
-                                        id="password"
-                                        name="password"
-                                        type="password"
-                                        autoComplete="new-password"
-                                        required
-                                        width={"full"}
-                                        classNames="rounded-b-md"
-                                        placeholder="Password"
-                                        value={vm.password}
-                                        onInput={this.onPasswordChange}
-                                        onBlur={this.checkPassword}
-                                        hasError={vm.hasPasswordError}
-                                        errorMessage={vm.passwordError}
-                                    />
-                                </div>
+                                <TextInput
+                                    id="password"
+                                    name="password"
+                                    type="password"
+                                    autoComplete="new-password"
+                                    required
+                                    width={"full"}
+                                    classNames="rounded-md"
+                                    placeholder="Password*"
+                                    value={vm.password}
+                                    onInput={this.onPasswordChange}
+                                    onBlur={this.checkPassword}
+                                    hasError={vm.hasPasswordError}
+                                    errorMessage={vm.passwordError}
+                                    showLabel
+                                />
                                 <ErrorMessage message={this.state.serverError} />
                                 <Button
                                     key={"submit"}
diff --git a/ui/src/pages/index.tsx b/ui/src/pages/index.tsx
index 402080f..0975552 100644
--- a/ui/src/pages/index.tsx
+++ b/ui/src/pages/index.tsx
@@ -7,12 +7,12 @@ import Button from "@/components/Button"
 import ErrorMessage from "@/components/ErrorMessage"
 import {withRouter} from "next/router"
 import dynamic from "next/dynamic"
-import {PetGenderUtils} from "@/enums/Genders"
 import TextUtils from "@/Utils/TextUtils"
 import Avatar from "@/components/Avatar"
-import {PlusCircleIcon} from "@heroicons/react/24/outline"
+import {MagnifyingGlassIcon, PlusCircleIcon} from "@heroicons/react/24/outline"
 import {WithRouterProps} from "next/dist/client/with-router"
 import BaseComponent from "@/components/BaseComponent"
+import TextInput from "@/components/TextInput"
 
 interface PetsProps extends WithRouterProps {
     className: string
@@ -20,6 +20,7 @@ interface PetsProps extends WithRouterProps {
 
 interface PetsState {
     pets: Pet[]
+    filter: string
     serverError?: string
     token?: string
     loading: boolean
@@ -34,6 +35,7 @@ class Pets extends BaseComponent<PetsProps, PetsState> {
         super(props)
         this.state = {
             pets: [],
+            filter: "",
             loading: true,
         }
     }
@@ -63,15 +65,61 @@ class Pets extends BaseComponent<PetsProps, PetsState> {
         this.props.router.push("/pet/create")
     }
 
+    private get filteredPets() {
+        if (TextUtils.isEmpty(this.state.filter)) {
+            return this.state.pets
+        }
+
+        return this.state.pets.filter((pet) => {
+            return (
+                pet.name?.toUpperCase().includes(this.state.filter) ||
+                pet.owner?.name?.toUpperCase().includes(this.state.filter) ||
+                pet.owner?.surname?.toUpperCase().includes(this.state.filter) ||
+                pet.owner?.email?.toUpperCase().includes(this.state.filter) ||
+                pet.owner?.phone?.toUpperCase().includes(this.state.filter)
+            )
+        })
+    }
+
+    private onFilterInputChange = (value: string) => {
+        this.setState({filter: value.toUpperCase()})
+    }
+
+    private get petCreateButton() {
+        return (
+            <button
+                onClick={this.navigateToPetCreate}
+                className="flex flex-col aspect-square py-12 px-8 rounded-md shadow bg-indigo-200 dark:bg-slate-800 hover:shadow-lg justify-center items-center"
+            >
+                <PlusCircleIcon className={"flex h-[100px] text-indigo-700 dark:text-indigo-400"} />
+                <div className={"text-indigo-800 dark:text-indigo-200 text-2xl py-2"}>Create Pet</div>
+            </button>
+        )
+    }
+
     render() {
-        const sortedPets = this.state.pets.sort((a, b) => new Date(a.createdAt!).getTime() - new Date(b.createdAt!).getTime())
+        const sortedPets = this.filteredPets.sort((a, b) => new Date(a.createdAt!).getTime() - new Date(b.createdAt!).getTime())
         return (
             <ProtectedPage init={this.initPage} key={"pets"} className={"pt-4 px-7 overflow-y-hidden"}>
                 <ErrorMessage message={this.state.serverError} />
-                <div className={`flex flex-row justify-between items-center `}>
-                    <h2 className={"align-middle text-indigo-200 text-2xl"}>Pets</h2>
+                <div className={`flex flex-row justify-between items-center`}>
+                    <h2 className={"align-middle text-indigo-800 dark:text-indigo-200 text-2xl"}>Pets</h2>
                     <Button title={"Create Pet"} variant={"primary"} type={"button"} onClick={this.navigateToPetCreate} />
                 </div>
+                <form className="relative mt-4">
+                    <TextInput
+                        width={"full"}
+                        icon={<MagnifyingGlassIcon className="w-4 h-4 visible text-gray-400" />}
+                        type={"search"}
+                        id={"pet-filter"}
+                        name={"filter"}
+                        autoComplete={"off"}
+                        placeholder={"Search pet name or owner name or email..."}
+                        onInput={this.onFilterInputChange}
+                        classNames="p-4 ps-10 rounded-md shadow hover:shadow-lg"
+                    />
+                </form>
+
                 {this.state.loading ? (
                     <div role="status" className={"flex grow justify-center items-center"}>
                         <svg
@@ -96,51 +144,54 @@ class Pets extends BaseComponent<PetsProps, PetsState> {
                     <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 py-2 overflow-y-auto mt-2">
                         {sortedPets.map((pet) => {
                             return (
-                                <Link key={pet.id} href={`/pet/${pet.id}`}>
-                                    <div className="flex flex-col aspect-square p-8 border rounded-md shadow bg-slate-800 border-indigo-500 hover:bg-slate-600 justify-center items-center">
+                                <Link
+                                    key={pet.id}
+                                    href={`/pet/${pet.id}`}
+                                    className="flex flex-col !aspect-square rounded-md shadow-md bg-indigo-200 dark:bg-slate-800 hover:shadow-lg isolate"
+                                >
+                                    <div className={"flex w-full flex-col my-auto mx-auto items-center py-2.5 px-4"}>
                                         <Avatar
                                             avatarTitle={pet.name?.slice(0, 1) ?? "-"}
                                             avatar={pet.avatar}
-                                            className={"h-[100px] w-[100px]"}
+                                            className={"h-[70px] w-[70px]"}
                                         />
-                                        <div className={"text-indigo-200 text-2xl py-2"}>{pet.name}</div>
-                                        <div>
-                                            <div className={"text-indigo-200 text-md h-6"}>
-                                                Breed: {TextUtils.valueOrEmpty(pet.breedName, "-")}
+                                        <div
+                                            className={
+                                                "text-indigo-800 dark:text-indigo-200 text-2xl py-2 truncate max-w-[90%] text-center"
+                                            }
+                                        >
+                                            {pet.name}
+                                        </div>
+                                        <div
+                                            className={"text-indigo-800 dark:text-indigo-200 text-md h-6 truncate max-w-[90%] text-center"}
+                                        >
+                                            {TextUtils.valueOrEmpty(pet.breedName, "-")}
+                                        </div>
+                                    </div>
+                                    <div className="flex flex-nowrap justify-self-start shadow bg-indigo-500/20 justify-between items-center py-2 px-3 rounded-b-md">
+                                        <Avatar
+                                            avatarTitle={`${pet.owner?.surname?.slice(0, 1) ?? ""}${pet.owner?.name?.slice(0, 1) ?? ""}`}
+                                            textStyle={"text-sm"}
+                                            className={"h-[30px] w-[30px]"}
+                                        />
+                                        <div className={"w-full ps-3 overflow-hidden "}>
+                                            <div className={"text-indigo-800 dark:text-indigo-200 text-md pb-1"}>Pet Owner Info</div>
+                                            <div className={"text-indigo-800 dark:text-indigo-200 text-sm truncate max-w-full"}>
+                                                {pet.owner?.surname} {pet.owner?.name}
                                             </div>
-                                            <div className={"text-indigo-200 text-md h-6"}>
-                                                Gender: {TextUtils.valueOrEmpty(PetGenderUtils.getTitle(pet.gender!), "-")}
+                                            <div className={"text-indigo-800 dark:text-indigo-200 text-sm truncate max-w-full"}>
+                                                {TextUtils.valueOrEmpty(pet.owner?.email!, "-")}
                                             </div>
                                         </div>
                                     </div>
                                 </Link>
                             )
                         })}
-                        <button
-                            onClick={this.navigateToPetCreate}
-                            className="flex flex-col aspect-square p-8 border rounded-md shadow bg-slate-800 border-indigo-500 hover:bg-slate-600 justify-center items-center"
-                        >
-                            <div className={"h-6"}> </div>
-                            <PlusCircleIcon className={"flex h-[100px] text-indigo-400"} />
-                            <div className={"text-indigo-200 text-2xl py-2"}>Create Pet</div>
-                            <div className={"h-6"}> </div>
-                        </button>
+                        {this.petCreateButton}
                     </div>
                 ) : (
-                    // <div className={"flex flex-col grow justify-center items-center"} onClick={this.navigateToPetCreate}>
-                    //     <PlusCircleIcon className={"flex h-80 text-indigo-400"} />
-                    //     <h3 className={"text-cyan-200 text-5xl font-semibold"}>Create your first pet</h3>
-                    // </div>
                     <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 py-2 overflow-y-auto mt-2">
-                        <button
-                            onClick={this.navigateToPetCreate}
-                            className="flex flex-col aspect-square p-8 border rounded-md shadow bg-slate-800 border-indigo-500 hover:bg-slate-600 justify-center items-center"
-                        >
-                            <div className={"h-6"}> </div>
-                            <PlusCircleIcon className={"flex h-[100px] text-indigo-400"} />
-                            <div className={"text-indigo-200 text-2xl py-2"}>Create your first pet</div>
-                            <div className={"h-6"}> </div>
-                        </button>
+                        {this.petCreateButton}
                     </div>
                 )}
             </ProtectedPage>
diff --git a/ui/src/pages/pet/[id]/edit.tsx b/ui/src/pages/pet/[id]/edit.tsx
index aad6bc1..48d73a0 100644
--- a/ui/src/pages/pet/[id]/edit.tsx
+++ b/ui/src/pages/pet/[id]/edit.tsx
@@ -303,9 +303,7 @@ class Edit extends BaseComponent<EditProps, EditState> {
                 init={this.initPage}
                 className={"bg-[url('/register-bg-dark.jpg')] bg-contain bg-center overflow-y-auto"}
             >
-                {/*<div className={"flex fixed self-end mt-4 me-4 hover:bg-gray-600 hover:text-red-600 p-1 rounded-md"}></div>*/}
-
-                <div className="flex items-center mx-auto my-auto bg-white dark:bg-slate-800 max-w-sm lg:max-w-xl border rounded-md border-indigo-600">
+                <div className="flex items-center mx-auto my-auto bg-white dark:bg-slate-800/50 backdrop-blur-sm max-w-sm lg:max-w-xl rounded-md shadow-lg">
                     <div className="shadow-sm px-4 py-4">
                         <div className={"flex flex-row items-baseline justify-end"}>
                             <div className="flex justify-center pb-4 grow">
@@ -315,7 +313,6 @@ class Edit extends BaseComponent<EditProps, EditState> {
                             </div>
                             <TrashIcon className={" h-6 w-6 text-red-500"} onClick={() => this.deleteDialogRef?.show()} />
                         </div>
-
                         <form className="space-y-1 mb-3" method="POST" onSubmit={this.onSubmit}>
                             <div className={"flex py-2"}>
                                 <div className={"mx-auto"}>
@@ -329,7 +326,6 @@ class Edit extends BaseComponent<EditProps, EditState> {
                                         className={"h-[90px] w-[90px]"}
                                     />
                                 </div>
-
                                 <input
                                     ref={(ref) => (this.imageInputRef = ref)}
                                     className={`sr-only`}
@@ -341,7 +337,6 @@ class Edit extends BaseComponent<EditProps, EditState> {
                                     onChange={this.onImageChange}
                                 />
                             </div>
-
                             <TextInput
                                 autoFocus={false}
                                 id="name"
@@ -359,7 +354,6 @@ class Edit extends BaseComponent<EditProps, EditState> {
                                 errorMessage={vm.nameError}
                                 showLabel={true}
                             />
-
                             <TextInput
                                 id="dateOfBirth"
                                 name="dateOfBirth"
diff --git a/ui/src/pages/pet/[id]/index.tsx b/ui/src/pages/pet/[id]/index.tsx
index af93a52..99b8962 100644
--- a/ui/src/pages/pet/[id]/index.tsx
+++ b/ui/src/pages/pet/[id]/index.tsx
@@ -15,16 +15,12 @@ import {
     PlusIcon,
     XMarkIcon,
 } from "@heroicons/react/20/solid"
-import {
-    ArrowTopRightOnSquareIcon,
-    CheckBadgeIcon as CheckBadgeIconOutline,
-    PlusCircleIcon
-} from "@heroicons/react/24/outline"
+import {ArrowTopRightOnSquareIcon, CheckBadgeIcon as CheckBadgeIconOutline, PlusCircleIcon} from "@heroicons/react/24/outline"
 import ErrorMessage from "@/components/ErrorMessage"
 import TextUtils from "@/Utils/TextUtils"
-import {differenceInCalendarMonths, differenceInCalendarWeeks, differenceInCalendarYears, format} from "date-fns"
+import {differenceInCalendarMonths, differenceInCalendarWeeks, differenceInCalendarYears, format, isBefore} from "date-fns"
 import {Area, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts"
-import VetDialog from "@/components/VetDialog"
+import UserDialog from "@/components/UserDialog"
 import {Record} from "@/models/record/Record"
 import RecordDialog from "@/components/RecordDialog"
 import RecordCreationViewModel from "@/viewmodels/record/RecordCreationViewModel"
@@ -61,10 +57,10 @@ class WeightLineData {
 }
 
 interface RecordColor {
-    main: string;
-    tooltip: string;
-    dot: string;
-    backgroundColor: string;
+    main: string
+    tooltip: string
+    dot: string
+    backgroundColor: string
 }
 
 interface PetState {
@@ -87,7 +83,7 @@ const ProtectedPage = dynamic(() => import("@/components/ProtectedPage"), {
 
 class PetPage extends BaseComponent<PetProps, PetState> {
     private weightEntriesDialogRef: LineRecordDialog | null = null
-    private vetDialogRef: VetDialog | null = null
+    private userDialogRef: UserDialog | null = null
     private recordDialogRef: RecordDialog | null = null
     private deleteDialogRef: DeleteModal | null = null
 
@@ -296,42 +292,55 @@ class PetPage extends BaseComponent<PetProps, PetState> {
     private get petCard() {
         const pet = this.state.pet!
         return (
-            <div key={pet.id} className={"flex flex-col grow w-full"}>
-                <div className={"flex flex-col bg-slate-800 py-4 px-6 border border-indigo-600 rounded-md shadow-2xl relative"}>
+            <div key={pet.id} className={"flex flex-col grow h-full xl:h-auto w-full"}>
+                <div className={"flex flex-col bg-indigo-300 dark:bg-slate-800 py-4 px-6 rounded-md shadow-2xl relative"}>
                     <PencilIcon
-                        className={"absolute h-8 w-8 self-end text-indigo-300 z-1 hover:bg-gray-600 p-1 rounded-md"}
+                        className={"absolute h-8 w-8 self-end text-indigo-500 dark:text-indigo-300 z-1 hover:bg-gray-600 p-1 rounded-md"}
                         onClick={this.navigateToEdit}
                     />
-                    <h3 className="text-center text-3xl tracking-wider text-indigo-100">{pet.name}</h3>
-                    <div className={"flex flex-col lg:flex-row gap-2 my-4 justify-evenly align-middle"}>
+                    <div className={"flex flex-col xl:flex-row gap-2 my-4 justify-evenly align-middle"}>
                         <Avatar
                             avatarTitle={pet.name?.slice(0, 1) ?? "-"}
                             avatar={pet.avatar}
-                            className={"self-center h-[100px] w-[100px] "}
+                            className={"self-center h-[100px] w-[100px] xl:h-[150px] xl:w-[150px]"}
                         />
-                        <div className={"gap-2 mt-2"}>
-                            <div className={"flex flex-row items-center"}>
-                                <h3 className="text-indigo-200 md:text-lg pe-2 capitalize">breed :</h3>
-                                <p className="text-indigo-200 md:text-lg">{pet.breedName}</p>
-                            </div>
-                            <div className={"flex flex-row items-center"}>
-                                <h3 className="text-indigo-200 md:text-lg pe-2 capitalize">Age :</h3>
-                                <p className="text-indigo-200 md:text-lg">{this.getAge(pet)}</p>
-                            </div>
-                            <div className={"flex flex-row items-center"}>
-                                <h3 className="text-indigo-200 md:text-lg pe-2 capitalize">gender :</h3>
-                                <p className="text-indigo-200 md:text-lg">{PetGenderUtils.getTitle(pet.gender)}</p>
+                        <div className={"gap-2 mt-2 xl:max-w-[60%]"}>
+                            <h3 className="text-center text-xl xl:text-2xl tracking-wider text-indigo-800 dark:text-indigo-100 truncate ">
+                                {pet.name}
+                            </h3>
+                            <div className="flex flex-col ">
+                                <div className={"flex flex-row items-center"}>
+                                    <h3 className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg pe-2 capitalize whitespace-nowrap">
+                                        breed :
+                                    </h3>
+                                    <p className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg truncate">{pet.breedName}</p>
+                                </div>
+                                <div className={"flex flex-row items-center"}>
+                                    <h3 className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg pe-2 capitalize whitespace-nowrap">
+                                        Age :
+                                    </h3>
+                                    <p className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg">{this.getAge(pet)}</p>
+                                </div>
+                                <div className={"flex flex-row items-center"}>
+                                    <h3 className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg pe-2 capitalize whitespace-nowrap">
+                                        gender :
+                                    </h3>
+                                    <p className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg">
+                                        {PetGenderUtils.getTitle(pet.gender)}
+                                    </p>
+                                </div>
                             </div>
                             {pet.colors && pet.colors.length > 0 && (
                                 <div className={"flex flex-row items-start "}>
-                                    <h3 className="text-indigo-200 md:text-lg capitalize justify-start ">colors:</h3>
+                                    <h3 className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg capitalize justify-start whitespace-nowrap">
+                                        Colors :
+                                    </h3>
                                     <div className={"flex flex-row gap-x-1.5 gap-y-1 ms-3 flex-wrap py-1.5"}>
                                         {pet.colors.map((color, index) => (
                                             <div
                                                 key={`color_${index}`}
                                                 style={{backgroundColor: color}}
-                                                className={`rounded-full aspect-square h-[15px]
-w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate-600`}
+                                                className={`rounded-full aspect-square h-[15px] w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate-600`}
                                             ></div>
                                         ))}
                                     </div>
@@ -339,22 +348,29 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                             )}
                             {pet.pedigree && (
                                 <div className={"flex flex-row items-center"}>
-                                    <h3 className="text-indigo-200 text-md md:text-lg pe-2 capitalize">pedigree :</h3>
-                                    <p className="text-indigo-200 text-md md:text-lg">{pet.pedigree}</p>
+                                    <h3 className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg pe-2 capitalize whitespace-nowrap">
+                                        pedigree :
+                                    </h3>
+                                    <p className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg truncate">{pet.pedigree}</p>
                                 </div>
                             )}
                             {pet.microchip && (
                                 <div className={"flex flex-row items-center"}>
-                                    <h3 className="text-indigo-200 text-md md:text-lg pe-2 capitalize">microchip :</h3>
-                                    <p className="text-indigo-200 text-md md:text-lg">{pet.microchip}</p>
+                                    <h3 className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg pe-2 capitalize whitespace-nowrap">
+                                        microchip :
+                                    </h3>
+                                    <p className="text-indigo-700 dark:text-indigo-200 text-sm xl:text-lg max-w-xl truncate">
+                                        {pet.microchip}
+                                    </p>
                                 </div>
                             )}
                         </div>
                     </div>
                     <div className={"self-center gap-2"}>
-                        {/*<h3 className="text-center text-3xl tracking-wider text-indigo-100">{pet.name}</h3>*/}
                         {pet.description && (
-                            <p className="text-indigo-100 text-md md:text-lg pe-2 capitalize flex-wrap">{pet.description}</p>
+                            <p className="text-indigo-800 dark:text-indigo-100 text-sm xl:text-lg pe-2 capitalize flex-wrap">
+                                {pet.description}
+                            </p>
                         )}
                     </div>
 
@@ -362,30 +378,30 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                         {pet.vet !== undefined && TextUtils.isNotEmpty(pet.vet?.id) && (
                             <div
                                 className={
-                                    "flex border border-indigo-600 grow justify-center items-center gap-2 p-1 hover:bg-gray-700 rounded-md text-indigo-100"
+                                    "flex grow justify-center items-center gap-2 p-1 bg-indigo-500/60 dark:bg-indigo-600/30 rounded-md text-indigo-100 shadow hover:shadow-lg text-sm xl:text-lg !whitespace-nowrap text-ellipsis"
                                 }
                                 onClick={() => {
-                                    this.vetDialogRef?.setData(this.state.pet!.vet!)
-                                    this.vetDialogRef?.setTitle("Vet Information")
-                                    this.vetDialogRef?.show()
+                                    this.userDialogRef?.setData(this.state.pet!.vet!)
+                                    this.userDialogRef?.setTitle("Vet Information")
+                                    this.userDialogRef?.show()
                                 }}
                             >
-                                Show Vet Info
+                                Vet Info
                                 <ArrowTopRightOnSquareIcon className={"h-4 w-4 z-1"} />
                             </div>
                         )}
                         {pet.owner !== undefined && TextUtils.isNotEmpty(pet.owner?.name) && (
                             <div
                                 className={
-                                    "flex border border-indigo-600 grow justify-center items-center gap-2 p-1 hover:bg-gray-700 rounded-md text-indigo-100"
+                                    "flex grow justify-center items-center gap-2 p-1 bg-indigo-500/60 dark:bg-indigo-600/30 rounded-md text-indigo-100 shadow hover:shadow-lg text-sm xl:text-lg"
                                 }
                                 onClick={() => {
-                                    this.vetDialogRef?.setData(this.state.pet!.owner!)
-                                    this.vetDialogRef?.setTitle("Owner Information")
-                                    this.vetDialogRef?.show()
+                                    this.userDialogRef?.setData(this.state.pet!.owner!)
+                                    this.userDialogRef?.setTitle("Owner Information")
+                                    this.userDialogRef?.show()
                                 }}
                             >
-                                Show Owner Info
+                                Owner Info
                                 <ArrowTopRightOnSquareIcon className={"h-4 w-4 z-1"} />
                             </div>
                         )}
@@ -417,9 +433,9 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
     private getColors(type: RecordType): RecordColor {
         switch (type) {
             case RecordType.TEMPERATURE:
-                return {main: "#22d3ee", tooltip: "#0891b2", dot: "#06b6d4",backgroundColor: "#1E293B"}
+                return {main: "#22d3ee", tooltip: "#0891b2", dot: "#06b6d4", backgroundColor: "#1E293B"}
             default:
-                return {main: "#818CF8", tooltip: "#4F46E5", dot: "#6366F1",backgroundColor: "#1E293B"}
+                return {main: "#818CF8", tooltip: "#4F46E5", dot: "#6366F1", backgroundColor: "#1E293B"}
         }
     }
 
@@ -431,7 +447,7 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                 <div
                     className={`${
                         this.state.loading ? "animate-pulse" : ""
-                    } flex flex-col bg-slate-800 py-2 px-4 border border-indigo-600 rounded-md shadow-2xl grow`}
+                    } flex flex-col bg-indigo-300 dark:bg-slate-800 py-2 px-4 rounded-md shadow-2xl grow`}
                 >
                     <div className={`flex flex-row items-center justify-between mb-6`}>
                         <div className={"flex flex-row gap-4"}>
@@ -450,8 +466,10 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                                     }}
                                 >
                                     <h2
-                                        className={`capitalize justify-self-center text-lg lg:text-3xl font-bold tracking-tight ${
-                                            this.state.selectedLineModel === it ? "text-indigo-300" : "text-indigo-100"
+                                        className={`capitalize justify-self-center text-lg xl:text-3xl font-bold tracking-tight ${
+                                            this.state.selectedLineModel === it
+                                                ? `text-indigo-500 dark:text-indigo-300`
+                                                : `text-indigo-050 dark:text-indigo-100`
                                         }`}
                                     >
                                         {RecordTypeUtils.getTitle(it)}
@@ -461,12 +479,14 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                         </div>
                         <div className={"flex flex-row items-center lg:align-baseline align-middle"}>
                             <PlusIcon
-                                className={"flex h-8 w-8 text-indigo-300 lg:mt-4 lg:ml-4 z-1 hover:bg-gray-600 lg:p-1 rounded-md"}
+                                className={
+                                    "flex h-8 w-8 text-indigo-500 dark:text-indigo-300 lg:mt-4 lg:ml-4 z-1 hover:bg-indigo-500/40 hover:dark:bg-gray-600 lg:p-1 rounded-md"
+                                }
                                 onClick={this.setCreateWeightEntry}
                             />
                             <PencilIcon
-                                className={`flex h-7 lg:h-8 w-8 lg:mt-4 lg:ml-4 z-1 hover:bg-gray-600 lg:p-1 rounded-md ${
-                                    supportsEdit ? "text-indigo-300" : "text-slate-300"
+                                className={`flex h-7 lg:h-8 w-8 lg:mt-4 lg:ml-4 z-1 hover:bg-indigo-500/40 hover:dark:bg-gray-600 lg:p-1 rounded-md ${
+                                    supportsEdit ? `text-indigo-500 dark:text-indigo-300` : `text-gray-400 dark:text-slate-300`
                                 }`}
                                 onClick={supportsEdit ? this.setEditWeightEntry : noop}
                             />
@@ -480,7 +500,13 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                                 <XAxis dataKey="date" stroke={colors.main} />
                                 <YAxis stroke={colors.main} />
                                 <CartesianGrid strokeDasharray="3 3" stroke={colors.main + "4a"} />
-                                <Area dataKey="weightLimit" stroke={colors.main} strokeWidth={0.3} fill={colors.main + "4a"} activeDot={false} />
+                                <Area
+                                    dataKey="weightLimit"
+                                    stroke={colors.main}
+                                    strokeWidth={0.3}
+                                    fill={colors.main + "4a"}
+                                    activeDot={false}
+                                />
                                 <Line
                                     type="monotone"
                                     dataKey="weight"
@@ -507,7 +533,7 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
         return (
             <div
                 key={r.id}
-                className={`md:items-center flex ${upcoming? "" : "grow"}  ${upcoming? "flex-row" : "flex-col"} md:flex-row border-b ${
+                className={`md:items-center flex ${upcoming ? "" : "grow"}  ${upcoming ? "flex-row" : "flex-col"} md:flex-row border-b ${
                     r.administeredBy !== undefined ? "border-indigo-600" : "border-teal-600"
                 } justify-between last:border-b-0`}
             >
@@ -521,9 +547,9 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                             <CheckBadgeIcon
                                 className={"h-8 w-8 text-indigo-300 z-1 hover:bg-gray-600 p-0.5 rounded-md"}
                                 onClick={() => {
-                                    this.vetDialogRef?.setData(r.verifiedBy!)
-                                    this.vetDialogRef?.setTitle("Vet Information")
-                                    this.vetDialogRef?.show()
+                                    this.userDialogRef?.setData(r.verifiedBy!)
+                                    this.userDialogRef?.setTitle("Vet Information")
+                                    this.userDialogRef?.show()
                                 }}
                             />
                         ) : (
@@ -581,14 +607,44 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
             return <></>
         }
         const records = this.state.records.sort((a, b) => a.date! - b.date!).filter((it) => it.administeredBy !== undefined)
+        const expired = this.state.records
+            .sort((a, b) => a.date! - b.date!)
+            .filter((it) => it.administeredBy === undefined && isBefore(new Date(it.date!), new Date()))
         const upcoming = this.state.records.sort((a, b) => a.date! - b.date!).filter((it) => it.administeredBy === undefined)
         const expandedUpcoming = this.state.expandedTypes.get(this.REMINDER)
         return records.length > 0 ? (
             <div className={"overflow-y-auto"}>
+                {expired.length > 0 && (
+                    <div
+                        key={`headerExpired`}
+                        className={"flex flex-col border-teal-600 border rounded-md bg-teal-600/40 dark:bg-teal-600/10 px-2.5 mb-2"}
+                    >
+                        <div key={`header_title_${this.REMINDER}`} className={"py-2 flex flex-row gap-x-4 justify-between"}>
+                            <div
+                                className={"flex flex-row grow w-full capitalize"}
+                                onClick={() => this.updateExpanded(this.REMINDER, !expandedUpcoming)}
+                            >
+                                <span className={"flex grow"}>Upcoming </span>
+                                {expandedUpcoming ? (
+                                    <ChevronUpIcon className={"static h-6 w-6 self-end text-teal-300 z-1"} />
+                                ) : (
+                                    <ChevronDownIcon className={"static h-6 w-6 self-end text-teal-300 z-1"} />
+                                )}
+                            </div>
+                        </div>
+                        <div className={`${expandedUpcoming ? "" : "hidden"}`}>
+                            <div key={"header"} className={"hidden md:flex flex-row grow border-teal-600 border-b mb-2"}>
+                                <div className={"flex grow capitalize"}>Name</div>
+                                <div className={"flex grow capitalize"}>Date</div>
+                            </div>
+                            {upcoming.map((record) => this.recordEntry(record, true))}
+                        </div>
+                    </div>
+                )}
                 {upcoming.length > 0 && (
                     <div
                         key={`header${this.REMINDER}`}
-                        className={"flex flex-col border-teal-600 border rounded-md bg-teal-600 bg-opacity-10 px-2.5 mb-2"}
+                        className={"flex flex-col border-teal-600 border rounded-md bg-teal-600/40 dark:bg-teal-600/10 px-2.5 mb-2"}
                     >
                         <div key={`header_title_${this.REMINDER}`} className={"py-2 flex flex-row gap-x-4 justify-between"}>
                             <div
@@ -608,7 +664,7 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                                 <div className={"flex grow capitalize"}>Name</div>
                                 <div className={"flex grow capitalize"}>Date</div>
                             </div>
-                            {upcoming.map((record)=>this.recordEntry(record, true))}
+                            {upcoming.map((record) => this.recordEntry(record, true))}
                         </div>
                     </div>
                 )}
@@ -696,7 +752,7 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
             <div
                 className={`${
                     this.state.loading ? "animate-pulse" : ""
-                } flex flex-col bg-slate-800 py-4 px-6 border border-indigo-600 rounded-md grow overflow-y-auto`}
+                } flex flex-col  bg-indigo-300 dark:bg-slate-800 py-4 px-6 rounded-md grow overflow-y-auto`}
             >
                 <div className={`sticky flex flex-row items-center justify-between mb-6`}>
                     <div className={"flex flex-row gap-4"}>
@@ -714,8 +770,10 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                                 }}
                             >
                                 <h2
-                                    className={`capitalize justify-self-center text-lg lg:text-3xl font-bold tracking-tight ${
-                                        this.state.recordViewType === it ? "text-indigo-300" : "text-indigo-100"
+                                    className={`capitalize justify-self-center text-lg xl:text-3xl font-bold tracking-tight ${
+                                        this.state.recordViewType === it
+                                            ? `text-indigo-500 dark:text-indigo-300`
+                                            : `text-indigo-050 dark:text-indigo-100`
                                     }`}
                                 >
                                     {RecordViewTypeUtils.getTitle(it)}
@@ -723,7 +781,10 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                             </button>
                         ))}
                     </div>
-                    <PlusIcon className={"flex h-8 lg:h-10 text-indigo-200 hover:text-indigo-400 "} onClick={this.setCreateRecord} />
+                    <PlusIcon
+                        className={"flex h-8 xl:h-10 text-indigo-500 dark:text-indigo-200 hover:text-indigo-400 "}
+                        onClick={this.setCreateRecord}
+                    />
                 </div>
                 {this.state.recordViewType === RecordViewType.RECORDS && this.recordsListView}
                 {this.state.recordViewType === RecordViewType.AGENDA && this.calendarListView}
@@ -793,7 +854,7 @@ w-[15px] lg:h-[20px] lg:w-[20px] text-center text-xl font-bold ring-1 ring-slate
                     onUpdate={this.onUpdateLineRecord}
                     onDelete={this.onDeleteLineRecord}
                 />
-                <VetDialog ref={(ref) => (this.vetDialogRef = ref)} onDismiss={() => this.vetDialogRef?.hide()} />
+                <UserDialog ref={(ref) => (this.userDialogRef = ref)} onDismiss={() => this.userDialogRef?.hide()} />
                 <RecordDialog
                     ref={(ref) => (this.recordDialogRef = ref)}
                     onDismiss={() => this.recordDialogRef?.hide()}
diff --git a/ui/src/pages/pet/create.tsx b/ui/src/pages/pet/create.tsx
index 4ecd3ed..c806743 100644
--- a/ui/src/pages/pet/create.tsx
+++ b/ui/src/pages/pet/create.tsx
@@ -245,8 +245,8 @@ class Create extends BaseComponent<CreateProps, CreateState> {
     render() {
         const vm = this.state.vm
         return (
-            <ProtectedPage hideNav={true} init={this.initPage} className={"bg-[url('/register-bg-dark.jpg')] bg-contain bg-center"}>
-                <div className="container items-center mx-auto my-auto bg-white dark:bg-slate-800 max-w-sm lg:max-w-xl border rounded-md border-indigo-600">
+            <ProtectedPage hideNav={true} init={this.initPage} className={"bg-[url('/register-bg.jpg')] dark:bg-[url('/register-bg-dark.jpg')] bg-contain bg-center"}>
+                <div className="container items-center mx-auto my-auto bg-white/40 dark:bg-slate-800/30 max-w-sm lg:max-w-xl rounded-md backdrop-blur-sm shadow-lg">
                     <div className="shadow-sm px-4 py-4">
                         <h2 className=" pb-4 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-indigo-100">
                             Create a Pet profile
@@ -254,14 +254,14 @@ class Create extends BaseComponent<CreateProps, CreateState> {
                         <form className="space-y-1 mb-3" method="POST" onSubmit={this.onSubmit}>
                             <div className={"flex py-2"}>
                                 {this.state.vm.avatar && <ColorExtractor src={this.state.vm.avatar} getColors={this.getAvatarColors} />}
-                                <div className={"mx-auto"}>
+                                <div className={"mx-auto "}>
                                     <Avatar
                                         avatarTitle={"Add Image"}
                                         avatar={this.state.vm.avatar}
                                         onCLick={() => {
                                             this.imageInputRef?.click()
                                         }}
-                                        textStyle={"text-lg h-[90px] w-[90px]"}
+                                        textStyle={"text-lg h-[90px] w-[90px] hover:shadow-xl"}
                                     />
                                 </div>
 
@@ -326,6 +326,7 @@ class Create extends BaseComponent<CreateProps, CreateState> {
                                     className={`${styles.textInput} ${styles.textInputFull} ${
                                         vm.hasGenderError && styles.errorHighlight
                                     } rounded-md`}
+                                    required
                                 >
                                     <option value="">Choose a Gender</option>
                                     {PetGenderUtils.getAll().map((g) => {