diff --git a/signup-ui/src/assets/png/info-38-2.png b/signup-ui/src/assets/png/info-38-2.png
new file mode 100644
index 00000000..0f42d938
Binary files /dev/null and b/signup-ui/src/assets/png/info-38-2.png differ
diff --git a/signup-ui/src/components/icon-label-popover.tsx b/signup-ui/src/components/icon-label-popover.tsx
new file mode 100644
index 00000000..d61cbb51
--- /dev/null
+++ b/signup-ui/src/components/icon-label-popover.tsx
@@ -0,0 +1,36 @@
+import {
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverTrigger,
+} from "./ui/popover";
+
+interface IconLabelPopoverProps {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const IconLabelPopover = ({ icon, children }: IconLabelPopoverProps) => {
+  return (
+    <>
+      <div className="flex items-center sm:hidden">
+        <Popover>
+          <PopoverTrigger>{icon}</PopoverTrigger>
+          <PopoverContent side="right" className="text-xs">
+            {children}
+            <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="hidden items-center sm:flex">
+        <Popover>
+          <PopoverTrigger>{icon}</PopoverTrigger>
+          <PopoverContent side="bottom" className="text-xs">
+            {children}
+            <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  );
+};
diff --git a/signup-ui/src/components/ui/icons.tsx b/signup-ui/src/components/ui/icons.tsx
index ac7672d8..16da8b61 100644
--- a/signup-ui/src/components/ui/icons.tsx
+++ b/signup-ui/src/components/ui/icons.tsx
@@ -1,12 +1,12 @@
 import * as React from "react";
 
+import InfoPng from "~assets/png/info-38-2.png";
 import { ReactComponent as ArrowLeft } from "~assets/svg/arrow-left.svg";
 import { ReactComponent as Check } from "~assets/svg/check.svg";
 import { ReactComponent as ChevronDown } from "~assets/svg/chevron-down.svg";
 import { ReactComponent as ChevronUp } from "~assets/svg/chevron-up.svg";
 import { ReactComponent as EyeOff } from "~assets/svg/eye-off.svg";
 import { ReactComponent as Eye } from "~assets/svg/eye.svg";
-import { ReactComponent as Info } from "~assets/svg/info.svg";
 import { ReactComponent as Loader } from "~assets/svg/loader.svg";
 import { ReactComponent as X } from "~assets/svg/x.svg";
 
@@ -18,7 +18,12 @@ export const Icons = {
   close: X,
   eye: Eye,
   eyeOff: EyeOff,
-  info: Info,
+  info: React.forwardRef<
+    HTMLImageElement,
+    React.ImgHTMLAttributes<HTMLImageElement>
+  >(({ alt, ...props }, ref) => (
+    <img ref={ref} src={InfoPng} alt={alt} {...props} />
+  )),
   loader: Loader,
   arrow: React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGSVGElement>>(
     (props, ref) => (
diff --git a/signup-ui/src/components/ui/popover.tsx b/signup-ui/src/components/ui/popover.tsx
index 78852ca3..9b4daa37 100644
--- a/signup-ui/src/components/ui/popover.tsx
+++ b/signup-ui/src/components/ui/popover.tsx
@@ -5,6 +5,8 @@ import { cn } from "~utils/cn";
 
 const Popover = PopoverPrimitive.Root;
 
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
@@ -17,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-[175px] rounded-md border bg-popover px-3 py-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 md:w-[220px] sm:w-[200px]",
         className
       )}
       {...props}
@@ -37,4 +39,4 @@ const PopoverArrow = React.forwardRef<
   />
 ));
 
