diff --git a/client/src/pages/account/public/Login.tsx b/client/src/pages/account/public/Login.tsx
index a58dd9f2952..30b9ab0b7e8 100644
--- a/client/src/pages/account/public/Login.tsx
+++ b/client/src/pages/account/public/Login.tsx
@@ -90,7 +90,7 @@ const Login = () => {
         <PublicLayoutContainer>
             <Card className="mx-auto max-w-sm rounded-xl p-6 text-start shadow-none">
                 <CardHeader className="p-0 pb-10">
-                    <CardTitle className="self-center text-xl font-bold text-content-neutral-primary">
+                    <CardTitle className="self-center text-xl font-semibold text-content-neutral-primary">
                         Welcome back
                     </CardTitle>
                 </CardHeader>
@@ -141,7 +141,7 @@ const Login = () => {
                                             <FormControl>
                                                 <Input
                                                     autoComplete="email"
-                                                    className="py-5"
+                                                    className="py-5 hover:border-stroke-brand-primary"
                                                     id="email"
                                                     type="email"
                                                     {...field}
@@ -166,7 +166,7 @@ const Login = () => {
                                                 <div className="relative">
                                                     <Input
                                                         aria-label="Password"
-                                                        className="py-5"
+                                                        className="py-5 hover:border-stroke-brand-primary"
                                                         id="password"
                                                         type={showPassword ? 'text' : 'password'}
                                                         {...field}
diff --git a/client/src/pages/account/public/Register.tsx b/client/src/pages/account/public/Register.tsx
index afb2b9dc8cd..97610d76e70 100644
--- a/client/src/pages/account/public/Register.tsx
+++ b/client/src/pages/account/public/Register.tsx
@@ -9,7 +9,7 @@ import PublicLayoutContainer from '@/shared/layout/PublicLayoutContainer';
 import {useApplicationInfoStore} from '@/shared/stores/useApplicationInfoStore';
 import {useFeatureFlagsStore} from '@/shared/stores/useFeatureFlagsStore';
 import {zodResolver} from '@hookform/resolvers/zod';
-import {CheckIcon, Eye, EyeOff, XIcon} from 'lucide-react';
+import {CheckIcon, DotIcon, Eye, EyeOff, XIcon} from 'lucide-react';
 import {useCallback, useEffect, useState} from 'react';
 import {useForm} from 'react-hook-form';
 import {Link, useNavigate} from 'react-router-dom';
@@ -139,7 +139,7 @@ const Register = () => {
         <PublicLayoutContainer>
             <Card className="mx-auto max-w-sm rounded-xl p-6 text-start shadow-none">
                 <CardHeader className="p-0 pb-10">
-                    <CardTitle className="self-center text-xl font-bold text-content-neutral-primary">
+                    <CardTitle className="self-center text-xl font-semibold text-content-neutral-primary">
                         Create your account
                     </CardTitle>
 
@@ -189,7 +189,11 @@ const Register = () => {
                                         <FormLabel className="text-content-neutral-primary">Email</FormLabel>
 
                                         <FormControl>
-                                            <Input className="py-5" type="email" {...field} />
+                                            <Input
+                                                className="py-5 hover:border-stroke-brand-primary"
+                                                type="email"
+                                                {...field}
+                                            />
                                         </FormControl>
 
                                         <FormMessage />
@@ -210,7 +214,7 @@ const Register = () => {
                                                     <div className="relative">
                                                         <Input
                                                             aria-label="Password"
-                                                            className="py-5"
+                                                            className="py-5 hover:border-stroke-brand-primary"
                                                             type={showPassword ? 'text' : 'password'}
                                                             {...field}
                                                         />
@@ -267,19 +271,19 @@ const Register = () => {
                                                     {getValues('password') === '' && (
                                                         <>
                                                             <li className="flex items-center gap-1 text-sm text-content-neutral-secondary">
-                                                                <XIcon size={15} />
+                                                                <DotIcon size={15} />
 
                                                                 <p>{passwordLengthMessage}</p>
                                                             </li>
 
                                                             <li className="flex items-center gap-1 text-sm text-content-neutral-secondary">
-                                                                <XIcon size={15} />
+                                                                <DotIcon size={15} />
 
                                                                 <p>{passwordContainsNumberMessage}</p>
                                                             </li>
 
                                                             <li className="flex items-center gap-1 text-sm text-content-neutral-secondary">
-                                                                <XIcon size={15} />
+                                                                <DotIcon size={15} />
 
                                                                 <p>{passwordContainsUppercaseMessage}</p>
                                                             </li>
diff --git a/client/src/shared/layout/PublicLayoutContainer.tsx b/client/src/shared/layout/PublicLayoutContainer.tsx
index 19f7f545f9b..d9dcdb7b2a2 100644
--- a/client/src/shared/layout/PublicLayoutContainer.tsx
+++ b/client/src/shared/layout/PublicLayoutContainer.tsx
@@ -5,7 +5,7 @@ import {PropsWithChildren} from 'react';
 const PublicLayoutContainer = ({children}: PropsWithChildren) => {
     return (
         <>
-            <div className="grid size-full place-items-center">
+            <div className="grid size-full place-items-center bg-surface-neutral-secondary">
                 <div className="w-full">
                     <div className="mb-8 flex items-center justify-center space-x-2">
                         <img alt="ByteChef" className="h-8 w-auto" src={reactLogo} />