diff --git a/web/src/components/common/Checkbox.tsx b/web/src/components/common/Checkbox.tsx
new file mode 100644
index 000000000..2f1cb65a8
--- /dev/null
+++ b/web/src/components/common/Checkbox.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+
+interface CheckboxProps {
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
+  dataTestId?: string;
+  helpText?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked,
+  onChange,
+  disabled = false,
+  error,
+  className = '',
+  labelClassName = '',
+  id,
+  label,
+  helpText,
+}) => {
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
+
+  return (
+    <div className="mb-4">
+      <div className="flex items-center space-x-3">
+        <input
+          id={id}
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          className={`h-4 w-4 focus:ring-offset-2 border-gray-300 rounded ${className}`}
+          data-testid={`bool-input-${id}`}
+          style={{
+            color: themeColor,
+            '--tw-ring-color': themeColor,
+            accentColor: themeColor,
+          } as React.CSSProperties}
+        />
+        <label htmlFor={id} className={`text-sm text-gray-700 ${labelClassName}`}>
+          {label}
+        </label>
+      </div>
+      {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
+    </div>
+  );
+};
+
+export default Checkbox;
diff --git a/web/src/components/common/ConfigItem.tsx b/web/src/components/common/ConfigItem.tsx
new file mode 100644
index 000000000..b0528abfe
--- /dev/null
+++ b/web/src/components/common/ConfigItem.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface ConfigItemProps {
+  id: string;
+  label: string;
+  dataTestId?: string;
+  helpText?: string;
+  children: React.ReactElement;
+}
+
+/**
+ * A wrapper component that provides consistent styling and layout for configuration form elements
+ *
+ * Props:
+ * @param {string} id - Unique identifier for the form element
+ * @param {string} label - Label text to display above the input
+ * @param {string} [dataTestId] - Optional test ID for e2e testing
+ * @param {string} [helpText] - Optional help text displayed below the input
+ * @param {React.ReactElement} children - The form input component to wrap
+ *
+ * The component clones the child element and injects common props (id, label, helpText)
+ * to ensure consistent behavior across different input types.
+ *
+ * Example:
+ * ```tsx
+ * <ConfigItem
+ *   id="hostname"
+ *   label="Hostname"
+ *   helpText="Enter the server hostname"
+ * >
+ *   <Input />
+ * </ConfigItem>
+ * ```
+ */
+const ConfigItem: React.FC<ConfigItemProps> = ({
+  id,
+  label,
+  helpText,
+  children,
+}) => {
+  // Clone the child element and inject the common props
+  const enhancedChild = React.cloneElement(children, {
+    id,
+    label,
+    helpText,
+  } as React.HTMLAttributes<HTMLElement>);
+
+  return (
+    <div key={id} data-testid={`config-item-${id}`}>
+      <div className="mb-4">
+        {enhancedChild}
+      </div>
+    </div>
+  );
+};
+
+
+export default ConfigItem;
diff --git a/web/src/components/common/Input.tsx b/web/src/components/common/Input.tsx
index c8561dcfb..74bc47982 100644
--- a/web/src/components/common/Input.tsx
+++ b/web/src/components/common/Input.tsx
@@ -2,39 +2,40 @@ import React from 'react';
 import { useSettings } from '../../contexts/SettingsContext';
 
 interface InputProps {
-  id: string;
-  label: string;
   type?: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
+  icon?: React.ReactNode;
   placeholder?: string;
   required?: boolean;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
-  icon?: React.ReactNode;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
   dataTestId?: string;
+  helpText?: string;
 }
 
 const Input: React.FC<InputProps> = ({
-  id,
-  label,
   type = 'text',
   value,
-  onChange,
-  onKeyDown,
+  icon,
   placeholder = '',
   required = false,
+  onKeyDown,
+  onChange,
   disabled = false,
   error,
-  helpText,
   className = '',
   labelClassName = '',
-  icon,
-  dataTestId,
+  id,
+  label,
+  helpText,
 }) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
@@ -69,7 +70,7 @@ const Input: React.FC<InputProps> = ({
             '--tw-ring-color': themeColor,
             '--tw-ring-offset-color': themeColor,
           } as React.CSSProperties}
-          data-testid={dataTestId}
+          data-testid={`text-input-${id}`}
         />
       </div>
       {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
diff --git a/web/src/components/common/Radio.tsx b/web/src/components/common/Radio.tsx
new file mode 100644
index 000000000..968cb1c84
--- /dev/null
+++ b/web/src/components/common/Radio.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+import { AppConfigChildItem } from '../../types';
+
+interface RadioProps {
+  value: string;
+  options: AppConfigChildItem[];
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
+  dataTestId?: string;
+  helpText?: string;
+}
+
+const Radio: React.FC<RadioProps> = ({
+   value,
+   options,
+   onChange,
+   disabled = false,
+   error,
+   className = '',
+   labelClassName = '',
+   id,
+   label,
+   helpText,
+}) => {
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
+
+  return (
+    <div className="mb-4">
+      <label className={`block text-sm font-medium text-gray-700 mb-2 ${labelClassName}`}>
+        {label}
+      </label>
+      <div className="space-y-2">
+        {options.map(option => (
+          <div key={option.name} className="flex items-center">
+            <input
+              type="radio"
+              id={option.name}
+              name={id}
+              value={option.name}
+              checked={value === option.name}
+              onChange={onChange}
+              disabled={disabled}
+              className={`h-4 w-4 focus:ring-offset-2 border-gray-300 ${className}`}
+              data-testid={`radio-input-${option.name}`}
+              style={{
+                color: themeColor,
+                '--tw-ring-color': themeColor,
+                accentColor: themeColor,
+              } as React.CSSProperties}
+            />
+            <label htmlFor={option.name} className="ml-3 text-sm text-gray-700">
+              {option.title}
+            </label>
+          </div>
+        ))}
+      </div>
+      {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
+    </div>
+  );
+};
+
+export default Radio;
diff --git a/web/src/components/common/Textarea.tsx b/web/src/components/common/Textarea.tsx
index d5d244e54..5bc562d55 100644
--- a/web/src/components/common/Textarea.tsx
+++ b/web/src/components/common/Textarea.tsx
@@ -2,35 +2,36 @@ import { ChangeEvent, CSSProperties } from 'react';
 import { useSettings } from '../../contexts/SettingsContext';
 
 interface TextareaProps {
-  id: string;
-  label: string;
   value: string;
-  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   rows?: number;
   placeholder?: string;
   required?: boolean;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   disabled?: boolean;
   error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
   dataTestId?: string;
+  helpText?: string;
 }
 
 const Textarea = ({
-  id,
-  label,
   value,
-  onChange,
   rows = 4,
   placeholder = '',
   required = false,
+  onChange,
   disabled = false,
   error,
-  helpText,
   className = '',
   labelClassName = '',
-  dataTestId,
+  id,
+  label,
+  helpText,
 }: TextareaProps) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
@@ -58,7 +59,7 @@ const Textarea = ({
           '--tw-ring-color': themeColor,
           '--tw-ring-offset-color': themeColor,
         } as CSSProperties}
-        data-testid={dataTestId}
+        data-testid={`textarea-input-${id}`}
       />
       {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
       {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
diff --git a/web/src/components/wizard/config/ConfigurationStep.tsx b/web/src/components/wizard/config/ConfigurationStep.tsx
index 07301883b..dd93f8c29 100644
--- a/web/src/components/wizard/config/ConfigurationStep.tsx
+++ b/web/src/components/wizard/config/ConfigurationStep.tsx
@@ -4,6 +4,9 @@ import Card from '../../common/Card';
 import Button from '../../common/Button';
 import Input from '../../common/Input';
 import Textarea from '../../common/Textarea';
+import Checkbox from '../../common/Checkbox';
+import Radio from '../../common/Radio';
+import ConfigItem from '../../common/ConfigItem';
 import { useWizard } from '../../../contexts/WizardModeContext';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useSettings } from '../../../contexts/SettingsContext';
@@ -165,77 +168,35 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
       case 'text':
         return (
           <Input
-            id={item.name}
-            label={item.title}
             value={getDisplayValue(item)}
             onChange={handleInputChange}
-            dataTestId={`text-input-${item.name}`}
-            helpText={item.help_text}
           />
         );
 
       case 'textarea':
         return (
           <Textarea
-            id={item.name}
-            label={item.title}
             value={getDisplayValue(item)}
             onChange={handleInputChange}
-            dataTestId={`textarea-input-${item.name}`}
           />
         );
 
       case 'bool':
         return (
-          <div className="flex items-center space-x-3">
-            <input
-              id={item.name}
-              type="checkbox"
-              checked={getEffectiveValue(item) === '1'}
-              onChange={handleCheckboxChange}
-              className="h-4 w-4 focus:ring-offset-2 border-gray-300 rounded"
-              data-testid={`bool-input-${item.name}`}
-              style={{
-                color: themeColor,
-                '--tw-ring-color': themeColor,
-              } as React.CSSProperties}
-            />
-            <label htmlFor={item.name} className="text-sm text-gray-700">
-              {item.title}
-            </label>
-          </div>
+          <Checkbox
+            checked={getEffectiveValue(item) === '1'}
+            onChange={handleCheckboxChange}
+          />
         );
 
       case 'radio':
         if (item.items) {
           return (
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                {item.title}
-              </label>
-              <div className="space-y-2">
-                {item.items.map(child => (
-                  <div key={child.name} className="flex items-center">
-                    <input
-                      type="radio"
-                      id={child.name}
-                      value={child.name}
-                      checked={getEffectiveValue(item) === child.name}
-                      onChange={e => handleRadioChange(item.name, e)}
-                      className="h-4 w-4 focus:ring-offset-2 border-gray-300"
-                      data-testid={`radio-input-${child.name}`}
-                      style={{
-                        color: themeColor,
-                        '--tw-ring-color': themeColor,
-                      } as React.CSSProperties}
-                    />
-                    <label htmlFor={child.name} className="ml-3 text-sm text-gray-700">
-                      {child.title}
-                    </label>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <Radio
+              value={getEffectiveValue(item)}
+              options={item.items}
+              onChange={e => handleRadioChange(item.name, e)}
+            />
           );
         }
         return null;
@@ -253,11 +214,19 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
         {group.description && (
           <p className="text-gray-600 mb-4">{group.description}</p>
         )}
-        {group.items.map(item => (
-          <div key={item.name} data-testid={`config-item-${item.name}`}>
-            {renderConfigItem(item)}
-          </div>
-        ))}
+        {group.items.map(item => {
+          const renderedItem = renderConfigItem(item);
+          if (!renderedItem) return null;
+          return (
+            <ConfigItem
+              id={item.name}
+              label={item.title}
+              helpText={item.help_text}
+            >
+              {renderedItem}
+            </ConfigItem>
+          );
+        })}
       </div>
     );
   };