diff --git a/app/api/api.rb b/app/api/api.rb
index 9cbb3df192..6e1c11a8ff 100644
--- a/app/api/api.rb
+++ b/app/api/api.rb
@@ -129,7 +129,7 @@ def to_json_camel_case(val)
     ],
     'reactions' => %w[
       name short_label status conditions rxno content temperature duration
-      role purification tlc_solvents tlc_description rf_value dangerous_products
+      role reaction_type purification tlc_solvents tlc_description rf_value dangerous_products
       plain_text_description plain_text_observation
     ],
     'wellplates' => %w[name short_label readout_titles content plain_text_description],
diff --git a/app/api/chemotion/reaction_api.rb b/app/api/chemotion/reaction_api.rb
index 8c91762537..ed307afb8c 100644
--- a/app/api/chemotion/reaction_api.rb
+++ b/app/api/chemotion/reaction_api.rb
@@ -152,12 +152,15 @@ class ReactionAPI < Grape::API
         optional :purification, type: [String]
         optional :dangerous_products, type: [String]
         optional :conditions, type: String
+        optional :ph_operator, type: String
+        optional :ph_value, type: String
         optional :tlc_solvents, type: String
         optional :solvent, type: String
         optional :tlc_description, type: String
         optional :rf_value, type: String
         optional :temperature, type: Hash
         optional :status, type: String
+        optional :reaction_type, type: String, values: Reaction.reaction_types.keys
         optional :role, type: String
         optional :origin, type: Hash
         optional :reaction_svg_file, type: String
@@ -233,12 +236,15 @@ class ReactionAPI < Grape::API
         optional :purification, type: [String]
         optional :dangerous_products, type: [String]
         optional :conditions, type: String
+        optional :ph_operator, type: String
+        optional :ph_value, type: String
         optional :tlc_solvents, type: String
         optional :solvent, type: String
         optional :tlc_description, type: String
         optional :rf_value, type: String
         optional :temperature, type: Hash
         optional :status, type: String
+        optional :reaction_type, type: String, values: Reaction.reaction_types.keys
         optional :role, type: String
         optional :origin, type: Hash
         optional :reaction_svg_file, type: String
diff --git a/app/api/chemotion/reaction_svg_api.rb b/app/api/chemotion/reaction_svg_api.rb
index cade1f4372..77d8af094a 100644
--- a/app/api/chemotion/reaction_svg_api.rb
+++ b/app/api/chemotion/reaction_svg_api.rb
@@ -11,15 +11,22 @@ class ReactionSvgAPI < Grape::API
         optional :duration, type: String, desc: 'duration which is placed under the reaction-arrow'
         requires :solvents, type: Array, desc: 'solvents which is placed under the reaction-arrow'
         optional :conditions, type: String, desc: 'conditions which is placed under the reaction-arrow'
+        optional :products_only, type: Boolean, default: false
+        optional :show_yield, type: Boolean, default: true
       end
       post do
         paths = params[:materials_svg_paths]
-        composer = SVG::ReactionComposer.new(paths, temperature: params[:temperature],
-                                                    solvents: params[:solvents],
-                                                    duration: params[:duration],
-                                                    conditions: params[:conditions],
-                                                    show_yield: true)
-        { reaction_svg: composer.compose_reaction_svg }
+        composer_class = params[:products_only] ? SVG::ProductsComposer : SVG::ReactionComposer
+        composer_options = {
+          temperature: params[:temperature],
+          solvents: params[:solvents],
+          duration: params[:duration],
+          conditions: params[:conditions],
+          show_yield: params[:show_yield],
+        }
+
+        composer = composer_class.new(paths, composer_options)
+        { reaction_svg: composer.compose_svg }
       end
     end
   end
diff --git a/app/api/entities/reaction_entity.rb b/app/api/entities/reaction_entity.rb
index 8304bb3c8d..f8cdd00a36 100644
--- a/app/api/entities/reaction_entity.rb
+++ b/app/api/entities/reaction_entity.rb
@@ -25,6 +25,8 @@ class ReactionEntity < ApplicationEntity
     with_options(anonymize_below: 10) do
       expose! :code_log,              anonymize_with: nil,                              using: 'Entities::CodeLogEntity'
       expose! :conditions,                                  unless: :displayed_in_list
+      expose! :ph_operator,                                 unless: :displayed_in_list
+      expose! :ph_value,                                    unless: :displayed_in_list
       expose! :container,             anonymize_with: nil,                              using: 'Entities::ContainerEntity'
       expose! :dangerous_products,    anonymize_with: [],   unless: :displayed_in_list
       expose! :duration,                                    unless: :displayed_in_list
@@ -37,6 +39,7 @@ class ReactionEntity < ApplicationEntity
       expose! :rinchi_short_key
       expose! :rinchi_web_key
       expose! :rxno
+      expose! :reaction_type
       expose! :segments,              anonymize_with: [],                               using: 'Labimotion::SegmentEntity'
       expose! :short_label
       expose! :solvent,                                     unless: :displayed_in_list
diff --git a/app/assets/stylesheets/legacy/reaction.scss b/app/assets/stylesheets/legacy/reaction.scss
index 498e7a7ebf..de6d289861 100644
--- a/app/assets/stylesheets/legacy/reaction.scss
+++ b/app/assets/stylesheets/legacy/reaction.scss
@@ -113,6 +113,89 @@ table.reaction-scheme-solvent {
   }
 }
 
