diff --git a/src/components/RegisterUserForm.tsx b/src/components/RegisterUserForm.tsx
index b126d45..835f677 100644
--- a/src/components/RegisterUserForm.tsx
+++ b/src/components/RegisterUserForm.tsx
@@ -44,13 +44,9 @@ const RegisterUserForm: FC = () => {
     }
   };
   return (
-    <form
-      className="form-control w-full space-y-5"
-      noValidate
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <div>
-        <div className="flex flex-col lg:flex-row lg:space-x-3">
+    <form className="form-control w-full" noValidate onSubmit={handleSubmit(onSubmit)}>
+      <div className="space-y-5">
+        <div className="flex flex-col lg:flex-row lg:space-x-5">
           <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="firstName">First name</FormLabel>
@@ -63,7 +59,7 @@ const RegisterUserForm: FC = () => {
                 type="text"
                 formValidationSchema={register('firstName')}
                 error={!!errors.firstName}
-                placeholder="first name"
+                placeholder="John"
               />
             </FormSegment>
           </div>
@@ -80,13 +76,13 @@ const RegisterUserForm: FC = () => {
                 type="text"
                 formValidationSchema={register('lastName')}
                 error={!!errors.lastName}
-                placeholder="last name"
+                placeholder="Doe"
               />
             </FormSegment>
           </div>
         </div>
 
-        <div className="flex flex-col lg:flex-row lg:space-x-3">
+        <div className="flex flex-col lg:flex-row lg:space-x-5">
           <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="email">email</FormLabel>
@@ -99,7 +95,7 @@ const RegisterUserForm: FC = () => {
                 type="email"
                 formValidationSchema={register('email')}
                 error={!!errors.email}
-                placeholder="email"
+                placeholder="john.doe@example.com"
               />
             </FormSegment>
           </div>
@@ -115,13 +111,13 @@ const RegisterUserForm: FC = () => {
                 type="text"
                 formValidationSchema={register('username')}
                 error={!!errors.username}
-                placeholder="username"
+                placeholder="johndoe"
               />
             </FormSegment>
           </div>
         </div>
 
-        <div className="flex flex-col lg:flex-row lg:space-x-3">
+        <div className="flex flex-col lg:flex-row lg:space-x-5">
           <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="password">password</FormLabel>
@@ -155,26 +151,28 @@ const RegisterUserForm: FC = () => {
             </FormSegment>
           </div>
         </div>
-        <FormInfo>
-          <FormLabel htmlFor="dateOfBirth">Date of birth</FormLabel>
-          <FormError>{errors.dateOfBirth?.message}</FormError>
-        </FormInfo>
-        <FormSegment>
-          <FormTextInput
-            id="dateOfBirth"
-            disabled={formState.isSubmitting}
-            type="date"
-            formValidationSchema={register('dateOfBirth')}
-            error={!!errors.dateOfBirth}
-            placeholder="date of birth"
-          />
-        </FormSegment>
-        <div className="mt-6 w-full">
-          <Button type="submit" isSubmitting={formState.isSubmitting}>
-            Register User
-          </Button>
+        <div>
+          <FormInfo>
+            <FormLabel htmlFor="dateOfBirth">Date of birth</FormLabel>
+            <FormError>{errors.dateOfBirth?.message}</FormError>
+          </FormInfo>
+          <FormSegment>
+            <FormTextInput
+              id="dateOfBirth"
+              disabled={formState.isSubmitting}
+              type="date"
+              formValidationSchema={register('dateOfBirth')}
+              error={!!errors.dateOfBirth}
+              placeholder="date of birth"
+            />
+          </FormSegment>
         </div>
       </div>
+      <div className="mt-10">
+        <Button type="submit" isSubmitting={formState.isSubmitting}>
+          Register User
+        </Button>
+      </div>
     </form>
   );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index efee99a..cb58ba6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -49,8 +49,8 @@ const Home: NextPage = () => {
           className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
         />
         <div className="relative flex w-9/12 flex-col space-y-3 text-base-content">
-          <h1 className="text-8xl font-extrabold">The Biergarten App</h1>
-          <p className="text-3xl font-bold">{description}</p>
+          <h1 className="text-5xl font-extrabold lg:text-8xl">The Biergarten App</h1>
+          <p className="font-bold lg:text-3xl">{description}</p>
         </div>
       </div>
     </>
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 2d38184..f254883 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -28,7 +28,7 @@ const LoginPage: NextPage = () => {
         />
 
         <div className="relative flex w-9/12 flex-col items-center text-center text-base-content lg:w-6/12">
-          <div className="flex w-full flex-col items-center space-y-2 text-center">
+          <div className="mb-8 flex w-full flex-col items-center space-y-2 text-center">
             <FaUserCircle className="text-6xl text-primary-content" />
             <h1 className="text-6xl font-extrabold">Login</h1>
           </div>
diff --git a/src/pages/register/index.tsx b/src/pages/register/index.tsx
index d67e25b..4fcde09 100644
--- a/src/pages/register/index.tsx
+++ b/src/pages/register/index.tsx
@@ -1,10 +1,11 @@
 import RegisterUserForm from '@/components/RegisterUserForm';
-import FormPageLayout from '@/components/ui/forms/FormPageLayout';
 
 import useRedirectWhenLoggedIn from '@/hooks/auth/useRedirectIfLoggedIn';
 import { NextPage } from 'next';
+import { CldImage } from 'next-cloudinary';
 import Head from 'next/head';
-import { BiUser } from 'react-icons/bi';
+
+import { FaUserCircle } from 'react-icons/fa';
 
 const RegisterUserPage: NextPage = () => {
   useRedirectWhenLoggedIn();
@@ -15,14 +16,26 @@ const RegisterUserPage: NextPage = () => {
         <title>Register User</title>
         <meta name="description" content="Register a new user" />
       </Head>
-      <FormPageLayout
-        headingText="Register User"
-        headingIcon={BiUser}
-        backLink="/"
-        backLinkText="Back to home"
-      >
-        <RegisterUserForm />
-      </FormPageLayout>
+
+      <div className="relative flex min-h-dvh w-full flex-col items-center justify-center bg-base-300">
+        <CldImage
+          src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
+          alt="Login Image"
+          width={5000}
+          height={5000}
+          className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
+        />
+
+        <div className="relative flex w-10/12 flex-col items-center pb-20 text-center text-base-content lg:w-6/12">
+          <div className="mb-8 mt-20 flex w-full flex-col items-center space-y-2 text-center">
+            <FaUserCircle className="text-6xl text-primary-content" />
+            <h1 className="text-6xl font-extrabold">Register</h1>
+          </div>
+          <div className="w-full">
+            <RegisterUserForm />
+          </div>
+        </div>
+      </div>
     </>
   );
 };