diff --git a/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
index fc2e53119c..a74d34cb04 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
@@ -15,11 +15,12 @@ import { hNmrCount, cNmrCount, instrumentText } from 'src/utilities/ElementUtils
 import { contentToText } from 'src/utilities/quillFormat';
 import { chmoConversions } from 'src/components/OlsComponent';
 import { previewContainerImage } from 'src/utilities/imageHelper';
-import { JcampIds, BuildSpcInfos } from 'src/utilities/SpectraHelper';
+import { JcampIds, BuildSpcInfos, BuildSpcInfosForNMRDisplayer, isNMRKind } from 'src/utilities/SpectraHelper';
 import UIStore from 'src/stores/alt/stores/UIStore';
 import SpectraActions from 'src/stores/alt/actions/SpectraActions';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
+import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';
 
 import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
 
@@ -42,48 +43,74 @@ const nmrMsg = (reaction, container) => {
 const SpectraEditorBtn = ({
   element, spcInfo, hasJcamp, hasChemSpectra,
   toggleSpectraModal, confirmRegenerate,
+  toggleNMRDisplayerModal, hasNMRium,
 }) => (
-  <OverlayTrigger
-    placement="bottom"
-    delayShow={500}
-    overlay={<Tooltip id="spectra">Spectra Editor {!spcInfo ? ': Reprocess' : ''}</Tooltip>}
-  >{spcInfo ? (
-    <ButtonGroup className="button-right">
-      <SplitButton
-        id="spectra-editor-split-button"
-        pullRight
-        bsStyle="info"
+  <span>
+    <OverlayTrigger
+      placement="bottom"
+      delayShow={500}
+      overlay={<Tooltip id="spectra">Spectra Editor {!spcInfo ? ': Reprocess' : ''}</Tooltip>}
+    >{spcInfo ? (
+      <ButtonGroup className="button-right">
+        <SplitButton
+          id="spectra-editor-split-button"
+          pullRight
+          bsStyle="info"
+          bsSize="xsmall"
+          title={<i className="fa fa-area-chart" />}
+          onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+          onClick={toggleSpectraModal}
+          disabled={!spcInfo || !hasChemSpectra}
+        >
+          <MenuItem
+            id="regenerate-spectra"
+            key="regenerate-spectra"
+            onSelect={(eventKey, event) => {
+              event.stopPropagation();
+              confirmRegenerate(event);
+            }}
+            disabled={!hasJcamp || !element.can_update}
+          >
+            <i className="fa fa-refresh" /> Reprocess
+          </MenuItem>
+        </SplitButton>
+      </ButtonGroup>
+    ) : (
+      <Button
+        bsStyle="warning"
         bsSize="xsmall"
-        title={<i className="fa fa-area-chart" />}
-        onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
-        onClick={toggleSpectraModal}
-        disabled={!spcInfo || !hasChemSpectra}
+        className="button-right"
+        onClick={confirmRegenerate}
+        disabled={false}
       >
-        <MenuItem
-          id="regenerate-spectra"
-          key="regenerate-spectra"
-          onSelect={(eventKey, event) => {
-            event.stopPropagation();
-            confirmRegenerate(event);
-          }}
-          disabled={!hasJcamp || !element.can_update}
+        <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
+      </Button>
+    )}
+    </OverlayTrigger>
+    {
+      hasNMRium ? (
+        <OverlayTrigger
+          placement="top"
+          delayShow={500}
+          overlay={<Tooltip id="spectra_nmrium_wrapper">Process with NMRium</Tooltip>}
         >
-          <i className="fa fa-refresh" /> Reprocess
-        </MenuItem>
-      </SplitButton>
-    </ButtonGroup>
-  ) : (
-    <Button
-      bsStyle="warning"
-      bsSize="xsmall"
-      className="button-right"
-      onClick={confirmRegenerate}
-      disabled={false}
-    >
-      <i className="fa fa-area-chart" /><i className="fa fa-refresh " />
-    </Button>
-  )}
-  </OverlayTrigger>
+          <ButtonGroup className="button-right">
+            <Button
+              id="spectra-editor-split-button"
+              pullRight
+              bsStyle="info"
+              bsSize="xsmall"
+              onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
+              onClick={toggleNMRDisplayerModal}
+              disabled={!hasJcamp || !element.can_update}
+            >
+              <i className="fa fa-bar-chart"/>
+            </Button>
+          </ButtonGroup>
+        </OverlayTrigger>
+      ) : null
+    }
+  </span>
 );
 
 SpectraEditorBtn.propTypes = {
@@ -96,6 +123,8 @@ SpectraEditorBtn.propTypes = {
   hasChemSpectra: PropTypes.bool,
   toggleSpectraModal: PropTypes.func.isRequired,
   confirmRegenerate: PropTypes.func.isRequired,
+  toggleNMRDisplayerModal: PropTypes.func.isRequired,
+  hasNMRium: PropTypes.bool,
 };
 
 SpectraEditorBtn.defaultProps = {
@@ -103,6 +132,8 @@ SpectraEditorBtn.defaultProps = {
   spcInfo: false,
   element: {},
   hasChemSpectra: false,
+  hasEditedJcamp: false,
+  hasNMRium: false,
 };
 
 export default class ReactionDetailsContainers extends Component {
@@ -192,13 +223,22 @@ export default class ReactionDetailsContainers extends Component {
       }
     };
     const spcInfo = BuildSpcInfos(reaction, container);
-    const { hasChemSpectra } = UIStore.getState();
+    const { hasChemSpectra, hasNmriumWrapper } = UIStore.getState();
     const toggleSpectraModal = (e) => {
       e.stopPropagation();
       SpectraActions.ToggleModal();
       SpectraActions.LoadSpectra.defer(spcInfo);
     };
 
+    //process open NMRium
+    const toggleNMRDisplayerModal = (e) => {
+      const spcInfosForNMRDisplayer = BuildSpcInfosForNMRDisplayer(reaction, container);
+      e.stopPropagation();
+      SpectraActions.ToggleModalNMRDisplayer();
+      SpectraActions.LoadSpectraForNMRDisplayer.defer(spcInfosForNMRDisplayer); // going to fetch files base on spcInfos
+    }
+
+    const hasNMRium = isNMRKind(container) && hasNmriumWrapper;
 
     return (
       <div className="upper-btn">
@@ -219,6 +259,8 @@ export default class ReactionDetailsContainers extends Component {
           hasChemSpectra={hasChemSpectra}
           toggleSpectraModal={toggleSpectraModal}
           confirmRegenerate={confirmRegenerate}
+          toggleNMRDisplayerModal={toggleNMRDisplayerModal}
+          hasNMRium={hasNMRium}
         />
       </div>
     );
@@ -388,6 +430,11 @@ export default class ReactionDetailsContainers extends Component {
                         handleSampleChanged={this.handleSpChange}
                         handleSubmit={this.props.handleSubmit}
                       />
+                      <NMRiumDisplayer
+                        sample={reaction}
+                        handleSampleChanged={this.handleSpChange}
+                        handleSubmit={this.props.handleSubmit}
+                      />
                     </Panel.Body>
                   </Panel>
                 );
diff --git a/spec/javascripts/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.spec.js b/spec/javascripts/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.spec.js
index c40df56297..48876bded4 100644
--- a/spec/javascripts/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.spec.js
+++ b/spec/javascripts/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.spec.js
@@ -18,6 +18,9 @@ import Reaction from 'src/models/Reaction';
 import Container from 'src/models/Container';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import ImageModal from 'src/components/common/ImageModal';
+import PrintCodeButton from 'src/components/common/PrintCodeButton';
+import ContainerComponent from 'src/components/container/ContainerComponent';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -62,6 +65,18 @@ describe('ReactionDetailsContainers', () => {
   describe('It has analyses', () => {
     let reaction = null;
 
+    const btnAdd = (
+      <div style={{ marginBottom: '10px' }}>
+      &nbsp;<Button
+          className="button-right"
+          bsSize="xsmall"
+          bsStyle="success"
+        >
+          Add analysis
+        </Button>
+      </div>
+    );
+
     beforeEach(() => {
       reaction = Reaction.buildEmpty();
     });
@@ -82,15 +97,7 @@ describe('ReactionDetailsContainers', () => {
       );
       const expectedValue = shallow(
         <div>
-          <div style={{ marginBottom: '10px' }}>
-          &nbsp;<Button
-              className="button-right"
-              bsSize="xsmall"
-              bsStyle="success"
-            >
-              Add analysis
-            </Button>
-          </div>
+          {btnAdd}
           <PanelGroup id="reaction-analyses-panel" defaultActiveKey={0} activeKey={0} accordion>
             <Panel
               eventKey={0}
@@ -114,5 +121,124 @@ describe('ReactionDetailsContainers', () => {
       );
       expect(wrapper.html()).toEqual(expectedValue.html());
     });
+
+    // it('Render with normal analysis', () => {
+    //   const analysis = Container.buildAnalysis();
+    //   reaction.container.children[0].children.push(analysis);
+
+    //   const wrapper = shallow(
+    //     <DndProvider backend={HTML5Backend}>
+    //       <ReactionDetailsContainers reaction={reaction} readOnly={false} />
+    //     </DndProvider>
+    //   );
+
+    //   const SpectraEditorBtn = (
+    //     <div class="button-right btn-group">
+    //       <div class="dropdown disabled btn-group btn-group-xs btn-group-info">
+    //         <button disabled type="button" class="btn btn-xs btn-info">
+    //           <i class="fa fa-area-chart"></i>
+    //         </button>
+    //         <button aria-label="[object Object]" id="spectra-editor-split-button" disabled role="button" aria-haspopup="true" aria-expanded="false" type="button" class="dropdown-toggle btn btn-xs btn-info"> <span class="caret"></span>
+    //         </button>
+    //         <ul role="menu" class="dropdown-menu dropdown-menu-right" aria-labelledby="spectra-editor-split-button">
+    //           <li role="presentation" class="disabled">
+    //             <a id="regenerate-spectra" role="menuitem" tabindex="-1" href="#">
+    //               <i class="fa fa-refresh"></i> Reprocess
+    //             </a>
+    //           </li>
+    //         </ul>
+    //       </div>
+    //     </div>
+    //   );
+
+    //   const headerBtnGroup = (
+    //     <div className="upper-btn">
+    //       <Button
+    //         bsSize="xsmall"
+    //         bsStyle="danger"
+    //         className="button-right"
+    //         disabled={false}
+    //       >
+    //         <i className="fa fa-trash" />
+    //       </Button>
+    //       <PrintCodeButton element={reaction} analyses={[analysis]} ident={analysis.id} />
+    //       {
+    //         SpectraEditorBtn
+    //       }
+    //       {/* <SpectraEditorBtn
+    //         element={reaction}
+    //         hasJcamp={hasJcamp}
+    //         spcInfo={spcInfo}
+    //         hasChemSpectra={hasChemSpectra}
+    //         toggleSpectraModal={toggleSpectraModal}
+    //         confirmRegenerate={confirmRegenerate}
+    //       /> */}
+    //     </div>
+    //   );
+      
+    //   const headerPanel = (
+    //     <div className="analysis-header order" style={{ width: '100%' }}>
+    //       <div className="preview">
+    //         <ImageModal
+    //           previewObject={{
+    //             src: '/images/wild_card/no_attachment.svg'
+    //           }}
+    //           popObject={{
+    //             title: analysis.name,
+    //             src: null,
+    //           }}
+    //         />
+    //       </div>
+    //       <div className="abstract">
+    //         {
+    //           headerBtnGroup
+    //         }
+    //         <div className="lower-text">
+    //           <div className="main-title">{analysis.name}</div>
+    //           <div className="sub-title">Type: {analysis.extended_metadata.kind}</div>
+    //           <div className="sub-title">Status: {analysis.extended_metadata.status} {''} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {''}</div>
+    //           <div className="desc sub-title">
+    //             <span style={{ float: 'left', marginRight: '5px' }}>
+    //               Content:
+    //             </span>
+    //             {/* <QuillViewer value={contentOneLine} /> */}
+    //             <span />
+    //           </div>
+
+    //         </div>
+    //       </div>
+    //     </div>
+    //   );
+
+    //   const expectedValue = shallow(
+    //     <DndProvider backend={HTML5Backend}>
+    //     <div>
+    //       {btnAdd}
+    //       <PanelGroup id="reaction-analyses-panel" defaultActiveKey={0} activeKey={0} accordion>
+    //         <Panel
+    //           eventKey={0}
+    //           key={`reaction_container_${analysis.id}`}
+    //         >
+    //           <Panel.Heading>
+    //             <Panel.Title toggle>
+    //               {headerPanel}
+    //             </Panel.Title>
+    //           </Panel.Heading>
+    //           <Panel.Body collapsible="true">
+    //             <ContainerComponent
+    //               disabled={false}
+    //               readOnly={false}
+    //               templateType="reaction"
+    //               container={analysis}
+    //             />
+    //             <div class="spectra-editor"></div>
+    //           </Panel.Body>
+    //         </Panel>
+    //       </PanelGroup>
+    //     </div></DndProvider>
+    //   );
+      
+    //   expect(wrapper.html()).toEqual(expectedValue.html());
+    // });
   });
 });