diff --git a/src/base/FormHelperText/FormHelperText.test.tsx b/src/base/FormHelperText/FormHelperText.test.tsx
new file mode 100644
index 000000000..476f55ec6
--- /dev/null
+++ b/src/base/FormHelperText/FormHelperText.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FormHelperText from './FormHelperText';
+
+describe('FormHelperText Component', () => {
+  it('renders children correctly', () => {
+    render(<FormHelperText>Sample Helper Text</FormHelperText>);
+    expect(screen.getByText('Sample Helper Text')).toBeInTheDocument();
+  });
+
+  it('forwards ref correctly to the underlying HTML element', () => {
+    const ref = React.createRef<HTMLParagraphElement>();
+    render(<FormHelperText ref={ref}>Ref Attached Text</FormHelperText>);
+    expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
+    expect(ref.current?.textContent).toBe('Ref Attached Text');
+  });
+
+  it('applies custom className and props', () => {
+    render(
+      <FormHelperText data-testid="custom-helper" className="custom-class" error>
+        Error state text
+      </FormHelperText>
+    );
+    const element = screen.getByTestId('custom-helper');
+    expect(element).toHaveClass('custom-class');
+    expect(element).toHaveClass('Mui-error');
+  });
+});
diff --git a/src/base/FormHelperText/FormHelperText.tsx b/src/base/FormHelperText/FormHelperText.tsx
new file mode 100644
index 000000000..a04cd14da
--- /dev/null
+++ b/src/base/FormHelperText/FormHelperText.tsx
@@ -0,0 +1,19 @@
+import MuiFormHelperText, {
+  FormHelperTextProps as MuiFormHelperTextProps
+} from '@mui/material/FormHelperText';
+import React from 'react';
+
+export type SistentFormHelperTextProps = MuiFormHelperTextProps;
+
+export const FormHelperText = React.forwardRef<HTMLParagraphElement, SistentFormHelperTextProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <MuiFormHelperText ref={ref} {...props}>
+        {children}
+      </MuiFormHelperText>
+    );
+  }
+);
+FormHelperText.displayName = 'FormHelperText';
+
+export default FormHelperText;
diff --git a/src/base/FormHelperText/index.ts b/src/base/FormHelperText/index.ts
new file mode 100644
index 000000000..91104b497
--- /dev/null
+++ b/src/base/FormHelperText/index.ts
@@ -0,0 +1 @@
+export * from './FormHelperText';
diff --git a/src/base/index.tsx b/src/base/index.tsx
index f416f5e06..2bdba026e 100644
--- a/src/base/index.tsx
+++ b/src/base/index.tsx
@@ -96,3 +96,4 @@ export * from './Toolbar';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Zoom';
+export * from './FormHelperText';