diff --git a/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx b/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
index 89da34ccd..a108cc4fb 100644
--- a/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
+++ b/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
@@ -8,6 +8,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faTrashCan } from '@fortawesome/free-solid-svg-icons/faTrashCan';
+import { ProfileMainInformation } from './ProfileMainInformation.jsx';
 import { getProfilePhases, removePhaseAt, updatePhaseAt } from './profilePhases.js';
 
 export function ExtendedProfileForm(props) {
@@ -70,57 +71,13 @@ export function ExtendedProfileForm(props) {
       }}
     >
       <div className='grid grid-cols-1 gap-4 lg:grid-cols-10'>
-        <Card sm={10} title='Profile Information'>
-          <div className='form-control'>
-            <label htmlFor='label' className='mb-2 block text-sm font-medium'>
-              Title
-            </label>
-            <input
-              id='label'
-              name='label'
-              className='input input-bordered w-full'
-              value={data?.label}
-              onChange={e => onFieldChange('label', e.target.value)}
-              aria-label='Enter a name for this profile'
-              required
-            />
-          </div>
-          <div className='form-control'>
-            <label htmlFor='description' className='mb-2 block text-sm font-medium'>
-              Description
-            </label>
-            <input
-              id='description'
-              name='description'
-              className='input input-bordered w-full'
-              value={data?.description}
-              onChange={e => onFieldChange('description', e.target.value)}
-              aria-label='Optional description for this profile'
-            />
-          </div>
-          <div className='form-control'>
-            <label htmlFor='temperature' className='mb-2 block text-sm font-medium'>
-              Temperature
-            </label>
-            <div className='input-group'>
-              <label htmlFor='temperature' className='input w-full'>
-                <input
-                  id='temperature'
-                  name='temperature'
-                  type='number'
-                  className='grow'
-                  value={data?.temperature}
-                  onChange={e => onFieldChange('temperature', e.target.value)}
-                  aria-label='Temperature in degrees Celsius'
-                  min='0'
-                  max='150'
-                  step='0.1'
-                />
-                <span aria-label='degrees Celsius'>°C</span>
-              </label>
-            </div>
-          </div>
-        </Card>
+        <ProfileMainInformation
+          data={data}
+          onChangeLabel={e => onFieldChange('label', e.target.value)}
+          onChangeDescription={e => onFieldChange('description', e.target.value)}
+          onChangeTemperature={e => onFieldChange('temperature', e.target.value)}
+          onChangeUtility={e => onFieldChange('utility', !!e.target.checked)}
+        />
         <Card sm={10}>
           <ExtendedProfileChart
             data={{ ...data, phases }}