+.reaction-details-toolbar {
+  width: 100%;
+
+  &__left {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__right {
+    margin-left: auto;
+    flex: 0 0 auto;
+  }
+
+  &__group {
+    .form-label {
+      font-weight: 600;
+    }
+  }
+
+  &__group--status {
+    min-width: 220px;
+  }
+}
+
+.reaction-details-header {
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    flex-wrap: nowrap;
+    flex: 0 1 auto;
+  }
+
+  &__title-prefix {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  &__title-meta {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  &__title-text {
+    min-width: 0;
+    font-weight: 400;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+
+    &--empty {
+      color: #6c757d;
+    }
+  }
+
+  &__title-input {
+    width: clamp(120px, 16vw, 220px);
+    min-width: 0;
+    flex: 0 1 clamp(120px, 16vw, 220px);
+
+    &:focus,
+    &:focus-visible {
+      border-color: $input-border-color;
+      box-shadow: none;
+      outline: 0;
+    }
+  }
+}
+
 /* Safari 4.0 - 8.0 */
 @-webkit-keyframes reaction-status-color-change {
   from {
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetails.js
index eb2d4283b3..aea3f1fe13 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetails.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -5,9 +5,10 @@ import React, { Component, createRef } from 'react';
 import Aviator from 'aviator';
 import PropTypes from 'prop-types';
 import {
-  Button, Tabs, Tab, OverlayTrigger, Tooltip, ButtonToolbar, Dropdown, Modal, Overlay
+  Button, Tabs, Tab, OverlayTrigger, Tooltip, ButtonToolbar, Dropdown, Modal, Overlay, Form
 } from 'react-bootstrap';
 import { findIndex, isEmpty } from 'lodash';
+import { Select } from 'src/components/common/Select';
 
 import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
 import ElementResearchPlanLabels from 'src/apps/mydb/elements/labels/ElementResearchPlanLabels';
@@ -61,6 +62,19 @@ import ReactionSchemeGraphic from 'src/apps/mydb/elements/details/reactions/Reac
 import WeightPercentageReactionActions from 'src/stores/alt/actions/WeightPercentageReactionActions';
 import isEqual from 'lodash/isEqual';
 import DocumentationButton from 'src/components/common/DocumentationButton';
+import { statusOptions } from 'src/components/staticDropdownOptions/options';
+import Reaction from 'src/models/Reaction';
+
+const formatReactionTypeOption = (option, { context }) => (
+  context === 'value'
+    ? (
+      <span>
+        <i className="fa fa-flask me-1" />
+        {`Reaction type: ${option.label}`}
+      </span>
+    )
+    : option.label
+);
 
 const handleProductClick = (product) => {
   const uri = Aviator.getCurrentURI();
@@ -98,6 +112,8 @@ export default class ReactionDetails extends Component {
       currentUser: (UserStore.getState() && UserStore.getState().currentUser) || {},
       reactionSvgVersion: 0, // Bumped when graphic is updated so shouldComponentUpdate sees a state change (we mutate reaction in place)
       isRefreshingGraphic: false,
+      isEditingHeaderName: false,
+      headerNameDraft: reaction.name || '',
     };
 
     this.onUIStoreChange = this.onUIStoreChange.bind(this);
@@ -110,13 +126,20 @@ export default class ReactionDetails extends Component {
     this.closeWtInfoModal = this.closeWtInfoModal.bind(this);
     this.confirmSchemeChange = this.confirmSchemeChange.bind(this);
     this.cancelSchemeChange = this.cancelSchemeChange.bind(this);
+    this.openHeaderNameEditor = this.openHeaderNameEditor.bind(this);
+    this.handleHeaderNameDraftChange = this.handleHeaderNameDraftChange.bind(this);
+    this.commitHeaderNameChange = this.commitHeaderNameChange.bind(this);
+    this.cancelHeaderNameChange = this.cancelHeaderNameChange.bind(this);
     this.state.showWtInfoModal = false;
     this.state.showSchemeChangeConfirm = false;
     this.state.pendingSchemeType = null;
     this.isUpdatingGraphic = false; // Flag to prevent infinite loops
     this.pendingGraphicReaction = null; // Queued reaction when update requested during in-flight fetch
     this.schemeDropdownRef = createRef();
-    if (!reaction.reaction_svg_file) {
+    this.headerNameInputRef = createRef();
+    // If reaction type is Interaction, always regenerate the scheme preview on load because
+    // they intentionally use the products-only graphic, even if an older SVG exists.
+    if (!reaction.reaction_svg_file || reaction.isInteractionReaction()) {
       this.updateGraphic();
     }
   }
@@ -129,6 +152,25 @@ export default class ReactionDetails extends Component {
     this.setState({ showWtInfoModal: false });
   }
 
+  renderReactionTypeSelect(reaction) {
+    const selectedReactionType = reaction.reaction_type || 'standard';
+
+    return (
+      <Form.Group className="reaction-details-toolbar__group mb-0">
+        <Select
+          size="sm"
+          name="reaction_type"
+          isClearable={false}
+          options={Reaction.reaction_type_options}
+          formatOptionLabel={formatReactionTypeOption}
+          value={Reaction.reaction_type_options.find(({ value }) => value === selectedReactionType)}
+          isDisabled={!permitOn(reaction)}
+          onChange={(option) => this.handleInputChange('reactionType', option?.value || 'standard')}
+        />
+      </Form.Group>
+    );
+  }
+
   componentDidMount() {
     const { reaction } = this.props;
     const { currentUser } = this.state;
@@ -160,9 +202,16 @@ export default class ReactionDetails extends Component {
       const prevSvg = prevState.reaction?.reaction_svg_file;
       const hasPrevSvg = prevSvg !== undefined && prevSvg !== null && String(prevSvg).trim() !== '';
       let stateUpdate = { reaction };
+      if (!this.state.isEditingHeaderName) {
+        stateUpdate = { ...stateUpdate, headerNameDraft: reaction.name || '' };
+      }
       if (isSameReaction && hasPrevSvg) {
         reaction.reaction_svg_file = prevSvg;
-        stateUpdate = { reaction, reactionSvgVersion: (this.state.reactionSvgVersion || 0) + 1 };
+        stateUpdate = {
+          ...stateUpdate,
+          reaction,
+          reactionSvgVersion: (this.state.reactionSvgVersion || 0) + 1
+        };
       }
       this.setState(stateUpdate, () => {
         if (isSameReaction && hasPrevSvg) {
@@ -200,9 +249,12 @@ export default class ReactionDetails extends Component {
     const nextShowSchemeChangeConfirm = nextState.showSchemeChangeConfirm;
     const nextShowWtInfoModal = nextState.showWtInfoModal;
     const nextReactionSvgVersion = nextState.reactionSvgVersion;
+    const nextIsEditingHeaderName = nextState.isEditingHeaderName;
+    const nextHeaderNameDraft = nextState.headerNameDraft;
     const {
       reaction: reactionFromCurrentState, activeTab, visible, activeAnalysisTab,
-      showSchemeChangeConfirm, showWtInfoModal, reactionSvgVersion
+      showSchemeChangeConfirm, showWtInfoModal, reactionSvgVersion,
+      isEditingHeaderName, headerNameDraft
     } = this.state;
     return (
       reactionFromNextProps.id !== reactionFromCurrentState.id
@@ -215,6 +267,8 @@ export default class ReactionDetails extends Component {
       || nextShowSchemeChangeConfirm !== showSchemeChangeConfirm
       || nextShowWtInfoModal !== showWtInfoModal
       || nextReactionSvgVersion !== reactionSvgVersion
+      || nextIsEditingHeaderName !== isEditingHeaderName
+      || nextHeaderNameDraft !== headerNameDraft
     );
   }
 
@@ -249,6 +303,45 @@ export default class ReactionDetails extends Component {
     }
   }
 
+  openHeaderNameEditor() {
+    const { reaction } = this.state;
+    if (!permitOn(reaction) || reaction.isMethodDisabled('name')) {
+      return;
+    }
+
+    this.setState({
+      isEditingHeaderName: true,
+      headerNameDraft: reaction.name || '',
+    }, () => {
+      this.headerNameInputRef.current?.focus();
+      this.headerNameInputRef.current?.select();
+    });
+  }
+
+  handleHeaderNameDraftChange(event) {
+    this.setState({ headerNameDraft: event.target.value });
+  }
+
+  commitHeaderNameChange() {
+    const { reaction, headerNameDraft } = this.state;
+    const nextName = headerNameDraft.trim();
+
+    this.setState({ isEditingHeaderName: false });
+    if (nextName === (reaction.name || '')) {
+      return;
+    }
+
+    this.handleInputChange('name', { target: { value: nextName } });
+  }
+
+  cancelHeaderNameChange() {
+    const { reaction } = this.state;
+    this.setState({
+      isEditingHeaderName: false,
+      headerNameDraft: reaction.name || '',
+    });
+  }
+
   handleInputChange(type, event) {
     let value;
     if (
@@ -264,9 +357,12 @@ export default class ReactionDetails extends Component {
       || type === 'vesselSizeUnit'
       || type === 'gaseous'
       || type === 'conditions'
+      || type === 'phOperator'
+      || type === 'phValue'
       || type === 'volume'
       || type === 'useReactionVolumeForConcentration'
       || type === 'weight_percentage'
+      || type === 'reactionType'
       || type === 'default'
     ) {
       value = event;
@@ -280,6 +376,13 @@ export default class ReactionDetails extends Component {
 
     const { newReaction, options } = setReactionByType(reaction, type, value);
 
+    if (type === 'reactionType' && value === 'interaction') {
+      // Interaction reactions always use the default scheme internals, so clear
+      // any residual gas or weight-percentage state before re-rendering the tab.
+      this.resetWeightPercentagedependencies(newReaction);
+      this.recalculateEquivalentsForMaterials(newReaction);
+    }
+
     // Update gas phase store synchronously for vessel size changes
     // to ensure store is updated before gas calculations run during render
     if (type === 'vesselSizeAmount' || type === 'vesselSizeUnit') {
@@ -399,6 +502,8 @@ export default class ReactionDetails extends Component {
 
   reactionHeader(reaction) {
     const titleTooltip = formatTimeStampsOfElement(reaction || {});
+    const titlePrefix = reaction.short_label || '';
+    const { isEditingHeaderName, headerNameDraft } = this.state;
 
     const colLabel = !reaction.isNew && (
       <ElementCollectionLabels element={reaction} key={reaction.id} placement="right" />
@@ -408,15 +513,57 @@ export default class ReactionDetails extends Component {
       <ElementResearchPlanLabels plans={reaction.research_plans} key={reaction.id} placement="right" />
     );
 
-    return (
-      <div className="d-flex justify-content-between">
-        <div className="d-flex align-items-center gap-2">
-          <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
-            <span>
-              <i className="icon-reaction me-1" />
-              {reaction.title()}
+    const titleContent = (
+      <div className="reaction-details-header__title">
+        <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
+          <span className="reaction-details-header__title-meta">
+            <i className="icon-reaction me-1" />
+            {titlePrefix && (
+              <span className="reaction-details-header__title-prefix">{titlePrefix}</span>
+            )}
+          </span>
+        </OverlayTrigger>
+        {isEditingHeaderName ? (
+          <Form.Control
+            ref={this.headerNameInputRef}
+            size="sm"
+            type="text"
+            name="reaction_name"
+            value={headerNameDraft}
+            placeholder="Reaction name"
+            className="reaction-details-header__title-input"
+            onChange={this.handleHeaderNameDraftChange}
+            onBlur={this.commitHeaderNameChange}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault();
+                this.commitHeaderNameChange();
+              } else if (event.key === 'Escape') {
+                this.cancelHeaderNameChange();
+              }
+            }}
+          />
+        ) : (
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="editReactionName">Double-click to edit reaction name</Tooltip>}
+          >
+            <span
+              aria-hidden="true"
+              className={`reaction-details-header__title-text${reaction.name ? '' : ' reaction-details-header__title-text--empty'}`}
+              onDoubleClick={this.openHeaderNameEditor}
+            >
+              {reaction.name || 'Reaction name'}
             </span>
           </OverlayTrigger>
+        )}
+      </div>
+    );
+
+    return (
+      <div className="d-flex justify-content-between">
+        <div className="reaction-details-header__left">
+          {titleContent}
           {colLabel}
           {rsPlanLabel}
           <ShowUserLabels element={reaction} />
@@ -592,13 +739,17 @@ export default class ReactionDetails extends Component {
     if (/^[\-|\d]\d*\.{0,1}\d{0,2}$/.test(temperature)) {
       temperature = `${temperature} ${reaction.temperature.valueUnit}`;
     }
+    const productsOnly = reaction.isInteractionReaction();
+    const showYield = !productsOnly;
 
     ReactionSvgFetcher.fetchByMaterialsSvgPaths(
       materialsSvgPaths,
       temperature,
       solvents,
       reaction.duration,
-      reaction.conditions
+      reaction.conditions,
+      productsOnly,
+      showYield
     ).then((result) => {
       if (result && result.reaction_svg && result.reaction_svg !== reaction.reaction_svg_file) {
         // Update reaction_svg_file and state - image will reload automatically via ReactionSchemeGraphic useEffect
@@ -818,6 +969,7 @@ export default class ReactionDetails extends Component {
     const {
       reaction, visible, activeTab, showSchemeChangeConfirm
     } = this.state;
+    const isInteractionReaction = reaction.isInteractionReaction();
     this.updateReactionVesselSize(reaction);
     let schemeType = 'Default';
     let documentationLink;
@@ -849,68 +1001,75 @@ export default class ReactionDetails extends Component {
     const tabContentsMap = {
       scheme: (
         <Tab eventKey="scheme" title="Scheme" key={`scheme_${reaction.id}`}>
-          <div className="d-flex align-items-center">
-            <Dropdown ref={this.schemeDropdownRef}>
-              <Dropdown.Toggle variant="info" size="sm" id="scheme-type-dropdown">
-                <i className="fa fa-cog" />
-                <span className="ms-1">
-                  Current Scheme:&nbsp;
-                  {schemeType}
-                </span>
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.Item
-                  active={!reaction.gaseous && !reaction.weight_percentage}
-                  onClick={() => this.handleReactionSchemeChange('default')}
-                >
-                  Default Scheme
-                </Dropdown.Item>
-                <Dropdown.Item
-                  active={reaction.gaseous}
-                  onClick={() => this.handleReactionSchemeChange('gaseous')}
-                >
-                  Gas Scheme
-                </Dropdown.Item>
-                <Dropdown.Item
-                  active={reaction.weight_percentage}
-                  onClick={() => this.handleReactionSchemeChange('weight_percentage')}
-                >
-                  Weight Percentage Scheme
-                </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
-            <Overlay
-              target={() => this.schemeDropdownRef.current}
-              show={showSchemeChangeConfirm}
-              placement="bottom"
-              rootClose
-              onHide={() => this.cancelSchemeChange()}
-            >
-              <Tooltip placement="bottom" className="in" id="scheme-change-confirm-tooltip">
-                Any Assigned Weight percentage reference and wt% values in wt% fields
-                <br />
-                of materials will be deleted.
-                <br />
-                Switch scheme?
-                <br />
-                <ButtonToolbar className="gap-2 justify-content-center mt-1">
-                  <Button
-                    variant="danger"
-                    size="xxsm"
-                    onClick={() => this.confirmSchemeChange()}
-                  >
-                    Confirm
-                  </Button>
-                  <Button
-                    variant="warning"
-                    size="xxsm"
-                    onClick={() => this.cancelSchemeChange()}
-                  >
-                    Discard
-                  </Button>
-                </ButtonToolbar>
-              </Tooltip>
-            </Overlay>
+          <div className="reaction-details-toolbar d-flex align-items-end flex-wrap gap-2 mb-2">
+            <div className="reaction-details-toolbar__left d-flex align-items-end flex-wrap gap-2">
+              {this.renderReactionTypeSelect(reaction)}
+              {!isInteractionReaction && (
+                <Dropdown ref={this.schemeDropdownRef}>
+                  <Dropdown.Toggle variant="info" size="sm" id="scheme-type-dropdown">
+                    <i className="fa fa-cog" />
+                    <span className="ms-1">
+                      Current Scheme:&nbsp;
+                      {schemeType}
+                    </span>
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    <Dropdown.Item
+                      active={!reaction.gaseous && !reaction.weight_percentage}
+                      onClick={() => this.handleReactionSchemeChange('default')}
+                    >
+                      Default Scheme
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      active={reaction.gaseous}
+                      onClick={() => this.handleReactionSchemeChange('gaseous')}
+                    >
+                      Gas Scheme
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      active={reaction.weight_percentage}
+                      onClick={() => this.handleReactionSchemeChange('weight_percentage')}
+                    >
+                      Weight Percentage Scheme
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </Dropdown>
+              )}
+            </div>
+            {!isInteractionReaction && (
+              <Overlay
+                target={() => this.schemeDropdownRef.current}
+                show={showSchemeChangeConfirm}
+                placement="bottom"
+                rootClose
+                onHide={() => this.cancelSchemeChange()}
+              >
+                <Tooltip placement="bottom" className="in" id="scheme-change-confirm-tooltip">
+                  Any Assigned Weight percentage reference and wt% values in wt% fields
+                  <br />
+                  of materials will be deleted.
+                  <br />
+                  Switch scheme?
+                  <br />
+                  <ButtonToolbar className="gap-2 justify-content-center mt-1">
+                    <Button
+                      variant="danger"
+                      size="xxsm"
+                      onClick={() => this.confirmSchemeChange()}
+                    >
+                      Confirm
+                    </Button>
+                    <Button
+                      variant="warning"
+                      size="xxsm"
+                      onClick={() => this.cancelSchemeChange()}
+                    >
+                      Discard
+                    </Button>
+                  </ButtonToolbar>
+                </Tooltip>
+              </Overlay>
+            )}
             {reaction.weight_percentage && (
               <>
                 <OverlayTrigger
@@ -930,6 +1089,23 @@ export default class ReactionDetails extends Component {
                 {documentComponent}
               </>
             )}
+            <div className="reaction-details-toolbar__right d-flex align-items-end">
+              <Form.Group className="reaction-details-toolbar__group reaction-details-toolbar__group--status mb-0">
+                <Select
+                  size="sm"
+                  name="status"
+                  isClearable
+                  placeholder="Status"
+                  options={statusOptions}
+                  value={statusOptions.find(({ value }) => value === reaction.status)}
+                  isDisabled={!permitOn(reaction) || reaction.isMethodDisabled('status')}
+                  onChange={(option) => {
+                    const wrappedEvent = { target: { value: option?.value || null } };
+                    this.handleInputChange('status', wrappedEvent);
+                  }}
+                />
+              </Form.Group>
+            </div>
           </div>
           {
             !reaction.isNew && <CommentSection section="reaction_scheme" element={reaction} />
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
index f8e71adb42..6bf34b7c0f 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetailsMainProperties.js
@@ -9,10 +9,7 @@ import {
   Row,
   Form
 } from 'react-bootstrap';
-import { Select } from 'src/components/common/Select';
-import uuid from 'uuid';
 import Reaction from 'src/models/Reaction';
-import { statusOptions } from 'src/components/staticDropdownOptions/options';
 import LineChartContainer from 'src/components/lineChart/LineChartContainer';
 import EditableTable from 'src/components/lineChart/EditableTable';
 import { permitOn } from 'src/components/common/uis';
@@ -30,8 +27,8 @@ export default class ReactionDetailsMainProperties extends Component {
   }
 
   updateTemperature(newData) {
-    const { reaction: { temperature } } = this.props;
-    this.props.onInputChange('temperatureData', { ...temperature, data: newData });
+    const { reaction: { temperature }, onInputChange } = this.props;
+    onInputChange('temperatureData', { ...temperature, data: newData });
   }
 
   toggleTemperatureChart() {
@@ -40,59 +37,49 @@ export default class ReactionDetailsMainProperties extends Component {
   }
 
   changeUnit() {
-    const { reaction: { temperature } } = this.props;
+    const { reaction: { temperature }, onInputChange } = this.props;
 
     const units = Reaction.temperature_unit;
     const index = units.indexOf(temperature.valueUnit);
     const unit = units[(index + 1) % units.length];
-    this.props.onInputChange('temperatureUnit', unit);
+    onInputChange('temperatureUnit', unit);
   }
 
   render() {
-    const { reaction, onInputChange } = this.props;
+    const {
+      reaction,
+      onInputChange,
+      leadingField,
+      leadingFieldColSize,
+      temperatureColSize,
+      showSchemeFields,
+      phField,
+      vesselSizeField,
+      durationField,
+      reactionVolumeField,
+    } = this.props;
     const { temperature } = reaction;
     const { showTemperatureChart } = this.state;
+    const rowClassName = showSchemeFields ? 'mt-3 mb-0' : 'my-3';
 
     return (
       <>
-        <Row className="my-3">
-          <Col sm={6}>
-            <Form.Group>
-              <Form.Label>Name</Form.Label>
-              <Form.Control
-                id={uuid.v4()}
-                name="reaction_name"
-                type="text"
-                value={reaction.name || ''}
-                placeholder="Name..."
-                disabled={!permitOn(reaction) || reaction.isMethodDisabled('name')}
-                onChange={(event) => onInputChange('name', event)}
-              />
-            </Form.Group>
-          </Col>
-          <Col sm={3}>
-            <Form.Group>
-              <Form.Label>Status</Form.Label>
-              <Select
-                name="status"
-                isClearable
-                options={statusOptions}
-                value={statusOptions.find(({value}) => value === reaction.status)}
-                isDisabled={!permitOn(reaction) || reaction.isMethodDisabled('status')}
-                onChange={(option) => {
-                  const wrappedEvent = {target: {value: option?.value || null}};
-                  onInputChange('status', wrappedEvent);
-                }}
-              />
-            </Form.Group>
-          </Col>
-          <Col sm={3}>
+        <Row className={rowClassName}>
+          {leadingField && (
+            <Col sm={leadingFieldColSize}>
+              {leadingField}
+            </Col>
+          )}
+          <Col sm={temperatureColSize}>
             <Form.Group>
               <Form.Label>Temperature</Form.Label>
               <InputGroup>
-                <OverlayTrigger placement="bottom" overlay={(
-                  <Tooltip id="show_temperature">Show temperature chart</Tooltip>
-                )}>
+                <OverlayTrigger
+                  placement="bottom"
+                  overlay={(
+                    <Tooltip id="show_temperature">Show temperature chart</Tooltip>
+                  )}
+                >
                   <Button
                     disabled={!permitOn(reaction)}
                     className="clipboardBtn"
@@ -119,6 +106,19 @@ export default class ReactionDetailsMainProperties extends Component {
               </InputGroup>
             </Form.Group>
           </Col>
+          {showSchemeFields && (
+            <>
+              <Col sm={3}>
+                {phField}
+              </Col>
+              <Col sm={3}>
+                {durationField || vesselSizeField}
+              </Col>
+              <Col sm={3}>
+                {reactionVolumeField}
+              </Col>
+            </>
+          )}
         </Row>
 
         {showTemperatureChart && (
@@ -146,10 +146,26 @@ export default class ReactionDetailsMainProperties extends Component {
 ReactionDetailsMainProperties.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   reaction: PropTypes.object,
-  onInputChange: PropTypes.func
+  onInputChange: PropTypes.func,
+  leadingField: PropTypes.node,
+  leadingFieldColSize: PropTypes.number,
+  temperatureColSize: PropTypes.number,
+  showSchemeFields: PropTypes.bool,
+  phField: PropTypes.node,
+  vesselSizeField: PropTypes.node,
+  durationField: PropTypes.node,
+  reactionVolumeField: PropTypes.node,
 };
 
 ReactionDetailsMainProperties.defaultProps = {
   reaction: {},
-  onInputChange: () => {}
+  onInputChange: () => {},
+  leadingField: null,
+  leadingFieldColSize: 9,
+  temperatureColSize: 3,
+  showSchemeFields: false,
+  phField: null,
+  vesselSizeField: null,
+  durationField: null,
+  reactionVolumeField: null,
 };
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetailsShare.js b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetailsShare.js
index 4a94688db7..7ca2d79578 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetailsShare.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetailsShare.js
@@ -11,6 +11,14 @@ const setReactionByType = (reaction, type, value) => {
     case 'status':
       reaction.status = value;
       break;
+    case 'reactionType':
+      reaction.reaction_type = value;
+      if (value === 'interaction') {
+        reaction.gaseous = false;
+        reaction.weight_percentage = false;
+      }
+      options = { updateGraphic: true };
+      break;
     case 'description':
       reaction.description = value;
       break;
@@ -51,6 +59,12 @@ const setReactionByType = (reaction, type, value) => {
       reaction.conditions = value;
       options = {updateGraphic: true}
       break;
+    case 'phOperator':
+      reaction.ph_operator = value;
+      break;
+    case 'phValue':
+      reaction.ph_value = value;
+      break;
     case 'solvent':
       reaction.solvent = value;
       options = {updateGraphic: true}
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionSchemeGraphic.js b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionSchemeGraphic.js
index 8bf4000cf6..cc34fba5a8 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionSchemeGraphic.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionSchemeGraphic.js
@@ -64,6 +64,7 @@ export default function ReactionSchemeGraphic({
 }) {
   const [svgProps, setSvgProps] = useState({});
   const tooltipContainer = typeof document !== 'undefined' ? document.body : undefined;
+  const isInteractionReaction = reaction.isInteractionReaction();
 
   useEffect(() => {
     // Use svgPath for both file URLs and data URIs (raw SVG is encoded as data URI in Reaction.svgPath)
@@ -134,19 +135,23 @@ export default function ReactionSchemeGraphic({
           onClick={close}
         />
       </Popover.Header>
-      <Popover.Body className="border-bottom py-1">
-        <h6 className="fs-9 fw-medium">Starting Materials</h6>
-        {reaction.starting_materials.map(
-          (material) => materialShowLabel(material, false, 'starting_materials')
-        )}
-      </Popover.Body>
-      <Popover.Body className="border-bottom py-1">
-        <h6 className="fs-9 fw-medium">Reactants</h6>
-        {reaction.reactants.map((material) => materialShowLabel(material, false, 'reactants'))}
-        {reaction.reactant_sbmm_samples.map(
-          (material) => materialShowLabel(material, true, 'sbmm_reactants')
-        )}
-      </Popover.Body>
+      {!isInteractionReaction && (
+        <>
+          <Popover.Body className="border-bottom py-1">
+            <h6 className="fs-9 fw-medium">Starting Materials</h6>
+            {reaction.starting_materials.map(
+              (material) => materialShowLabel(material, false, 'starting_materials')
+            )}
+          </Popover.Body>
+          <Popover.Body className="border-bottom py-1">
+            <h6 className="fs-9 fw-medium">Reactants</h6>
+            {reaction.reactants.map((material) => materialShowLabel(material, false, 'reactants'))}
+            {reaction.reactant_sbmm_samples.map(
+              (material) => materialShowLabel(material, true, 'sbmm_reactants')
+            )}
+          </Popover.Body>
+        </>
+      )}
       <Popover.Body className="py-1">
         <h6 className="fs-9 fw-medium">Products</h6>
         {reaction.products.map((material) => materialShowLabel(material, false, 'products'))}
@@ -175,6 +180,7 @@ export default function ReactionSchemeGraphic({
       </div>
       <div className="Reaction-scheme-graphic__toolbar">
         <ConfigOverlayButton
+          key={isInteractionReaction ? 'interaction' : 'standard'}
           popperConfig={popperConfigAboveToolbar}
           popoverSettings={popoverSettings}
           wrapperClassName=""
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js b/app/javascript/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
index 14438fe2ae..d81d56cbb4 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
@@ -46,7 +46,18 @@ export default class ReactionDetailsProperties extends Component {
   }
 
   render() {
-    const { reaction } = this.props;
+    const { reaction, onInputChange } = this.props;
+    const typeField = (
+      <Form.Group className="mb-0">
+        <Form.Label>Type (Name Reaction Ontology)</Form.Label>
+        <OlsTreeSelect
+          selectName="rxno"
+          selectedValue={(reaction.rxno && reaction.rxno.trim()) || ''}
+          onSelectChange={(event) => onInputChange('rxno', event.trim())}
+          selectedDisable={!permitOn(reaction) || reaction.isMethodDisabled('rxno')}
+        />
+      </Form.Group>
+    );
     const solventsItems = solventsTL.map((x, i) => {
       const val = Object.keys(x)[0];
       return (
@@ -66,17 +77,11 @@ export default class ReactionDetailsProperties extends Component {
       <Form>
         <ReactionDetailsMainProperties
           reaction={reaction}
-          onInputChange={(type, event) => this.props.onInputChange(type, event)}
+          onInputChange={(type, event) => onInputChange(type, event)}
+          leadingField={typeField}
+          leadingFieldColSize={9}
+          temperatureColSize={3}
         />
-        <Form.Group className="mx-1">
-          <Form.Label>Type (Name Reaction Ontology)</Form.Label>
-          <OlsTreeSelect
-            selectName="rxno"
-            selectedValue={(reaction.rxno && reaction.rxno.trim()) || ''}
-            onSelectChange={(event) => this.props.onInputChange('rxno', event.trim())}
-            selectedDisable={!permitOn(reaction) || reaction.isMethodDisabled('rxno')}
-          />
-        </Form.Group>
         <Form.Group className="mx-1 my-3">
           <Form.Label>Dangerous products</Form.Label>
           <Select
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/Material.js b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
index bc8ce269c3..558bb19024 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
@@ -368,6 +368,10 @@ class Material extends Component {
   equivalentOrYield(material) {
     const { materialGroup, reaction, lockEquivColumn } = this.props;
     if (materialGroup === 'products') {
+      if (reaction.isInteractionReaction()) {
+        return null; // equivalent and yield not relevant for interaction reactions, and conversion rate is not applicable for products, so we return null to render an empty cell.
+        // return <div className="reaction-material__equivalent-data" />;
+      }
       return this.yieldOrConversionRate(material);
     }
     const isSbmm = isSbmmSample(material);
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
index 338108aadd..0e23ef90ff 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
@@ -178,11 +178,13 @@ function GeneralMaterialGroup({
   switchEquiv, lockEquivColumn, displayYieldField, switchYield
 }) {
   const isReactants = materialGroup === 'reactants';
+  const isInteractionReaction = reaction.isInteractionReaction();
+  const isInteractionProducts = isInteractionReaction && materialGroup === 'products';
   const groupHeaders = { ...headers };
 
   let reagentDd = null;
   if (isReactants) {
-    groupHeaders.group = 'Reactants';
+    groupHeaders.group = isInteractionReaction ? 'Additives' : 'Reactants';
 
     const reagentList = Object.keys(reagents_kombi).map((x) => ({
       label: x,
@@ -224,6 +226,10 @@ function GeneralMaterialGroup({
     );
   }
 
+  if (materialGroup === 'starting_materials' && isInteractionReaction) {
+    groupHeaders.group = 'Guest and host';
+  }
+
   const yieldConversionRateFields = () => {
     const conversionText = (
       <>
@@ -259,7 +265,9 @@ function GeneralMaterialGroup({
 
   if (materialGroup === 'products') {
     groupHeaders.group = 'Products';
-    groupHeaders.eq = yieldConversionRateFields();
+    if (!isInteractionReaction) {
+      groupHeaders.eq = yieldConversionRateFields();
+    }
   }
 
   const specialRefTHead = reaction.weight_percentage ? (
@@ -332,15 +340,17 @@ function GeneralMaterialGroup({
             <div className="reaction-material__purity-header">{groupHeaders.purity}</div>
             {showLoadingColumn && <div className="reaction-material__loading-header">{groupHeaders.loading}</div>}
             <div className="reaction-material__concentration-header">{groupHeaders.concn}</div>
-            <div className="reaction-material__equivalent-header">
-              {groupHeaders.eq}
-              {materialGroup === 'starting_materials' && (
-                <SwitchEquivButton
-                  lockEquivColumn={lockEquivColumn}
-                  switchEquiv={switchEquiv}
-                />
-              )}
-            </div>
+            {!isInteractionProducts && (
+              <div className="reaction-material__equivalent-header">
+                {groupHeaders.eq}
+                {materialGroup === 'starting_materials' && (
+                  <SwitchEquivButton
+                    lockEquivColumn={lockEquivColumn}
+                    switchEquiv={switchEquiv}
+                  />
+                )}
+              </div>
+            )}
             <div className="reaction-material__delete-header" />
           </div>
 
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
index 2e0f954876..a045d07779 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
@@ -41,11 +41,61 @@ export default class ReactionDetailsDuration extends Component {
   }
 
   render() {
-    const { reaction } = this.props;
+    const {
+      reaction,
+      onInputChange,
+      isInteractionReaction,
+      inlineInteractionField,
+    } = this.props;
     const durationCalc = reaction && reaction.durationCalc();
     const timePlaceholder = 'DD/MM/YYYY hh:mm:ss';
+
+    if (isInteractionReaction) {
+      // Interaction reactions use a single incubation-time input instead of
+      // the start/stop/duration workflow used for standard reactions.
+      const interactionField = (
+        <Form.Group>
+          <Form.Label>Time (incubation)</Form.Label>
+          <InputGroup>
+            <Form.Control
+              disabled={!permitOn(reaction) || reaction.gaseous}
+              type="text"
+              value={reaction.durationDisplay.dispValue || ''}
+              ref={this.refDuration}
+              placeholder="Input duration..."
+              onChange={(event) => this.handleDurationChange(event)}
+            />
+            <OverlayTrigger
+              placement="bottom"
+              overlay={<Tooltip id="switch_incubation_unit">switch duration unit</Tooltip>}
+            >
+              <Button
+                disabled={!permitOn(reaction) || reaction.gaseous}
+                variant="primary"
+                onClick={() => this.changeDurationUnit()}
+              >
+                {reaction.durationUnit}
+              </Button>
+            </OverlayTrigger>
+          </InputGroup>
+        </Form.Group>
+      );
+
+      if (inlineInteractionField) {
+        return interactionField;
+      }
+
+      return (
+        <Row className="mb-3">
+          <Col md={3} sm={6}>
+            {interactionField}
+          </Col>
+        </Row>
+      );
+    }
+
     return (
-      <Row className='mb-3'>
+      <Row className="mb-3">
         <Col md={3} sm={6}>
           <Form.Group>
             <Form.Label>Start</Form.Label>
@@ -55,11 +105,15 @@ export default class ReactionDetailsDuration extends Component {
                 value={reaction.timestamp_start || ''}
                 disabled={!permitOn(reaction) || reaction.isMethodDisabled('timestamp_start') || reaction.gaseous}
                 placeholder={timePlaceholder}
-                onChange={event => this.props.onInputChange('timestampStart', event)}
+                onChange={event => onInputChange('timestampStart', event)}
               />
-                <Button disabled={!permitOn(reaction) || reaction.gaseous} variant='light' onClick={() => this.setCurrentTime('timestampStart')}>
-                  <i className="fa fa-clock-o" aria-hidden="true" />
-                </Button>
+              <Button
+                disabled={!permitOn(reaction) || reaction.gaseous}
+                variant="light"
+                onClick={() => this.setCurrentTime('timestampStart')}
+              >
+                <i className="fa fa-clock-o" aria-hidden="true" />
+              </Button>
             </InputGroup>
           </Form.Group>
         </Col>
@@ -72,7 +126,7 @@ export default class ReactionDetailsDuration extends Component {
                 value={reaction.timestamp_stop || ''}
                 disabled={!permitOn(reaction) || reaction.isMethodDisabled('timestamp_stop') || reaction.gaseous}
                 placeholder={timePlaceholder}
-                onChange={event => this.props.onInputChange('timestampStop', event)}
+                onChange={event => onInputChange('timestampStop', event)}
               />
               <Button disabled={!permitOn(reaction) || reaction.gaseous} variant='light' onClick={() => this.setCurrentTime('timestampStop')}>
                 <i className="fa fa-clock-o" aria-hidden="true" />
@@ -132,10 +186,14 @@ export default class ReactionDetailsDuration extends Component {
 
 ReactionDetailsDuration.propTypes = {
   reaction: PropTypes.object,
-  onInputChange: PropTypes.func
+  onInputChange: PropTypes.func,
+  isInteractionReaction: PropTypes.bool,
+  inlineInteractionField: PropTypes.bool,
 };
 
 ReactionDetailsDuration.defaultProps = {
   reaction: {},
-  onInputChange: () => {}
+  onInputChange: () => {},
+  isInteractionReaction: false,
+  inlineInteractionField: false,
 };
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification.js b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification.js
index 263c163684..b8b245c7ab 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsPurification.js
@@ -98,40 +98,45 @@ export default class ReactionDetailsPurification extends Component {
       reaction,
       onInputChange,
       additionQuillRef,
-      onChange
+      onChange,
+      isInteractionReaction,
     } = this.props;
     return (
       <>
-        <Row className="mb-3">
-          <Col sm={12}>
-            <Form.Group>
-              <Form.Label>Purification</Form.Label>
-              <Select
-                name="purification"
-                isMulti
-                isDisabled={!permitOn(reaction) || reaction.isMethodDisabled('purification')}
-                options={purificationOptions}
-                onChange={this.handlePurificationChange}
-                value={purificationOptions.filter(({ value }) => reaction.purification.includes(value))}
-              />
-            </Form.Group>
-          </Col>
-        </Row>
-        <Row className="mb-2">
-          <Col sm={12}>
-            <Form.Label>Purification solvents</Form.Label>
-            <MaterialGroup
-              reaction={reaction}
-              materialGroup="purification_solvents"
-              materials={reaction.purification_solvents}
-              dropMaterial={dummy}
-              deleteMaterial={this.deletePSolvent}
-              dropSample={this.dropPSolvent}
-              showLoadingColumn={!!reaction.hasPolymers()}
-              onChange={onChange}
-            />
-          </Col>
-        </Row>
+        {!isInteractionReaction && (
+          <>
+            <Row className="mb-3">
+              <Col sm={12}>
+                <Form.Group>
+                  <Form.Label>Purification</Form.Label>
+                  <Select
+                    name="purification"
+                    isMulti
+                    isDisabled={!permitOn(reaction) || reaction.isMethodDisabled('purification')}
+                    options={purificationOptions}
+                    onChange={this.handlePurificationChange}
+                    value={purificationOptions.filter(({ value }) => reaction.purification.includes(value))}
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row className="mb-2">
+              <Col sm={12}>
+                <Form.Label>Purification solvents</Form.Label>
+                <MaterialGroup
+                  reaction={reaction}
+                  materialGroup="purification_solvents"
+                  materials={reaction.purification_solvents}
+                  dropMaterial={dummy}
+                  deleteMaterial={this.deletePSolvent}
+                  dropSample={this.dropPSolvent}
+                  showLoadingColumn={!!reaction.hasPolymers()}
+                  onChange={onChange}
+                />
+              </Col>
+            </Row>
+          </>
+        )}
         <Row className="mb-3">
           <Col md={12}>
             <Form.Label>Additional information for publication and purification details</Form.Label>
@@ -165,6 +170,7 @@ ReactionDetailsPurification.propTypes = {
   onInputChange: PropTypes.func,
   additionQuillRef: PropTypes.object,
   onChange: PropTypes.func,
+  isInteractionReaction: PropTypes.bool,
 };
 
 ReactionDetailsPurification.defaultProps = {
@@ -172,5 +178,6 @@ ReactionDetailsPurification.defaultProps = {
   onReactionChange: () => {},
   onInputChange: () => {},
   onChange: () => {},
-  additionQuillRef: {}
+  additionQuillRef: {},
+  isInteractionReaction: false,
 };
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
index 73ff8427a0..5c3229fdd8 100644
--- a/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
+++ b/app/javascript/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
@@ -80,6 +80,7 @@ export default class ReactionDetailsScheme extends React.Component {
     this.updateVesselSize = this.updateVesselSize.bind(this);
     this.updateVesselSizeOnBlur = this.updateVesselSizeOnBlur.bind(this);
     this.changeVesselSizeUnit = this.changeVesselSizeUnit.bind(this);
+    this.changePhOperator = this.changePhOperator.bind(this);
     this.reactionVolume = this.reactionVolume.bind(this);
     this.updateVolume = this.updateVolume.bind(this);
     this.handleVolumeCheckboxChange = this.handleVolumeCheckboxChange.bind(this);
@@ -1884,6 +1885,15 @@ export default class ReactionDetailsScheme extends React.Component {
     }
   }
 
+  changePhOperator() {
+    const { reaction, onInputChange } = this.props;
+    const operators = ['=', '<', '>'];
+    const currentIndex = operators.indexOf(reaction.ph_operator || '=');
+    const nextOperator = operators[(currentIndex + 1) % operators.length];
+
+    onInputChange('phOperator', nextOperator);
+  }
+
   // Ensure first mixture becomes the reference with Eq=1,
   // and subsequent mixtures get Eq based on amount_mol relative to the reference material
   setEquivalentForMixture(splitSample, tagGroup) {
@@ -1947,6 +1957,20 @@ export default class ReactionDetailsScheme extends React.Component {
       const volumeValue = (reaction.volume != null && reaction.volume !== '')
         ? reaction.volume
         : undefined;
+      const volumeCalculationTooltip = (
+        <Tooltip id="volume-calculation-tooltip">
+          <div>
+            <strong>Concentration Calculation Method:</strong>
+            <br />
+            <strong>When checked:</strong>
+            {' Concentration calculations will use the reaction volume value entered above.'}
+            <br />
+            <strong>When unchecked:</strong>
+            {' Concentration calculations will be based on the sum of volumes from all reaction materials '}
+            (solvents, starting materials, and reactants).
+          </div>
+        </Tooltip>
+      );
 
       return (
         <Form.Group>
@@ -1963,38 +1987,24 @@ export default class ReactionDetailsScheme extends React.Component {
             onChange={(e) => this.updateVolume(e)}
             onMetricsChange={(e) => this.updateVolume(e)}
           />
-          <div className="mt-2">
-            <Form.Check
-              type="checkbox"
-              id="use_reaction_volume"
-              checked={reaction.use_reaction_volume || false}
-              onChange={this.handleVolumeCheckboxChange}
-              label={(
-                <span>
-                  Calculate Conc
-                  <OverlayTrigger
-                    placement="top"
-                    overlay={(
-                      <Tooltip id="volume-calculation-tooltip">
-                        <div>
-                          <strong>Concentration Calculation Method:</strong>
-                          <br />
-                          <strong>When checked:</strong>
-                          {' Concentration calculations will use the reaction volume value entered above.'}
-                          <br />
-                          <strong>When unchecked:</strong>
-                          {' Concentration calculations will be based on the sum of volumes from all reaction materials '}
-                          (solvents, starting materials, and reactants).
-                        </div>
-                      </Tooltip>
-                    )}
-                  >
-                    <i className="ms-1 fa fa-info-circle" />
-                  </OverlayTrigger>
-                </span>
-              )}
-            />
-          </div>
+          <Form.Check
+            className="mt-2"
+            type="checkbox"
+            id="use_reaction_volume"
+            checked={reaction.use_reaction_volume || false}
+            onChange={this.handleVolumeCheckboxChange}
+            label={(
+              <span>
+                Calculate Conc
+                <OverlayTrigger
+                  placement="top"
+                  overlay={volumeCalculationTooltip}
+                >
+                  <i className="ms-1 fa fa-info-circle" />
+                </OverlayTrigger>
+              </span>
+            )}
+          />
         </Form.Group>
       );
     }
@@ -2052,6 +2062,36 @@ export default class ReactionDetailsScheme extends React.Component {
     reaction.updateAllConcentrations();
   }
 
+  renderPhConditionProperty() {
+    const { reaction, onInputChange } = this.props;
+    const operator = reaction.ph_operator || '=';
+    const value = reaction.ph_value || '';
+    const isDisabled = !permitOn(reaction);
+
+    return (
+      <Form.Group>
+        <Form.Label>pH</Form.Label>
+        <InputGroup>
+          <Button
+            className="reaction-ph-operator"
+            disabled={isDisabled}
+            variant="primary"
+            onClick={() => this.changePhOperator()}
+          >
+            {operator}
+          </Button>
+          <Form.Control
+            type="text"
+            value={value}
+            disabled={isDisabled}
+            placeholder="value"
+            onChange={(event) => onInputChange('phValue', event.target.value)}
+          />
+        </InputGroup>
+      </Form.Group>
+    );
+  }
+
   render() {
     const {
       lockEquivColumn,
@@ -2059,6 +2099,7 @@ export default class ReactionDetailsScheme extends React.Component {
       displayYieldField,
     } = this.state;
     const { reaction, onInputChange, onReactionChange } = this.props;
+    const isInteractionReaction = reaction.isInteractionReaction();
     if (reaction.editedSample !== undefined) {
       if (reaction.editedSample.amountType === 'target') {
         this.updatedSamplesForEquivalentChange(reaction.samples, reaction.editedSample);
@@ -2171,46 +2212,60 @@ export default class ReactionDetailsScheme extends React.Component {
             switchYield={this.switchYield}
             displayYieldField={displayYieldField}
           />
-          <ReactionConditions
-            conditions={reaction.conditions}
-            isDisabled={!permitOn(reaction) || reaction.isMethodDisabled('conditions')}
-            onChange={(conditions) => {
-              onInputChange('conditions', conditions);
-              onReactionChange(reaction, { updateGraphic: true });
-            }}
-          />
+          {!isInteractionReaction && (
+            <ReactionConditions
+              conditions={reaction.conditions}
+              isDisabled={!permitOn(reaction) || reaction.isMethodDisabled('conditions')}
+              onChange={(conditions) => {
+                onInputChange('conditions', conditions);
+                onReactionChange(reaction, { updateGraphic: true });
+              }}
+            />
+          )}
         </div>
 
         <ReactionDetailsMainProperties
           reaction={reaction}
           onInputChange={onInputChange}
+          showSchemeFields
+          phField={this.renderPhConditionProperty()}
+          vesselSizeField={isInteractionReaction ? null : this.reactionVesselSize()}
+          durationField={isInteractionReaction ? (
+            <ReactionDetailsDuration
+              reaction={reaction}
+              onInputChange={onInputChange}
+              isInteractionReaction
+              inlineInteractionField
+            />
+          ) : null}
+          reactionVolumeField={this.reactionVolume()}
         />
-        <ReactionDetailsDuration
-          reaction={reaction}
-          onInputChange={onInputChange}
-        />
-        <Row className="mb-3">
-          <Col sm={3}>
-            <Form.Group className="">
-              <Form.Label className="text-nowrap">Type (Name Reaction Ontology)</Form.Label>
-              <OlsTreeSelect
-                selectName="rxno"
-                selectedValue={(reaction.rxno && reaction.rxno.trim()) || ''}
-                onSelectChange={(event) => onInputChange('rxno', event.trim())}
-                selectedDisable={!permitOn(reaction) || reaction.isMethodDisabled('rxno')}
-              />
-            </Form.Group>
-          </Col>
-          <Col sm={3}>
-            {this.renderRole()}
-          </Col>
-          <Col sm={3}>
-            {this.reactionVesselSize()}
-          </Col>
-          <Col sm={3}>
-            {this.reactionVolume()}
-          </Col>
-        </Row>
+        {!isInteractionReaction && (
+          <ReactionDetailsDuration
+            reaction={reaction}
+            onInputChange={onInputChange}
+            isInteractionReaction={isInteractionReaction}
+          />
+        )}
+        {/* Interaction mode intentionally drops ontology and role fields from the scheme tab. */}
+        {!isInteractionReaction && (
+          <Row className="mb-3">
+            <Col sm={6}>
+              <Form.Group className="">
+                <Form.Label className="text-nowrap">Type (Name Reaction Ontology)</Form.Label>
+                <OlsTreeSelect
+                  selectName="rxno"
+                  selectedValue={(reaction.rxno && reaction.rxno.trim()) || ''}
+                  onSelectChange={(event) => onInputChange('rxno', event.trim())}
+                  selectedDisable={!permitOn(reaction) || reaction.isMethodDisabled('rxno')}
+                />
+              </Form.Group>
+            </Col>
+            <Col sm={3}>
+              {this.renderRole()}
+            </Col>
+          </Row>
+        )}
         <Row className="mb-3">
           <Form.Group>
             <Form.Label>Description</Form.Label>
@@ -2237,6 +2292,7 @@ export default class ReactionDetailsScheme extends React.Component {
           onInputChange={onInputChange}
           additionQuillRef={this.additionQuillRef}
           onChange={(event) => this.handleMaterialsChange(event)}
+          isInteractionReaction={isInteractionReaction}
         />
       </>
     );
diff --git a/app/javascript/src/fetchers/ReactionSvgFetcher.js b/app/javascript/src/fetchers/ReactionSvgFetcher.js
index 3ec80ce778..ed98b763ca 100644
--- a/app/javascript/src/fetchers/ReactionSvgFetcher.js
+++ b/app/javascript/src/fetchers/ReactionSvgFetcher.js
@@ -2,7 +2,15 @@ import 'whatwg-fetch';
 
 export default class ReactionSvgFetcher {
 
-  static fetchByMaterialsSvgPaths(materialsSvgPaths, temperature, solvents, duration, conditions) {
+  static fetchByMaterialsSvgPaths(
+    materialsSvgPaths,
+    temperature,
+    solvents,
+    duration,
+    conditions,
+    productsOnly = false,
+    showYield = true
+  ) {
     const promise = fetch('/api/v1/reaction_svg', {
       credentials: 'same-origin',
       method: 'post',
@@ -16,6 +24,8 @@ export default class ReactionSvgFetcher {
         duration,
         solvents,
         conditions: (typeof conditions === 'string') ? conditions : '',
+        products_only: productsOnly,
+        show_yield: showYield,
       })
     }).then((response) => {
       return response.status == 201 ? response.json() : {}
diff --git a/app/javascript/src/models/Reaction.js b/app/javascript/src/models/Reaction.js
index 4c547c3168..0c77e15013 100644
--- a/app/javascript/src/models/Reaction.js
+++ b/app/javascript/src/models/Reaction.js
@@ -78,6 +78,11 @@ const DurationDefault = {
   memUnit: 'Hour(s)'
 };
 
+const ReactionTypeOptions = [
+  { value: 'standard', label: 'Standard' },
+  { value: 'interaction', label: 'Interaction' },
+];
+
 export const convertDuration = (value, unit, newUnit) => moment.duration(Number.parseFloat(value), LegMomentUnit[unit])
   .as(MomentUnit[newUnit]);
 
@@ -128,6 +133,8 @@ export default class Reaction extends Element {
       container: Container.init(),
       dangerous_products: '',
       conditions: '',
+      ph_operator: '=',
+      ph_value: '',
       description: Reaction.quillDefault(),
       duration: '',
       durationDisplay: DurationDefault,
@@ -159,6 +166,7 @@ export default class Reaction extends Element {
       vessel_size: { amount: null, unit: 'ml' },
       volume: null,
       use_reaction_volume: false,
+      reaction_type: 'standard',
       gaseous: false,
       weight_percentage: false
     });
@@ -180,6 +188,10 @@ export default class Reaction extends Element {
     return TemperatureUnit;
   }
 
+  static get reaction_type_options() {
+    return ReactionTypeOptions;
+  }
+
   get name() {
     return this._name;
   }
@@ -188,6 +200,10 @@ export default class Reaction extends Element {
     this._name = name;
   }
 
+  isInteractionReaction() {
+    return this.reaction_type === 'interaction';
+  }
+
   serialize() {
     return super.serialize({
       collection_id: this.collection_id,
@@ -195,6 +211,8 @@ export default class Reaction extends Element {
       description: this.description,
       dangerous_products: this.dangerous_products,
       conditions: this.conditions,
+      ph_operator: this.ph_operator || '=',
+      ph_value: this.ph_value || '',
       duration: this.duration,
       durationDisplay: this.durationDisplay,
       durationCalc: this.durationCalc(),
@@ -231,6 +249,7 @@ export default class Reaction extends Element {
       vessel_size: this.vessel_size,
       volume: this.volume,
       use_reaction_volume: this.use_reaction_volume,
+      reaction_type: this.reaction_type || 'standard',
       gaseous: this.gaseous,
       weight_percentage: this.weight_percentage,
     });
diff --git a/app/models/reaction.rb b/app/models/reaction.rb
index 04ec5b7e02..8bed95b509 100644
--- a/app/models/reaction.rb
+++ b/app/models/reaction.rb
@@ -19,6 +19,7 @@
 #  plain_text_observation :text
 #  purification           :string           default([]), is an Array
 #  reaction_svg_file      :string
+#  reaction_type          :string           default("standard"), not null
 #  rf_value               :string
 #  rinchi_long_key        :text
 #  rinchi_short_key       :string
@@ -53,6 +54,11 @@
 
 # rubocop:disable Metrics/ClassLength
 class Reaction < ApplicationRecord
+  enum reaction_type: {
+    standard: 'standard',
+    interaction: 'interaction',
+  }
+
   has_logidze
   acts_as_paranoid
   include ElementUIStateScopes
@@ -162,6 +168,7 @@ class Reaction < ApplicationRecord
 
   belongs_to :creator, foreign_key: :created_by, class_name: 'User'
 
+  before_validation :set_default_reaction_type
   before_save :update_svg_file!
   before_save :cleanup_array_fields
   before_save :scrub
@@ -174,6 +181,8 @@ class Reaction < ApplicationRecord
 
   has_one :container, as: :containable
 
+  validates :reaction_type, inclusion: { in: Reaction.reaction_types.keys }
+
   def self.get_associated_samples(reaction_ids)
     ReactionsSample.where(reaction_id: reaction_ids).pluck(:sample_id)
   end
@@ -249,11 +258,15 @@ def update_svg_file!
       # SBMM reactants are stored in a separate association, so append them explicitly.
       paths[:reactants] += reactant_sbmm_samples.map { |sbmm_sample| [sbmm_sample.svg_text_path] }
       begin
-        composer = SVG::ReactionComposer.new(paths, temperature: temperature_display_with_unit,
-                                                    duration: duration,
-                                                    solvents: solvents_in_svg,
-                                                    conditions: conditions,
-                                                    show_yield: true)
+        composer_options = {
+          temperature: temperature_display_with_unit,
+          duration: duration,
+          solvents: solvents_in_svg,
+          conditions: conditions,
+          show_yield: !interaction?,
+        }
+        composer_class = interaction? ? SVG::ProductsComposer : SVG::ReactionComposer
+        composer = composer_class.new(paths, composer_options)
         self.reaction_svg_file = composer.compose_reaction_svg_and_save
       rescue StandardError => _e
         Rails.logger.info('**** SVG::ReactionComposer failed ***')
@@ -326,6 +339,10 @@ def assign_attachment_to_variation(variation_id, analysis_id)
 
   private
 
+  def set_default_reaction_type
+    self.reaction_type = 'standard' if reaction_type.blank?
+  end
+
   def scrubber(value)
     Chemotion::Sanitizer.scrub_xml(value)
   end
diff --git a/db/migrate/20260316120000_add_reaction_type_to_reactions.rb b/db/migrate/20260316120000_add_reaction_type_to_reactions.rb
new file mode 100644
index 0000000000..a81ba64a07
--- /dev/null
+++ b/db/migrate/20260316120000_add_reaction_type_to_reactions.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddReactionTypeToReactions < ActiveRecord::Migration[6.1]
+  def change
+    add_column :reactions, :reaction_type, :string, default: 'standard', null: false
+  end
+end
diff --git a/db/migrate/20260316133000_add_ph_fields_to_reactions.rb b/db/migrate/20260316133000_add_ph_fields_to_reactions.rb
new file mode 100644
index 0000000000..a28ba0c002
--- /dev/null
+++ b/db/migrate/20260316133000_add_ph_fields_to_reactions.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class AddPhFieldsToReactions < ActiveRecord::Migration[6.1]
+  def change
+    add_column :reactions, :ph_operator, :string, default: '=', null: false
+    add_column :reactions, :ph_value, :string
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 083b3aefb9..45403c914f 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2026_02_20_000002) do
+ActiveRecord::Schema.define(version: 2026_03_16_133000) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "hstore"
@@ -1045,6 +1045,9 @@
     t.decimal "volume", precision: 10, scale: 4
     t.boolean "use_reaction_volume", default: false, null: false
     t.boolean "weight_percentage"
+    t.string "reaction_type", default: "standard", null: false
+    t.string "ph_operator", default: "=", null: false
+    t.string "ph_value"
     t.index ["deleted_at"], name: "index_reactions_on_deleted_at"
     t.index ["rinchi_short_key"], name: "index_reactions_on_rinchi_short_key", order: :desc
     t.index ["rinchi_web_key"], name: "index_reactions_on_rinchi_web_key"
diff --git a/lib/svg/reaction_composer.rb b/lib/svg/reaction_composer.rb
index d676977418..18bc9d9988 100644
--- a/lib/svg/reaction_composer.rb
+++ b/lib/svg/reaction_composer.rb
@@ -215,6 +215,10 @@ def compose_reaction_svg
       "#{template_it.strip} #{sections_string_filtered} </svg></svg>"
     end
 
+    def compose_svg
+      compose_reaction_svg
+    end
+
     private
 
     def init_materials(materials_svg_paths)
diff --git a/spec/models/reaction_spec.rb b/spec/models/reaction_spec.rb
index 6a06923352..e479814db0 100644
--- a/spec/models/reaction_spec.rb
+++ b/spec/models/reaction_spec.rb
@@ -19,6 +19,7 @@
 #  plain_text_observation :text
 #  purification           :string           default([]), is an Array
 #  reaction_svg_file      :string
+#  reaction_type          :string           default("standard"), not null
 #  rf_value               :string
 #  rinchi_long_key        :text
 #  rinchi_short_key       :string