diff --git a/packages/frontend/src/components/shared/Input/Input.tsx b/packages/frontend/src/components/shared/Input/Input.tsx
index a5228890..e1c84e8b 100644
--- a/packages/frontend/src/components/shared/Input/Input.tsx
+++ b/packages/frontend/src/components/shared/Input/Input.tsx
@@ -47,15 +47,15 @@ export const Input = ({
     helperIcon: helperIconCls,
   } = inputTheme({ ...styleProps });
 
-  const renderLabels = useMemo(
-    () => (
-      <div className="space-y-1">
+  const renderLabels = useMemo(() => {
+    if (!label && !description) return null;
+    return (
+      <div className="flex flex-col gap-y-1">
         <p className={labelCls()}>{label}</p>
         <p className={descriptionCls()}>{description}</p>
       </div>
-    ),
-    [labelCls, descriptionCls, label, description],
-  );
+    );
+  }, [labelCls, descriptionCls, label, description]);
 
   const renderLeftIcon = useMemo(() => {
     return (
@@ -73,8 +73,9 @@ export const Input = ({
     );
   }, [cloneIcon, iconCls, iconContainerCls, rightIcon]);
 
-  const renderHelperText = useMemo(
-    () => (
+  const renderHelperText = useMemo(() => {
+    if (!helperText) return null;
+    return (
       <div className={helperTextCls()}>
         {state &&
           cloneIcon(<WarningIcon className={helperIconCls()} />, {
@@ -82,9 +83,8 @@ export const Input = ({
           })}
         <p>{helperText}</p>
       </div>
-    ),
-    [cloneIcon, state, helperIconCls, helperText, helperTextCls],
-  );
+    );
+  }, [cloneIcon, state, helperIconCls, helperText, helperTextCls]);
 
   return (
     <div className="flex flex-col gap-y-2">
diff --git a/packages/frontend/src/components/shared/Select/Select.tsx b/packages/frontend/src/components/shared/Select/Select.tsx
index 6449449b..1d3d12b0 100644
--- a/packages/frontend/src/components/shared/Select/Select.tsx
+++ b/packages/frontend/src/components/shared/Select/Select.tsx
@@ -320,8 +320,9 @@ export const Select = ({
     );
   }, [cloneIcon, theme, rightIcon]);
 
-  const renderHelperText = useMemo(
-    () => (
+  const renderHelperText = useMemo(() => {
+    if (!helperText) return null;
+    return (
       <div className={theme.helperText()}>
         {error &&
           cloneIcon(<WarningIcon className={theme.helperIcon()} />, {
@@ -329,9 +330,8 @@ export const Select = ({
           })}
         <p>{helperText}</p>
       </div>
-    ),
-    [cloneIcon, error, theme, helperText],
-  );
+    );
+  }, [cloneIcon, error, theme, helperText]);
 
   const isMultipleHasValue = multiple && selectedItems.length > 0;
   const isMultipleHasValueButNotSearchable =