diff --git a/src/entities/projects/ui/project-insert/ProjectExpectedPeriodCard.tsx b/src/entities/projects/ui/project-insert/ProjectExpectedPeriodCard.tsx
index 85b2957..8633851 100644
--- a/src/entities/projects/ui/project-insert/ProjectExpectedPeriodCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectExpectedPeriodCard.tsx
@@ -35,9 +35,11 @@ export default function ProjectScheduleCard({
           size={large ? "medium" : "small"}
           displayEmpty
           sx={{
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: {
+              xs: large ? "14px" : "14px",
+              sm: large ? "15px" : "15px",
+              md: large ? "16px" : "16px",
+            },
             fontFamily: theme.typography.fontFamily,
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
             height: 40,
diff --git a/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx b/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
index a98210f..9829ca5 100644
--- a/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
@@ -58,6 +58,14 @@ const ProjectOneLineCard = ({
           },
           "& .MuiOutlinedInput-input": {
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+            "&::placeholder": {
+              fontSize: {
+                xs: "14px",
+                sm: "15px",
+                md: "16px",
+              },
+              color: "#999",
+            },
           },
         }}
         required
diff --git a/src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx b/src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx
index 7ac20ce..747765c 100644
--- a/src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx
@@ -43,7 +43,7 @@ const ProjectPreferentialCard = ({
     <SimpleFormCard
       title="우대사항"
       description="있으면 좋은 기술이나 경험이 있나요?"
-      helpText="우대사항은 선택사항입니다. 있으면 더 좋은 조건들을 적어주세요"
+      helpText="있으면 더 좋은 조건들을 적어주세요 (최소 1개 이상)"
       large={large}
       style={style}
     >
diff --git a/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx b/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx
index 61d2f02..f4fe40d 100644
--- a/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx
@@ -1,4 +1,4 @@
-import { TextField } from "@mui/material";
+import { TextField, useTheme } from "@mui/material";
 import type { ChangeEvent, CSSProperties, JSX } from "react";
 
 import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
@@ -16,6 +16,8 @@ const ProjectSimpleDescCard = ({
   large,
   style,
 }: ProjectSimpleDescCardProps): JSX.Element => {
+  const theme = useTheme();
+
   return (
     <SimpleFormCard
       title="프로젝트 간단 소개"
@@ -34,23 +36,21 @@ const ProjectSimpleDescCard = ({
         fullWidth
         variant="outlined"
         size="small"
-        InputProps={{
-          sx: {
+        sx={{
+          "& .MuiOutlinedInput-root": {
             fontSize: 16,
             fontFamily: "inherit",
             background: "none",
-            border: "none",
+
             "&:hover .MuiOutlinedInput-notchedOutline": {
-              borderColor: "#222",
+              borderColor: theme.palette.text.primary,
             },
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: "#1976d2",
+              borderColor: theme.palette.primary.main,
               borderWidth: "2px",
             },
           },
-        }}
-        inputProps={{
-          style: {
+          "& .MuiOutlinedInput-input": {
             padding: large ? 5 : 5,
             fontSize: 16,
             color: "#222",
diff --git a/src/entities/projects/ui/project-insert/ProjectTeamSizeCard.tsx b/src/entities/projects/ui/project-insert/ProjectTeamSizeCard.tsx
index d7ac141..5d71a32 100644
--- a/src/entities/projects/ui/project-insert/ProjectTeamSizeCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectTeamSizeCard.tsx
@@ -34,9 +34,11 @@ const ProjectTeamSizeCard = ({
           size={large ? "medium" : "small"}
           displayEmpty
           sx={{
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: {
+              xs: large ? "14px" : "14px",
+              sm: large ? "15px" : "15px",
+              md: large ? "16px" : "16px",
+            },
             fontFamily: theme.typography.fontFamily,
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
 
diff --git a/src/entities/projects/ui/project-insert/ProjectTechStackCard.tsx b/src/entities/projects/ui/project-insert/ProjectTechStackCard.tsx
index f6eb411..43666b7 100644
--- a/src/entities/projects/ui/project-insert/ProjectTechStackCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectTechStackCard.tsx
@@ -1,14 +1,7 @@
 import AddIcon from "@mui/icons-material/Add";
 import { Box, Button } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import type {
-  ChangeEvent,
-  CSSProperties,
-  JSX,
-  KeyboardEvent,
-  FocusEvent,
-  MouseEvent,
-} from "react";
+import type { ChangeEvent, CSSProperties, JSX, KeyboardEvent } from "react";
 import { useState } from "react";
 
 import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
@@ -57,7 +50,8 @@ const ProjectTechStackCard = ({
     >
       {/* 입력 + 추가 버튼 */}
       <Box display="flex" gap={1} mb={2}>
-        <input
+        <Box
+          component="input"
           type="text"
           value={newTech}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -65,39 +59,40 @@ const ProjectTechStackCard = ({
           }
           onKeyUp={handleKeyPress}
           placeholder="React, Python, Figma... 뭐든 좋아요!"
-          style={{
+          sx={{
             flex: 1,
             height: 40,
-            borderRadius: theme.shape.borderRadius,
+            borderRadius: "8px",
             border: `1px solid ${theme.palette.divider}`,
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: {
+              xs: "14px",
+              sm: "15px",
+              md: "16px",
+            },
             fontFamily: theme.typography.fontFamily,
             background: theme.palette.background.paper,
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
             boxSizing: "border-box",
             outline: "none",
             transition: "border-color 0.2s ease-in-out",
-          }}
-          onFocus={(e) => {
-            // 포커스 시: 파란색 테두리 + 두껍게
-            e.target.style.borderColor = theme.palette.primary.main;
-            e.target.style.borderWidth = "2px";
-          }}
-          onBlur={(e: FocusEvent<HTMLInputElement>) => {
-            e.currentTarget.style.borderColor = theme.palette.divider;
-            e.currentTarget.style.borderWidth = "1px";
-          }}
-          onMouseEnter={(e: MouseEvent<HTMLInputElement>) => {
-            if (e.currentTarget !== document.activeElement) {
-              e.currentTarget.style.borderColor = "#000000";
-            }
-          }}
-          onMouseLeave={(e: MouseEvent<HTMLInputElement>) => {
-            if (e.currentTarget !== document.activeElement) {
-              e.currentTarget.style.borderColor = theme.palette.divider;
-            }
+
+            "&::placeholder": {
+              fontSize: {
+                xs: "14px", // 모바일
+                sm: "15px", // 태블릿
+                md: "16px", // 데스크톱
+              },
+              color: "#999",
+            },
+
+            "&:focus": {
+              borderColor: theme.palette.primary.main,
+              borderWidth: "2px",
+            },
+
+            "&:hover:not(:focus)": {
+              borderColor: "#000000",
+            },
           }}
         />
         <Button
@@ -129,7 +124,11 @@ const ProjectTechStackCard = ({
                 py: 1,
                 backgroundColor: theme.palette.grey[100],
                 borderRadius: 2,
-                fontSize: "1.5rem",
+                fontSize: {
+                  xs: "14px",
+                  sm: "15px",
+                  md: "16px",
+                },
                 color: theme.palette.text.primary,
               }}
             >
@@ -145,7 +144,11 @@ const ProjectTechStackCard = ({
                   color: theme.palette.text.primary,
                   backgroundColor: "transparent",
                   cursor: "pointer",
-                  fontSize: "18px",
+                  fontSize: {
+                    xs: "16px",
+                    sm: "17px",
+                    md: "18px",
+                  },
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
diff --git a/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx b/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx
index f20edf6..f597a70 100644
--- a/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx
@@ -45,7 +45,6 @@ const ProjectTitleCard = ({
             fontFamily: theme.typography.fontFamily,
             background: "none",
             border: "none",
-
             // 호버 시 테두리 검정색
             "&:hover .MuiOutlinedInput-notchedOutline": {
               borderColor: theme.palette.text.primary,
@@ -58,6 +57,14 @@ const ProjectTitleCard = ({
           },
           "& .MuiOutlinedInput-input": {
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+            "&::placeholder": {
+              fontSize: {
+                xs: "14px",
+                sm: "15px",
+                md: "16px",
+              },
+              color: "#999",
+            },
           },
         }}
         required
diff --git a/src/features/projects/hooks/useInsertStep1.ts b/src/features/projects/hooks/useInsertStep1.ts
index cc71e31..2435d67 100644
--- a/src/features/projects/hooks/useInsertStep1.ts
+++ b/src/features/projects/hooks/useInsertStep1.ts
@@ -25,6 +25,7 @@ const useInsertStep1 = ({ state }: { state?: Step1Type }): ApplyFormResult => {
   const isModify = !!state; // 추후에 수정을 위해서
 
   const [form1, setForm1] = useState(isModify ? state : initForm1);
+  const [hasUserSelected, setHasUserSelected] = useState(false);
 
   const updateTitle = (e: ChangeEvent<HTMLInputElement>): void => {
     setForm1((prev) => ({
@@ -50,6 +51,7 @@ const useInsertStep1 = ({ state }: { state?: Step1Type }): ApplyFormResult => {
   };
 
   const updateCategory = (event: SelectChangeEvent): void => {
+    setHasUserSelected(true);
     setForm1((prev) => ({
       ...prev,
       category: event.target.value as ProjectCategory,
@@ -57,6 +59,15 @@ const useInsertStep1 = ({ state }: { state?: Step1Type }): ApplyFormResult => {
   };
 
   const updateClosedDate = (e: ChangeEvent<HTMLInputElement>): void => {
+    if (!e.target.value) {
+      // 빈 값일 때 상태를 null로 설정 (날짜 삭제)
+      setForm1((prev) => ({
+        ...prev,
+        closedDate: null as any,
+      }));
+      return;
+    }
+
     const formateTimeStamp = Timestamp.fromDate(new Date(e.target.value));
     setForm1((prev) => ({
       ...prev,
@@ -65,10 +76,24 @@ const useInsertStep1 = ({ state }: { state?: Step1Type }): ApplyFormResult => {
   };
 
   const validateForm = (): boolean => {
-    //여기에 검사식을 넣어주세요.
-    // 아래는 예시 입니다.
     if (!form1.title.trim()) {
-      alert("프로젝트 이름을 적어주세욧요.");
+      alert("프로젝트 이름을 입력해주세요");
+      return false;
+    }
+    if (!form1.oneLineInfo.trim()) {
+      alert("한 줄 소개를 입력해주세요.");
+      return false;
+    }
+    if (!form1.simpleInfo.trim()) {
+      alert("프로젝트 간단 설명을 입력해주세요.");
+      return false;
+    }
+    if (!hasUserSelected) {
+      alert("프로젝트 분야를 선택해주세요.");
+      return false;
+    }
+    if (!form1.closedDate) {
+      alert("모집 마감일을 선택해주세요.");
       return false;
     }
     return true;
diff --git a/src/features/projects/hooks/useInsertStep2.ts b/src/features/projects/hooks/useInsertStep2.ts
index 5e1e8b9..2eaeb37 100644
--- a/src/features/projects/hooks/useInsertStep2.ts
+++ b/src/features/projects/hooks/useInsertStep2.ts
@@ -20,12 +20,41 @@ const useInsertStep2 = ({ state }: { state?: Step2Type }): ApplyFormResult => {
   };
 
   const validateForm = (): boolean => {
-    //여기에 검사식을 넣어주세요.
-    // 아래는 예시 입니다.
+    if (formStep2.teamSize === 0) {
+      alert("팀 규모를 선택해주세요.");
+      return false;
+    }
+    if (!formStep2.expectedPeriod) {
+      alert("예상 일정을 선택해주세요.");
+      return false;
+    }
+
     if (formStep2.techStack.length === 0) {
-      alert("기술 스택을 적어주세욧요.");
+      alert("기술 스택을 추가해주세요");
       return false;
     }
+    if (formStep2.positions.length === 0) {
+      alert("최소 1개 이상의 모집 포지션을 추가해주세요.");
+      return false;
+    }
+    for (let i = 0; i < formStep2.positions.length; i++) {
+      const position = formStep2.positions[i];
+
+      if (!position.position) {
+        alert(`${i + 1}번째 포지션을 선택해주세요.`);
+        return false;
+      }
+
+      if (!position.count || position.count === 0) {
+        alert(`${i + 1}번째 포지션의 모집 인원을 선택해주세요.`);
+        return false;
+      }
+
+      if (!position.experience) {
+        alert(`${i + 1}번째 포지션의 경력 요구사항을 선택해주세요.`);
+        return false;
+      }
+    }
     return true;
   };
 
diff --git a/src/features/projects/hooks/useInsertStep3.ts b/src/features/projects/hooks/useInsertStep3.ts
index c2873a2..e8d01b3 100644
--- a/src/features/projects/hooks/useInsertStep3.ts
+++ b/src/features/projects/hooks/useInsertStep3.ts
@@ -34,12 +34,34 @@ const useInsertStep3 = ({ state }: { state?: Step3Type }): ApplyFormResult => {
   };
 
   const validateForm = (): boolean => {
-    //여기에 검사식을 넣어주세요.
-    // 아래는 예시 입니다.
     if (!formStep3.description.trim()) {
-      alert("프로젝트 상세 설명을 적어주세욧요.");
+      alert("프로젝트 상세 설명을 작성해주세요");
       return false;
     }
+    if (formStep3.schedules.length === 0) {
+      alert("최소 1개 이상의 프로젝트 일정을 추가해주세요.");
+      return false;
+    }
+
+    for (let i = 0; i < formStep3.schedules.length; i++) {
+      const schedule = formStep3.schedules[i];
+      const scheduleNum = i + 1;
+
+      if (!schedule.stageName.trim()) {
+        alert(`${scheduleNum}번째 일정의 단계명을 입력해주세요.`);
+        return false;
+      }
+
+      if (!schedule.description.trim()) {
+        alert(`${scheduleNum}번째 일정의 설명을 입력해주세요.`);
+        return false;
+      }
+
+      if (!schedule.period) {
+        alert(`${scheduleNum}번째 일정의 예상 기간을 선택해주세요.`);
+        return false;
+      }
+    }
     return true;
   };
 
diff --git a/src/features/projects/hooks/useInsertStep4.ts b/src/features/projects/hooks/useInsertStep4.ts
index c6d2d68..d3aef91 100644
--- a/src/features/projects/hooks/useInsertStep4.ts
+++ b/src/features/projects/hooks/useInsertStep4.ts
@@ -29,12 +29,31 @@ const useInsertStep4 = ({ state }: { state?: Step4Type }): ApplyFormResult => {
   };
 
   const validateForm = (): boolean => {
-    //여기에 검사식을 넣어주세요.
-    // 아래는 예시 입니다.
-    if (formStep4.requirements[0] === "") {
-      alert("지원 요구사항을 적어주세욧요.");
+    if (!formStep4.workflow) {
+      alert("진행 방식을 선택해주세요.");
       return false;
     }
+    if (formStep4.requirements.length === 0) {
+      alert("최소 1개 이상의 지원 요구사항을 입력해주세요.");
+      return false;
+    }
+    for (let i = 0; i < formStep4.requirements.length; i++) {
+      if (!formStep4.requirements[i].trim()) {
+        alert(`${i + 1}번째 지원 요구사항을 입력해주세요.`);
+        return false;
+      }
+    }
+    if (formStep4.preferentialTreatment.length === 0) {
+      alert("최소 1개 이상의 우대사항을 입력해주세요.");
+      return false;
+    }
+    for (let i = 0; i < formStep4.preferentialTreatment.length; i++) {
+      if (!formStep4.preferentialTreatment[i].trim()) {
+        alert(`${i + 1}번째 우대사항을 입력해주세요.`);
+        return false;
+      }
+    }
+
     return true;
   };
 
diff --git a/src/features/projects/hooks/useProjectInsertForm.ts b/src/features/projects/hooks/useProjectInsertForm.ts
index 464c8d5..e7603a5 100644
--- a/src/features/projects/hooks/useProjectInsertForm.ts
+++ b/src/features/projects/hooks/useProjectInsertForm.ts
@@ -58,7 +58,10 @@ const useProjectInsertForm = (): InsertFormResult => {
       return;
     }
 
-    await submit();
+    // step4 데이터까지 받기 위해 상태 업데이트 기다린 후 submit
+    setTimeout(async () => {
+      await submit();
+    }, 100);
   };
 
   const submit = async (): Promise<void> => {
diff --git a/src/features/projects/ui/project-insert/Step1.tsx b/src/features/projects/ui/project-insert/Step1.tsx
index f7fb1c6..c3c8c33 100644
--- a/src/features/projects/ui/project-insert/Step1.tsx
+++ b/src/features/projects/ui/project-insert/Step1.tsx
@@ -1,4 +1,5 @@
 import { useMediaQuery, useTheme } from "@mui/material";
+import { Timestamp } from "firebase/firestore";
 import type { JSX } from "react";
 
 import useInsertStep1 from "@features/projects/hooks/useInsertStep1";
@@ -10,9 +11,14 @@ import ProjectOneLineCard from "@entities/projects/ui/project-insert/ProjectOneL
 import ProjectSimpleDescCard from "@entities/projects/ui/project-insert/ProjectSimpleDescCard";
 import ProjectTitleCard from "@entities/projects/ui/project-insert/ProjectTitleCard";
 
-import { formatDate } from "@shared/libs/utils/projectDetail";
 import StepWhiteBox from "@shared/ui/project-insert/StepWhiteBox";
 
+// 모집 마감일 형식 변환
+const timestampToInputDate = (timestamp: Timestamp | null): string => {
+  if (!timestamp) return "";
+  return timestamp.toDate().toISOString().split("T")[0];
+};
+
 const Step1 = ({
   updateForm,
 }: {
@@ -50,7 +56,7 @@ const Step1 = ({
         style={{ gridColumn: "span 1" }}
       />
       <ProjectDeadlineCard
-        value={formatDate(form1.closedDate)}
+        value={timestampToInputDate(form1.closedDate)}
         onChange={update.closedDate}
         large
         style={{ gridColumn: "span 1" }}
diff --git a/src/shared/ui/project-insert/SimpleFormCard.tsx b/src/shared/ui/project-insert/SimpleFormCard.tsx
index 120d814..10397bb 100644
--- a/src/shared/ui/project-insert/SimpleFormCard.tsx
+++ b/src/shared/ui/project-insert/SimpleFormCard.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material/styles";
+import { Box, useTheme } from "@mui/material";
 import type { CSSProperties, JSX, ReactNode } from "react";
 
 interface SimpleFormCardProps {
@@ -22,70 +22,96 @@ const SimpleFormCard = ({
 }: SimpleFormCardProps): JSX.Element => {
   const theme = useTheme();
 
-  const cardStyles = {
-    container: {
-      background: theme.palette.background.paper,
-      borderRadius: theme.shape.borderRadius,
-      border: `1px solid ${theme.palette.divider}`,
-      padding: large ? theme.spacing(3) : theme.spacing(2),
-      minHeight: large ? 220 : 180,
-      display: "flex",
-      flexDirection: "column" as const,
-      justifyContent: "center",
-      width: "100%",
-      overflow: "visible",
-      fontFamily: theme.typography.fontFamily,
-      transition: "all 0.2s ease-in-out",
-      ...style,
-    } as CSSProperties,
-
-    title: {
-      fontWeight: theme.typography.h3.fontWeight,
-      fontSize: large
-        ? theme.typography.h3.fontSize
-        : theme.typography.h4.fontSize,
-      marginBottom: 14,
-      color: theme.palette.text.primary,
-      display: "flex",
-      alignItems: "center",
-    } as CSSProperties,
-
-    description: {
-      color: "#6f6f72",
-      fontSize: large
-        ? theme.typography.h5.fontSize
-        : theme.typography.body1.fontSize,
-      marginBottom: 18,
-      lineHeight: 1.5,
-    } as CSSProperties,
-
-    helpText: {
-      color: "#bbb",
-      fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
-      marginTop: 8,
-    } as CSSProperties,
-
-    // children을 위한 컨테이너 스타일
-    content: {
-      marginBottom: helpText ? 8 : 0,
-    } as CSSProperties,
-  };
-
   return (
-    <div style={cardStyles.container}>
-      <div style={cardStyles.title}>
-        <span role="img" aria-label={title}>
-          {icon}
-        </span>
+    <Box
+      sx={{
+        background: theme.palette.background.paper,
+        borderRadius: "8px",
+        border: `1px solid ${theme.palette.divider}`,
+        padding: {
+          xs: large ? theme.spacing(2) : theme.spacing(1.5),
+          sm: large ? theme.spacing(2.5) : theme.spacing(2),
+          md: large ? theme.spacing(3) : theme.spacing(2),
+        },
+        minHeight: {
+          xs: large ? 180 : 140,
+          md: large ? 220 : 180,
+        },
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "100%",
+        overflow: "visible",
+        fontFamily: theme.typography.fontFamily,
+        transition: "all 0.2s ease-in-out",
+        ...style,
+      }}
+    >
+      {/* Title */}
+      <Box
+        sx={{
+          fontWeight: theme.typography.h3.fontWeight,
+          fontSize: {
+            xs: "1.8rem",
+            sm: "1.9rem",
+            md: theme.typography.h3.fontSize,
+          },
+          marginBottom: "14px",
+          color: theme.palette.text.primary,
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        {icon && (
+          <span role="img" aria-label={title}>
+            {icon}
+          </span>
+        )}
         {title}
-      </div>
+      </Box>
 
-      <div style={cardStyles.description}>{description}</div>
+      {/* Description */}
+      <Box
+        sx={{
+          color: "#6f6f72",
+          fontSize: {
+            xs: "1.4rem",
+            sm: "1.5rem",
+            md: "1.6rem",
+          },
+          marginBottom: "18px",
+          lineHeight: 1.5,
+        }}
+      >
+        {description}
+      </Box>
 
-      <div style={cardStyles.content}>{children}</div>
+      {/* Content */}
+      <Box
+        sx={{
+          marginBottom: helpText ? "8px" : 0,
+        }}
+      >
+        {children}
+      </Box>
 
-      {helpText && <div style={cardStyles.helpText}>{helpText}</div>}
-    </div>
+      {/* Help Text */}
+      {helpText && (
+        <Box
+          sx={{
+            color: "#bbb",
+            fontSize: {
+              xs: "1.3rem",
+              sm: "1.4rem",
+              md: "1.5rem",
+            },
+            marginTop: "8px",
+          }}
+        >
+          {helpText}
+        </Box>
+      )}
+    </Box>
   );
 };