diff --git a/components/auth/auth-form.tsx b/components/auth/auth-form.tsx
index 1a9dbd9777..728afb930a 100644
--- a/components/auth/auth-form.tsx
+++ b/components/auth/auth-form.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Icon } from "@iconify/react";
-import { Button, Checkbox, Divider, Link } from "@nextui-org/react";
+import { Button, Checkbox, Divider, Link, User } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useFormState } from "react-dom";
@@ -26,6 +26,7 @@ import { useToast } from "../ui/toast";
 export const AuthForm = ({ type }: { type: string }) => {
   const formSchema = authFormSchema(type);
   const router = useRouter();
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -104,196 +105,198 @@ export const AuthForm = ({ type }: { type: string }) => {
   };
 
   return (
-    <div
-      className="flex h-screen w-screen items-center justify-start overflow-hidden rounded-small bg-content1 p-2 sm:p-4 lg:p-8"
-      style={{
-        backgroundImage:
-          "url(https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/black-background-texture-2.jpg)",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
-    >
-      {/* Brand Logo and ThemeSwitch */}
-      <div className="absolute right-10 top-10">
-        <div className="flex items-center gap-4 self-center">
-          <ThemeSwitch aria-label="Toggle theme" />
-          <ProwlerExtended />
+    <div className="relative flex h-screen w-screen">
+      {/* Auth Form */}
+      <div className="relative flex w-full items-center justify-center bg-background lg:w-1/2">
+        {/* Prowler Logo */}
+        <div className="absolute top-1/2 z-10 flex w-full flex-col items-center">
+          <ProwlerExtended className="w-[500px]" />
+        </div>
+
+        <div className="flex w-full max-w-sm flex-col gap-4 rounded-large bg-content1 px-8 pb-10 pt-6 shadow-small">
+          <div className="flex items-center justify-between">
+            <p className="pb-2 text-xl font-medium">
+              {type === "sign-in" ? "Sign In" : "Sign Up"}
+            </p>
+            <ThemeSwitch aria-label="Toggle theme" />
+          </div>
+
+          <Form {...form}>
+            <form
+              className="flex flex-col gap-3"
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
+              {type === "sign-up" && (
+                <>
+                  <CustomInput
+                    control={form.control}
+                    name="name"
+                    type="text"
+                    label="Name"
+                    placeholder="Enter your name"
+                    isInvalid={!!form.formState.errors.name}
+                  />
+                  <CustomInput
+                    control={form.control}
+                    name="company"
+                    type="text"
+                    label="Company Name"
+                    placeholder="Enter your company name"
+                    isRequired={false}
+                    isInvalid={!!form.formState.errors.company}
+                  />
+                </>
+              )}
+              <CustomInput
+                control={form.control}
+                name="email"
+                type="email"
+                label="Email"
+                placeholder="Enter your email"
+                isInvalid={!!form.formState.errors.email}
+              />
+
+              <CustomInput
+                control={form.control}
+                name="password"
+                password
+                isInvalid={!!form.formState.errors.password}
+              />
+
+              {type === "sign-in" && (
+                <div className="flex items-center justify-between px-1 py-2">
+                  <Checkbox name="remember" size="sm">
+                    Remember me
+                  </Checkbox>
+                  <Link className="text-default-500" href="#">
+                    Forgot password?
+                  </Link>
+                </div>
+              )}
+              {type === "sign-up" && (
+                <>
+                  <CustomInput
+                    control={form.control}
+                    name="confirmPassword"
+                    confirmPassword
+                  />
+                  <FormField
+                    control={form.control}
+                    name="termsAndConditions"
+                    render={({ field }) => (
+                      <>
+                        <FormControl>
+                          <Checkbox
+                            isRequired
+                            className="py-4"
+                            size="sm"
+                            checked={field.value}
+                            onChange={(e) => field.onChange(e.target.checked)}
+                          >
+                            I agree with the&nbsp;
+                            <Link href="#" size="sm">
+                              Terms
+                            </Link>
+                            &nbsp; and&nbsp;
+                            <Link href="#" size="sm">
+                              Privacy Policy
+                            </Link>
+                          </Checkbox>
+                        </FormControl>
+                        <FormMessage className="text-system-error dark:text-system-error" />
+                      </>
+                    )}
+                  />
+                </>
+              )}
+
+              {state?.message === "Credentials error" && (
+                <div className="flex flex-row items-center gap-2 text-system-error">
+                  <NotificationIcon size={16} />
+                  <p className="text-s">No user found</p>
+                </div>
+              )}
+
+              <CustomButton
+                type="submit"
+                ariaLabel={type === "sign-in" ? "Log In" : "Sign Up"}
+                ariaDisabled={isLoading}
+                className="w-full"
+                variant="solid"
+                color="action"
+                size="md"
+                radius="md"
+                isLoading={isLoading}
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <span>Loading</span>
+                ) : (
+                  <span>{type === "sign-in" ? "Log In" : "Sign Up"}</span>
+                )}
+              </CustomButton>
+            </form>
+          </Form>
+
+          {type === "sign-in" && (
+            <>
+              <div className="flex items-center gap-4 py-2">
+                <Divider className="flex-1" />
+                <p className="shrink-0 text-tiny text-default-500">OR</p>
+                <Divider className="flex-1" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Button
+                  startContent={
+                    <Icon icon="flat-color-icons:google" width={24} />
+                  }
+                  variant="bordered"
+                >
+                  Continue with Google
+                </Button>
+                <Button
+                  startContent={
+                    <Icon
+                      className="text-default-500"
+                      icon="fe:github"
+                      width={24}
+                    />
+                  }
+                  variant="bordered"
+                >
+                  Continue with Github
+                </Button>
+              </div>
+            </>
+          )}
+          {type === "sign-in" ? (
+            <p className="text-center text-small">
+              Need to create an account?&nbsp;
+              <Link href="/sign-up">Sign Up</Link>
+            </p>
+          ) : (
+            <p className="text-center text-small">
+              Already have an account?&nbsp;
+              <Link href="/sign-in">Log In</Link>
+            </p>
+          )}
         </div>
       </div>
 
-      {/* Testimonial */}
-      <div className="absolute bottom-10 right-10 hidden md:block">
-        <p className="text-md max-w-xl text-right text-white/60">
-          <span className="font-medium">“</span>
-          Open Cloud Security
-          <span className="font-medium">”</span>
-        </p>
-      </div>
-
-      <div className="flex w-full max-w-sm flex-col gap-4 rounded-large bg-content1 px-8 pb-10 pt-6 shadow-small">
-        <p className="pb-2 text-xl font-medium">
-          {type === "sign-in" ? "Sign In" : "Sign Up"}
-        </p>
-
-        <Form {...form}>
-          <form
-            className="flex flex-col gap-3"
-            onSubmit={form.handleSubmit(onSubmit)}
-          >
-            {type === "sign-up" && (
-              <>
-                <CustomInput
-                  control={form.control}
-                  name="name"
-                  type="text"
-                  label="Name"
-                  placeholder="Enter your name"
-                  isInvalid={!!form.formState.errors.name}
-                />
-                <CustomInput
-                  control={form.control}
-                  name="company"
-                  type="text"
-                  label="Company Name"
-                  placeholder="Enter your company name"
-                  isRequired={false}
-                  isInvalid={!!form.formState.errors.company}
-                />
-              </>
-            )}
-            <CustomInput
-              control={form.control}
-              name="email"
-              type="email"
-              label="Email"
-              placeholder="Enter your email"
-              isInvalid={!!form.formState.errors.email}
-            />
-
-            <CustomInput
-              control={form.control}
-              name="password"
-              password
-              isInvalid={!!form.formState.errors.password}
-            />
-
-            {type === "sign-in" && (
-              <div className="flex items-center justify-between px-1 py-2">
-                <Checkbox name="remember" size="sm">
-                  Remember me
-                </Checkbox>
-                <Link className="text-default-500" href="#">
-                  Forgot password?
-                </Link>
-              </div>
-            )}
-            {type === "sign-up" && (
-              <>
-                <CustomInput
-                  control={form.control}
-                  name="confirmPassword"
-                  confirmPassword
-                />
-                <FormField
-                  control={form.control}
-                  name="termsAndConditions"
-                  render={({ field }) => (
-                    <>
-                      <FormControl>
-                        <Checkbox
-                          isRequired
-                          className="py-4"
-                          size="sm"
-                          checked={field.value}
-                          onChange={(e) => field.onChange(e.target.checked)}
-                        >
-                          I agree with the&nbsp;
-                          <Link href="#" size="sm">
-                            Terms
-                          </Link>
-                          &nbsp; and&nbsp;
-                          <Link href="#" size="sm">
-                            Privacy Policy
-                          </Link>
-                        </Checkbox>
-                      </FormControl>
-                      <FormMessage className="text-system-error dark:text-system-error" />
-                    </>
-                  )}
-                />
-              </>
-            )}
-
-            {state?.message === "Credentials error" && (
-              <div className="flex flex-row items-center gap-2 text-system-error">
-                <NotificationIcon size={16} />
-                <p className="text-s">No user found</p>
-              </div>
-            )}
-
-            <CustomButton
-              type="submit"
-              ariaLabel={type === "sign-in" ? "Log In" : "Sign Up"}
-              ariaDisabled={isLoading}
-              className="w-full"
-              variant="solid"
-              color="action"
-              size="md"
-              radius="md"
-              isLoading={isLoading}
-              disabled={isLoading}
-            >
-              {isLoading ? (
-                <span>Loading</span>
-              ) : (
-                <span>{type === "sign-in" ? "Log In" : "Sign Up"}</span>
-              )}
-            </CustomButton>
-          </form>
-        </Form>
-
-        {type === "sign-in" && (
-          <>
-            <div className="flex items-center gap-4 py-2">
-              <Divider className="flex-1" />
-              <p className="shrink-0 text-tiny text-default-500">OR</p>
-              <Divider className="flex-1" />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Button
-                startContent={
-                  <Icon icon="flat-color-icons:google" width={24} />
-                }
-                variant="bordered"
-              >
-                Continue with Google
-              </Button>
-              <Button
-                startContent={
-                  <Icon
-                    className="text-default-500"
-                    icon="fe:github"
-                    width={24}
-                  />
-                }
-                variant="bordered"
-              >
-                Continue with Github
-              </Button>
-            </div>
-          </>
-        )}
-        {type === "sign-in" ? (
-          <p className="text-center text-small">
-            Need to create an account?&nbsp;
-            <Link href="/sign-up">Sign Up</Link>
+      <div
+        className="relative hidden w-1/2 flex-col-reverse rounded-medium p-10 shadow-small lg:flex"
+        style={{
+          backgroundImage:
+            "url(https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/white-building.jpg)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      >
+        <div className="flex flex-col items-end gap-4">
+          <p className="w-full text-right text-2xl text-black/60">
+            <span className="font-normal">Open Source Security Platform</span>
           </p>
-        ) : (
-          <p className="text-center text-small">
-            Already have an account?&nbsp;
-            <Link href="/sign-in">Log In</Link>
-          </p>
-        )}
+        </div>
       </div>
     </div>
   );