diff --git a/web/src/pages/ProfileEdit/ProfileMainInformation.jsx b/web/src/pages/ProfileEdit/ProfileMainInformation.jsx
new file mode 100644
index 000000000..5296197ac
--- /dev/null
+++ b/web/src/pages/ProfileEdit/ProfileMainInformation.jsx
@@ -0,0 +1,72 @@
+import Card from '../../components/Card.jsx';
+
+export function ProfileMainInformation(props) {
+  console.log(props.data);
+  return (
+    <Card sm={10} title='Profile Information'>
+      <div className='form-control'>
+        <label htmlFor='label' className='mb-2 block text-sm font-medium'>
+          Title
+        </label>
+        <input
+          id='label'
+          name='label'
+          className='input input-bordered w-full'
+          value={props.data?.label}
+          onChange={props.onChangeLabel}
+          aria-label='Enter a name for this profile'
+          required
+        />
+      </div>
+      <div className='form-control'>
+        <label htmlFor='description' className='mb-2 block text-sm font-medium'>
+          Description
+        </label>
+        <textarea
+          id='description'
+          name='description'
+          rows={2}
+          className='textarea textarea-bordered w-full text-wrap'
+          value={props.data?.description}
+          onChange={props.onChangeDescription}
+          aria-label='Optional description for this profile'
+        />
+      </div>
+      <div className='form-control'>
+        <label htmlFor='temperature' className='mb-2 block text-sm font-medium'>
+          Temperature
+        </label>
+        <div className='input-group'>
+          <label htmlFor='temperature' className='input w-full'>
+            <input
+              id='temperature'
+              name='temperature'
+              type='number'
+              className='grow'
+              value={props.data?.temperature}
+              onChange={props.onChangeTemperature}
+              aria-label='Temperature in degrees Celsius'
+              min='0'
+              max='150'
+              step='0.1'
+            />
+            <span aria-label='degrees Celsius'>°C</span>
+          </label>
+        </div>
+      </div>
+      <div className='form-control'>
+        <label htmlFor='utility' className='mb-2 block text-sm font-medium' aria-label='Utility profile toggle'>
+          Utility profile
+        </label>
+        <input
+          id='utility'
+          name='utility'
+          type='checkbox'
+          className='toggle toggle-primary'
+          checked={!!props.data?.utility}
+          onChange={props.onChangeUtility}
+        />
+      </div>
+    </Card>
+  );
+}
diff --git a/web/src/pages/ProfileEdit/StandardProfileForm.jsx b/web/src/pages/ProfileEdit/StandardProfileForm.jsx
index 9813457e8..85febf936 100644
--- a/web/src/pages/ProfileEdit/StandardProfileForm.jsx
+++ b/web/src/pages/ProfileEdit/StandardProfileForm.jsx
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faTrashCan } from '@fortawesome/free-solid-svg-icons/faTrashCan';
 import { Tooltip } from '../../components/Tooltip.jsx';
+import { ProfileMainInformation } from './ProfileMainInformation.jsx';
 import { getProfilePhases, removePhaseAt, updatePhaseAt } from './profilePhases.js';
 
 export function StandardProfileForm(props) {
@@ -58,57 +59,13 @@ export function StandardProfileForm(props) {
       }}
     >
       <div className='grid grid-cols-1 gap-4 lg:grid-cols-10'>
-        <Card sm={10} title='Profile Information'>
-          <div className='form-control'>
-            <label htmlFor='label' className='mb-2 block text-sm font-medium'>
-              Title
-            </label>
-            <input
-              id='label'
-              name='label'
-              className='input input-bordered w-full'
-              value={data?.label}
-              onChange={e => onFieldChange('label', e.target.value)}
-              aria-label='Enter a name for this profile'
-              required
-            />
-          </div>
-          <div className='form-control'>
-            <label htmlFor='description' className='mb-2 block text-sm font-medium'>
-              Description
-            </label>
-            <input
-              id='description'
-              name='description'
-              className='input input-bordered w-full'
-              value={data?.description}
-              onChange={e => onFieldChange('description', e.target.value)}
-              aria-label='Optional description for this profile'
-            />
-          </div>
-          <div className='form-control'>
-            <label htmlFor='temperature' className='mb-2 block text-sm font-medium'>
-              Temperature
-            </label>
-            <div className='input-group'>
-              <label htmlFor='temperature' className='input w-full'>
-                <input
-                  id='temperature'
-                  name='temperature'
-                  type='number'
-                  className='grow'
-                  value={data?.temperature}
-                  onChange={e => onFieldChange('temperature', e.target.value)}
-                  aria-label='Temperature in degrees Celsius'
-                  min='0'
-                  max='150'
-                  step='0.1'
-                />
-                <span aria-label='degrees Celsius'>°C</span>
-              </label>
-            </div>
-          </div>
-        </Card>
+        <ProfileMainInformation
+          data={data}
+          onChangeLabel={e => onFieldChange('label', e.target.value)}
+          onChangeDescription={e => onFieldChange('description', e.target.value)}
+          onChangeTemperature={e => onFieldChange('temperature', e.target.value)}
+          onChangeUtility={e => onFieldChange('utility', !!e.target.checked)}
+        />
 
         <Card sm={10} title='Brew Phases'>
           <div className='space-y-4' role='group' aria-label='Brew phases configuration'>