-export { Popover, PopoverTrigger, PopoverArrow, PopoverContent };
+export { Popover, PopoverAnchor, PopoverTrigger, PopoverArrow, PopoverContent };
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx
index 81ece7ce..3abb1f60 100644
--- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx
@@ -3,6 +3,7 @@ import { useFormContext, UseFormReturn } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 
+import { IconLabelPopover } from "~components/icon-label-popover";
 import { ActionMessage } from "~components/ui/action-message";
 import { Button } from "~components/ui/button";
 import {
@@ -14,12 +15,6 @@ import {
 } from "~components/ui/form";
 import { Icons } from "~components/ui/icons";
 import { Input } from "~components/ui/input";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-} from "~components/ui/popover";
 import {
   Step,
   StepAlert,
@@ -172,21 +167,22 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => {
                     <div className="space-y-2">
                       <div className="flex items-center gap-1">
                         <FormLabel>{t("new_password")}</FormLabel>
-                        <Popover>
-                          <PopoverTrigger asChild>
-                            <Icons.info className="h-4 w-4 cursor-pointer" />
-                          </PopoverTrigger>
-                          <PopoverContent side="right" className="w-full">
-                            <Trans
-                              i18nKey="password_rules"
-                              components={{
-                                ul: <ul className="list-inside list-disc" />,
-                                li: <li />,
-                              }}
+                        <IconLabelPopover
+                          icon={
+                            <Icons.info
+                              className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                              alt="info icon"
                             />
-                            <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
-                          </PopoverContent>
-                        </Popover>
+                          }
+                        >
+                          <Trans
+                            i18nKey="password_rules"
+                            components={{
+                              ul: <ul className="list-inside list-disc" />,
+                              li: <li />,
+                            }}
+                          />
+                        </IconLabelPopover>
                       </div>
                       <FormControl>
                         <Input
diff --git a/signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx b/signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx
index 505ec895..649b66b3 100644
--- a/signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx
+++ b/signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx
@@ -23,12 +23,6 @@ import {
 } from "~components/ui/form";
 import { Icons } from "~components/ui/icons";
 import { Input } from "~components/ui/input";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-} from "~components/ui/popover";
 import {
   Step,
   StepAlert,
diff --git a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx
index fa880f68..a2421ec5 100644
--- a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx
+++ b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx
@@ -1,8 +1,8 @@
 import { KeyboardEvent, useCallback, useMemo, useState } from "react";
-import { PopoverTrigger } from "@radix-ui/react-popover";
 import { UseFormReturn } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 
+import { IconLabelPopover } from "~components/icon-label-popover";
 import { Button } from "~components/ui/button";
 import { Checkbox } from "~components/ui/checkbox";
 import {
@@ -14,7 +14,6 @@ import {
 } from "~components/ui/form";
 import { Icons } from "~components/ui/icons";
 import { Input } from "~components/ui/input";
-import { Popover, PopoverArrow, PopoverContent } from "~components/ui/popover";
 import {
   Step,
   StepContent,
@@ -189,15 +188,16 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
                   <div className="space-y-2">
                     <div className="flex items-center gap-1">
                       <FormLabel>{t("full_name")}</FormLabel>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Icons.info className="h-4 w-4 cursor-pointer" />
-                        </PopoverTrigger>
-                        <PopoverContent side="right">
-                          {t("full_name_tooltip")}
-                          <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
-                        </PopoverContent>
-                      </Popover>
+                      <IconLabelPopover
+                        icon={
+                          <Icons.info
+                            className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                            alt="info icon"
+                          />
+                        }
+                      >
+                        <span>{t("full_name_tooltip")}</span>
+                      </IconLabelPopover>
                     </div>
                     <FormControl>
                       <Input
@@ -229,21 +229,22 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
                   <div className="space-y-2">
                     <div className="flex items-center gap-1">
                       <FormLabel>{t("password")}</FormLabel>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Icons.info className="h-4 w-4 cursor-pointer" />
-                        </PopoverTrigger>
-                        <PopoverContent side="right">
-                          <Trans
-                            i18nKey="password_rules"
-                            components={{
-                              ul: <ul className="list-inside list-disc" />,
-                              li: <li />,
-                            }}
+                      <IconLabelPopover
+                        icon={
+                          <Icons.info
+                            className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                            alt="info icon"
                           />
-                          <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
-                        </PopoverContent>
-                      </Popover>
+                        }
+                      >
+                        <Trans
+                          i18nKey="password_rules"
+                          components={{
+                            ul: <ul className="list-inside list-disc" />,
+                            li: <li />,
+                          }}
+                        />
+                      </IconLabelPopover>
                     </div>
                     <FormControl>
                       <Input
diff --git a/signup-ui/src/pages/shared/validation.ts b/signup-ui/src/pages/shared/validation.ts
index 6b85f5e0..1eaec8e6 100644
--- a/signup-ui/src/pages/shared/validation.ts
+++ b/signup-ui/src/pages/shared/validation.ts
@@ -58,4 +58,4 @@ export const validateConfirmPassword = (
       message: t("password_validation"),
       excludeEmptyString: true,
     })
-    .oneOf([yup.ref(passwordRef), ""], isRegister ? t("password_validation_must_match") : t("password_validation_must_match"));
+    .oneOf([yup.ref(passwordRef), ""], isRegister ? t("register_password_validation_must_match") : t("password_validation_must_match"));