diff --git a/Makefile b/Makefile
index c614da9d7bb..670a8f6db42 100755
--- a/Makefile
+++ b/Makefile
@@ -97,6 +97,8 @@ locales:
 	msgfmt -o modules/genomic_browser/locale/ja/LC_MESSAGES/genomic_browser.mo modules/genomic_browser/locale/ja/LC_MESSAGES/genomic_browser.po
 	msgfmt -o modules/help_editor/locale/ja/LC_MESSAGES/help_editor.mo modules/help_editor/locale/ja/LC_MESSAGES/help_editor.po
 	msgfmt -o modules/imaging_browser/locale/ja/LC_MESSAGES/imaging_browser.mo modules/imaging_browser/locale/ja/LC_MESSAGES/imaging_browser.po
+	msgfmt -o modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.mo modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.po
+	npx i18next-conv -l hi -s modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.po -t modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.json
 	msgfmt -o modules/imaging_qc/locale/ja/LC_MESSAGES/imaging_qc.mo modules/imaging_qc/locale/ja/LC_MESSAGES/imaging_qc.po
 	msgfmt -o modules/imaging_uploader/locale/ja/LC_MESSAGES/imaging_uploader.mo modules/imaging_uploader/locale/ja/LC_MESSAGES/imaging_uploader.po
 	msgfmt -o modules/instrument_builder/locale/ja/LC_MESSAGES/instrument_builder.mo modules/instrument_builder/locale/ja/LC_MESSAGES/instrument_builder.po
diff --git a/modules/imaging_browser/jsx/CandidateScanQCSummaryWidget.js b/modules/imaging_browser/jsx/CandidateScanQCSummaryWidget.js
index 252b962e565..e064e05d329 100644
--- a/modules/imaging_browser/jsx/CandidateScanQCSummaryWidget.js
+++ b/modules/imaging_browser/jsx/CandidateScanQCSummaryWidget.js
@@ -2,6 +2,7 @@ import '../../../node_modules/c3/c3.css';
 import c3 from 'c3';
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
+import {useTranslation} from 'react-i18next';
 
 /**
  * A CandidateScanQCSummaryWidget is a type of React widget
@@ -12,6 +13,7 @@ import PropTypes from 'prop-types';
  * @return {*} - rendered React component
  */
 function CandidateScanQCSummaryWidget(props) {
+  const {t} = useTranslation(['imaging_browser', 'loris']);
   useEffect(() => {
     const modalities = getModalities(props.Files);
     const data = getDataObject(modalities, props.Files);
@@ -35,14 +37,14 @@ function CandidateScanQCSummaryWidget(props) {
           type: 'category',
           categories: visits,
           label: {
-            text: 'Visit',
+            text: t('Visit', {ns: 'loris'}),
             position: 'outer-center',
           },
         },
         y: {
           label: {
             position: 'outer-middle',
-            text: 'Number of Scans',
+            text: t('Number of Scans', {ns: 'imaging_browser'}),
           },
         },
       },
@@ -55,17 +57,21 @@ function CandidateScanQCSummaryWidget(props) {
   return <div>
     <div id='imagebreakdownchart' />
     <ul>
-      <li>Red bar denotes number of failed QC scans.</li>
-      <li>Green bar denotes number of passed QC scans.</li>
-      <li>Grey bar denotes other QC statuses.</li>
+      <li>{t('Red bar denotes number of failed QC scans.',
+        {ns: 'imaging_browser'})}</li>
+      <li>{t('Green bar denotes number of passed QC scans.',
+        {ns: 'imaging_browser'})}</li>
+      <li>{t('Grey bar denotes other QC statuses.',
+        {ns: 'imaging_browser'})}</li>
     </ul>
     <p>
-              Different shades represent different modalities.
-              Only native modalities are displayed in results.
+      {t('Different shades represent different modalities.'+
+        ' Only native modalities are displayed in results.',
+      {ns: 'imaging_browser'})}
     </p>
     <p>
-              Hover over any visit to see detailed modality breakdown for visit,
-              click to go to imaging browser.
+      {t('Hover over any visit to see detailed modality breakdown for visit,'+
+        ' click to go to imaging browser.', {ns: 'imaging_browser'})}
     </p>
   </div>;
 }
diff --git a/modules/imaging_browser/jsx/ImagePanel.js b/modules/imaging_browser/jsx/ImagePanel.js
index f6059c642dc..d4f5f023576 100644
--- a/modules/imaging_browser/jsx/ImagePanel.js
+++ b/modules/imaging_browser/jsx/ImagePanel.js
@@ -6,6 +6,7 @@
 
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {withTranslation} from 'react-i18next';
 
 /**
  * Image panel header component
@@ -25,14 +26,15 @@ class ImagePanelHeader extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     let QCStatusLabel;
-    if (this.props.QCStatus === 'Pass') {
+    if (this.props.QCStatus === t('Pass', {ns: 'imaging_browser'})) {
       QCStatusLabel = <span className="label label-success">
-        {this.props.QCStatus}
+        {t('Pass', {ns: 'imaging_browser'})}
       </span>;
-    } else if (this.props.QCStatus === 'Fail') {
+    } else if (this.props.QCStatus === t('Fail', {ns: 'imaging_browser'})) {
       QCStatusLabel = <span className="label label-danger">
-        {this.props.QCStatus}
+        {t('Fail', {ns: 'imaging_browser'})}
       </span>;
     }
 
@@ -65,7 +67,7 @@ class ImagePanelHeader extends Component {
           className="btn btn-default btn-xs dropdown-toggle"
           onClick={this.props.onToggleHeaders}
           aria-expanded={this.props.HeadersExpanded}>
-          Header Info
+          {t('Header Info', {ns: 'imaging_browser'})}
         </button>
         <span className="caret"></span>
       </div>
@@ -97,8 +99,12 @@ ImagePanelHeader.propTypes = {
   FileID: PropTypes.string,
   Filename: PropTypes.string,
   Expanded: PropTypes.bool,
+  t: PropTypes.func,
 };
 
+const TranslatedImagePanelHeader = withTranslation(
+  ['imaging_browser'])(ImagePanelHeader);
+
 /**
  * Image panel headers table component
  */
@@ -117,6 +123,7 @@ class ImagePanelHeadersTable extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     let inversionTime = null;
     if (this.props.HeaderInfo.InversionTime !== '0.00') {
       inversionTime = this.props.HeaderInfo.InversionTime + ' ms';
@@ -137,13 +144,15 @@ class ImagePanelHeadersTable extends Component {
       ">
         <tbody>
           <tr>
-            <th className="col-xs-2 info">Series Instance UID</th>
+            <th className="col-xs-2 info">{t('Series Instance UID',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-10" colSpan="5">
               {this.props.HeaderInfo.SeriesUID}
             </td>
           </tr>
           <tr>
-            <th className="col-xs-2 info">Voxel Size</th>
+            <th className="col-xs-2 info">{t('Voxel Size',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-6" colSpan="3">
               {this.props.HeaderInfo.XStep === '' ? ' ' : 'X: ' +
               this.props.HeaderInfo.XStep + ' mm, '}
@@ -152,74 +161,89 @@ class ImagePanelHeadersTable extends Component {
               {this.props.HeaderInfo.ZStep === '' ? ' ' : 'Z: ' +
               this.props.HeaderInfo.ZStep + ' mm '}
             </td>
-            <th className="col-xs-2 info">Output Type</th>
+            <th className="col-xs-2 info">{t('Output Type',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.OutputType}
             </td>
           </tr>
           <tr>
-            <th className="col-xs-2 info">Protocol</th>
+            <th className="col-xs-2 info">{t('Protocol',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.AcquisitionProtocol}
             </td>
-            <th className="col-xs-2 info">Acquisition Date</th>
+            <th className="col-xs-2 info">{t('Acquisition Date',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.AcquisitionDate}
             </td>
-            <th className="col-xs-2 info">Inserted Date</th>
+            <th className="col-xs-2 info">{t('Inserted Date',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.InsertedDate}
             </td>
           </tr>
           <tr>
-            <th className="col-xs-2 info">Series Number</th>
+            <th className="col-xs-2 info">{t('Series Number',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.SeriesNumber}
             </td>
-            <th className="col-xs-2 info">Series Description</th>
+            <th className="col-xs-2 info">{t('Series Description',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.SeriesDescription}
             </td>
-            <th className="col-xs-2 info">Slice Thick</th>
+            <th className="col-xs-2 info">{t('Slice Thick',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.SliceThickness} mm
             </td>
           </tr>
           <tr>
-            <th className="col-xs-2 info">TR</th>
+            <th className="col-xs-2 info">{t('TR',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.RepetitionTime} ms
             </td>
-            <th className="col-xs-2 info">TE</th>
+            <th className="col-xs-2 info">{t('TE',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.EchoTime} ms
             </td>
-            <th className="col-xs-2 info">TI</th>
+            <th className="col-xs-2 info">{t('TI',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {inversionTime}
             </td>
           </tr>
           <tr>
-            <th className="col-xs-2 info">Phase Encoding Direction</th>
+            <th className="col-xs-2 info">{t('Phase Encoding Direction',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.PhaseEncodingDirection}
             </td>
-            <th className="col-xs-2 info">Image Type</th>
+            <th className="col-xs-2 info">{t('Image Type',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.ImageType}
             </td>
-            <th className="col-xs-2 info">Echo Number</th>
+            <th className="col-xs-2 info">{t('Echo Number',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {this.props.HeaderInfo.EchoNumber}
             </td>
           </tr>
           <tr>
-            <th className="col-xs-2 info">Number of volumes</th>
+            <th className="col-xs-2 info">{t('Number of volumes',
+              {ns: 'imaging_browser'})}</th>
             <td className="col-xs-2">
               {numVolumes}
             </td>
             {this.props.HeaderInfo.ProcessingPipeline ?
-              <th className="col-xs-2 info">Processing Pipeline</th>
+              <th className="col-xs-2 info">{t('Processing Pipeline',
+                {ns: 'imaging_browser'})}</th>
               : null}
             {this.props.HeaderInfo.ProcessingPipeline ?
               <td className="col-xs-2">
@@ -227,7 +251,8 @@ class ImagePanelHeadersTable extends Component {
               </td>
               : null}
             {this.props.HeaderInfo.ProcDate ?
-              <th className="col-xs-2 info">Processing Pipeline Date</th>
+              <th className="col-xs-2 info">{t('Processing Pipeline Date',
+                {ns: 'imaging_browser'})}</th>
               : null }
             {this.props.HeaderInfo.ProcDate ?
               <td className="col-xs-2">
@@ -237,18 +262,21 @@ class ImagePanelHeadersTable extends Component {
           </tr>
           {this.props.HeaderInfo.ProcessingPipeline === 'DTIPrepPipeline' ?
             <tr>
-              <th className="col-xs-2 info">Number of rejected directions</th>
+              <th className="col-xs-2 info">{t('Number of rejected directions',
+                {ns: 'imaging_browser'})}</th>
               <td className="col-xs-2">
                 {this.props.HeaderInfo.TotalRejected}
               </td>
               <th className="col-xs-2 info">
-                Number of Interlace correlations
+                {t('Number of Interlace correlations',
+                  {ns: 'imaging_browser'})}
               </th>
               <td className="col-xs-2">
                 {this.props.HeaderInfo.InterlaceRejected}
               </td>
               <th className="col-xs-2 info">
-            Number of Gradient-wise correlations
+                {t('Number of Gradient-wise correlations',
+                  {ns: 'imaging_browser'})}
               </th>
               <td className="col-xs-2">
                 {this.props.HeaderInfo.IntergradientRejected}
@@ -258,7 +286,8 @@ class ImagePanelHeadersTable extends Component {
           {this.props.HeaderInfo.ProcessingPipeline === 'DTIPrepPipeline' ?
             <tr>
               <th className="col-xs-2 info">
-                Number of Slicewise correlations
+                {t('Number of Slicewise correlations',
+                  {ns: 'imaging_browser'})}
               </th>
               <td className="col-xs-2">
                 {this.props.HeaderInfo.SlicewiseRejected}
@@ -272,8 +301,11 @@ class ImagePanelHeadersTable extends Component {
 }
 ImagePanelHeadersTable.propTypes = {
   HeaderInfo: PropTypes.object,
+  t: PropTypes.func,
 };
 
+const TranslatedImagePanelHeadersTable = withTranslation(
+  ['imaging_browser'])(ImagePanelHeadersTable);
 
 /**
  * Image quality control dropdown component
@@ -344,8 +376,11 @@ ImageQCDropdown.propTypes = {
   FileID: PropTypes.string,
   FormName: PropTypes.string,
   defaultValue: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImageQCDropdown = withTranslation(
+  ['imaging_browser'])(ImageQCDropdown);
 
 /**
  * Image quality control static component
@@ -382,8 +417,11 @@ class ImageQCStatic extends Component {
 ImageQCStatic.propTypes = {
   defaultValue: PropTypes.string,
   Label: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImageQCStatic = withTranslation(
+  ['imaging_browser'])(ImageQCStatic);
 
 /**
  * Image panel quality control
@@ -404,26 +442,28 @@ class ImagePanelQCStatusSelector extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     let qcStatusLabel;
     if (this.props.HasQCPerm && this.props.FileNew) {
       qcStatusLabel = <span>
-                        QC Status <span className="text-info">
+        {t('QC Status', {ns: 'imaging_browser'})} <span className="text-info">
                              ( <span className="glyphicon glyphicon-star">
-          </span> New )
+          </span> {t('New', {ns: 'imaging_browser'})} )
         </span>
       </span>;
     } else {
-      qcStatusLabel = 'QC Status';
+      qcStatusLabel = t('QC Status', {ns: 'imaging_browser'});
     }
 
     return (
-      <ImageQCDropdown
+      <TranslatedImageQCDropdown
         Label={qcStatusLabel}
         FormName="status"
         FileID={this.props.FileID}
         editable={this.props.HasQCPerm}
         defaultValue={this.props.QCStatus}
-        options={{'': '', 'Pass': 'Pass', 'Fail': 'Fail'}}
+        options={{'': '', 'Pass': t('Pass', {ns: 'imaging_browser'}),
+          'Fail': t('Fail', {ns: 'imaging_browser'})}}
       />
     );
   }
@@ -433,8 +473,11 @@ ImagePanelQCStatusSelector.propTypes = {
   HasQCPerm: PropTypes.bool,
   QCStatus: PropTypes.string,
   FileID: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImagePanelQCStatusSelector = withTranslation(
+  ['imaging_browser'])(ImagePanelQCStatusSelector);
 
 /**
  * Image panel quality control
@@ -455,13 +498,15 @@ class ImagePanelQCSelectedSelector extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     return (
-      <ImageQCDropdown
-        Label="Selected"
+      <TranslatedImageQCDropdown
+        Label={t('Selected', {ns: 'imaging_browser'})}
         FormName="selectedvol"
         FileID={this.props.FileID}
         editable={this.props.HasQCPerm}
-        options={{'': '', 'true': 'True', 'false': 'False'}}
+        options={{'': '', 'true': t('True', {ns: 'imaging_browser'}),
+          'false': t('False', {ns: 'imaging_browser'})}}
         defaultValue={this.props.Selected}
       />
     );
@@ -471,8 +516,11 @@ ImagePanelQCSelectedSelector.propTypes = {
   FileID: PropTypes.string,
   HasQCPerm: PropTypes.bool,
   Selected: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImagePanelQCSelectedSelector = withTranslation(
+  ['imaging_browser'])(ImagePanelQCSelectedSelector);
 
 /**
  * Image panel quality control
@@ -493,6 +541,7 @@ class ImagePanelQCCaveatSelector extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     // Link caveat to MRI Violations if set true
     let mriViolationsLink = null;
     if (this.props.FullName && this.props.Caveat === '1') {
@@ -502,16 +551,16 @@ class ImagePanelQCCaveatSelector extends Component {
     }
 
     return (
-      <ImageQCDropdown
-        Label="Caveat"
+      <TranslatedImageQCDropdown
+        Label={t('Caveat', {ns: 'imaging_browser'})}
         FormName="caveat"
         FileID={this.props.FileID}
         editable={this.props.HasQCPerm && this.props.EditableCaveat}
         options={
           {
             '': '',
-            '1': 'True',
-            '0': 'False',
+            '1': t('True', {ns: 'imaging_browser'}),
+            '0': t('False', {ns: 'imaging_browser'}),
           }
         }
         defaultValue={this.props.Caveat}
@@ -527,8 +576,11 @@ ImagePanelQCCaveatSelector.propTypes = {
   Caveat: PropTypes.string,
   EditableCaveat: PropTypes.bool,
   FullName: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImagePanelQCCaveatSelector = withTranslation(
+  ['imaging_browser'])(ImagePanelQCCaveatSelector);
 
 /**
  * Image panel quality control SNR value component
@@ -548,12 +600,13 @@ class ImagePanelQCSNRValue extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     let label = null;
     if (this.props.SNR) {
-      label = 'SNR';
+      label = t('SNR', {ns: 'imaging_browser'});
     }
     return (
-      <ImageQCStatic
+      <TranslatedImageQCStatic
         Label={label}
         FormName="snr"
         FileID={this.props.FileID}
@@ -565,8 +618,11 @@ class ImagePanelQCSNRValue extends Component {
 ImagePanelQCSNRValue.propTypes = {
   FileID: PropTypes.string,
   SNR: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImagePanelQCSNRValue = withTranslation(
+  ['imaging_browser'])(ImagePanelQCSNRValue);
 
 /**
  * Image panel quality control panel component
@@ -588,18 +644,18 @@ class ImagePanelQCPanel extends Component {
   render() {
     return (
       <div className="form-group">
-        <ImagePanelQCStatusSelector
+        <TranslatedImagePanelQCStatusSelector
           FileID={this.props.FileID}
           HasQCPerm={this.props.HasQCPerm}
           QCStatus={this.props.QCStatus}
           FileNew={this.props.FileNew}
         />
-        <ImagePanelQCSelectedSelector
+        <TranslatedImagePanelQCSelectedSelector
           FileID={this.props.FileID}
           HasQCPerm={this.props.HasQCPerm}
           Selected={this.props.Selected}
         />
-        <ImagePanelQCCaveatSelector
+        <TranslatedImagePanelQCCaveatSelector
           FileID={this.props.FileID}
           HasQCPerm={this.props.HasQCPerm}
           Caveat={this.props.Caveat}
@@ -607,7 +663,7 @@ class ImagePanelQCPanel extends Component {
           EditableCaveat={this.props.EditableCaveat}
           FullName={this.props.FullName}
         />
-        <ImagePanelQCSNRValue
+        <TranslatedImagePanelQCSNRValue
           FileID={this.props.FileID}
           SNR={this.props.SNR}
         />
@@ -626,8 +682,11 @@ ImagePanelQCPanel.propTypes = {
   SNR: PropTypes.string,
   EditableCaveat: PropTypes.bool,
   FullName: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImagePanelQCPanel = withTranslation(
+  ['imaging_browser'])(ImagePanelQCPanel);
 
 /**
  * Download button component
@@ -647,6 +706,7 @@ class DownloadButton extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     const empty = (prop) => {
       return !prop || prop == '';
     };
@@ -663,7 +723,8 @@ class DownloadButton extends Component {
       <a href={url}
         className="btn btn-default" style={style}>
         <span className="glyphicon glyphicon-download-alt"></span>
-        <span className="hidden-xs">{this.props.Label}</span>
+        <span className="hidden-xs">{t('Download Image',
+          {ns: 'imaging_browser'})}</span>
       </a>
     );
   }
@@ -673,8 +734,11 @@ DownloadButton.propTypes = {
   BaseURL: PropTypes.string,
   Label: PropTypes.string,
   URL: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedDownloadButton = withTranslation(
+  ['imaging_browser'])(DownloadButton);
 
 /**
  * Image quality control comments button component
@@ -712,6 +776,7 @@ class ImageQCCommentsButton extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     if (!this.props.FileID || this.props.FileID === '') {
       return <span/>;
     }
@@ -722,7 +787,8 @@ class ImageQCCommentsButton extends Component {
       >
         <span className="text-default">
           <span className="glyphicon glyphicon-pencil"></span>
-          <span className="hidden-xs">QC Comments</span>
+          <span className="hidden-xs">{t('QC Comments',
+            {ns: 'imaging_browser'})}</span>
         </span>
       </a>
     );
@@ -731,8 +797,11 @@ class ImageQCCommentsButton extends Component {
 ImageQCCommentsButton.propTypes = {
   FileID: PropTypes.string,
   BaseURL: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImageQCCommentsButton = withTranslation(
+  ['imaging_browser'])(ImageQCCommentsButton);
 
 /**
  * Longitudinal view button component
@@ -768,6 +837,7 @@ class LongitudinalViewButton extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     if (!this.props.FileID || this.props.FileID === '') {
       return <span/>;
     }
@@ -778,7 +848,8 @@ class LongitudinalViewButton extends Component {
       >
         <span className="text-default">
           <span className="glyphicon glyphicon-eye-open"></span>
-          <span className="hidden-xs">Longitudinal View</span>
+          <span className="hidden-xs">{t('Longitudinal View',
+            {ns: 'imaging_browser'})}</span>
         </span>
       </a>
     );
@@ -788,8 +859,11 @@ LongitudinalViewButton.propTypes = {
   FileID: PropTypes.string,
   BaseURL: PropTypes.string,
   OtherTimepoints: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedLongitudinalViewButton = withTranslation(
+  ['imaging_browser'])(LongitudinalViewButton);
 
 /**
  * Image download buttons component
@@ -809,52 +883,54 @@ class ImageDownloadButtons extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     return (
       <div className="row mri-second-row-panel col-xs-12">
-        <ImageQCCommentsButton FileID={this.props.FileID}
+        <TranslatedImageQCCommentsButton FileID={this.props.FileID}
           BaseURL={this.props.BaseURL}
         />
-        <DownloadButton URL={this.props.APIFile}
-          Label='Download Image'
+        <TranslatedDownloadButton URL={this.props.APIFile}
+          Label={t('Download Image', {ns: 'imaging_browser'})}
           BaseURL={this.props.BaseURL}
         />
-        <DownloadButton FileName={this.props.XMLProtocol}
+        <TranslatedDownloadButton FileName={this.props.XMLProtocol}
           BaseURL={this.props.BaseURL}
-          Label="Download XML Protocol"
+          Label={t('Download XML Protocol', {ns: 'imaging_browser'})}
         />
-        <DownloadButton FileName={this.props.XMLReport}
+        <TranslatedDownloadButton FileName={this.props.XMLReport}
           BaseURL={this.props.BaseURL}
-          Label="Download XML Report"
+          Label={t('Download XML Report', {ns: 'imaging_browser'})}
         />
-        <DownloadButton FileName={this.props.NrrdFile}
+        <TranslatedDownloadButton FileName={this.props.NrrdFile}
           BaseURL={this.props.BaseURL}
-          Label="Download NRRD"
+          Label={t('Download NRRD', {ns: 'imaging_browser'})}
         />
         { this.props.NiiFile ?
-          <DownloadButton URL={this.props.APIFile + '/format/nifti'}
-            Label="Download NIfTI"
+          <TranslatedDownloadButton URL={this.props.APIFile + '/format/nifti'}
+            Label={t('Download NIfTI', {ns: 'imaging_browser'})}
           /> :
           null
         }
         {this.props.BvalFile ?
-          <DownloadButton URL={this.props.APIFile + '/format/bval'}
-            Label="Download BVAL"
+          <TranslatedDownloadButton URL={this.props.APIFile + '/format/bval'}
+            Label={t('Download BVAL', {ns: 'imaging_browser'})}
           /> :
           null
         }
         {this.props.BvecFile ?
-          <DownloadButton URL={this.props.APIFile + '/format/bvec'}
-            Label="Download BVEC"
+          <TranslatedDownloadButton URL={this.props.APIFile + '/format/bvec'}
+            Label={t('Download BVEC', {ns: 'imaging_browser'})}
           /> :
           null
         }
         {this.props.JsonFile ?
-          <DownloadButton URL={this.props.APIFile + '/format/bidsjson'}
-            Label="Download BIDS JSON"
+          <TranslatedDownloadButton URL=
+            {this.props.APIFile + '/format/bidsjson'}
+          Label={t('Download BIDS JSON', {ns: 'imaging_browser'})}
           /> :
           null
         }
-        <LongitudinalViewButton FileID={this.props.FileID}
+        <TranslatedLongitudinalViewButton FileID={this.props.FileID}
           BaseURL={this.props.BaseURL}
           OtherTimepoints={this.props.OtherTimepoints}
         />
@@ -875,8 +951,11 @@ ImageDownloadButtons.propTypes = {
   BvecFile: PropTypes.string,
   JsonFile: PropTypes.string,
   OtherTimepoints: PropTypes.string,
+  t: PropTypes.func,
 };
 
+const TranslatedImageDownloadButtons = withTranslation(
+  ['imaging_browser'])(ImageDownloadButtons);
 
 /**
  * Image panel body component
@@ -919,7 +998,7 @@ class ImagePanelBody extends Component {
             </a>
           </div>
           <div className="col-xs-3 mri-right-panel">
-            <ImagePanelQCPanel
+            <TranslatedImagePanelQCPanel
               FileID={this.props.FileID}
               FileNew={this.props.FileNew}
               HasQCPerm={this.props.HasQCPerm}
@@ -933,7 +1012,7 @@ class ImagePanelBody extends Component {
             />
           </div>
         </div>
-        <ImageDownloadButtons
+        <TranslatedImageDownloadButtons
           BaseURL={this.props.BaseURL}
           FileID={this.props.FileID}
           APIFile={this.props.APIFile}
@@ -946,7 +1025,7 @@ class ImagePanelBody extends Component {
           JsonFile={this.props.JsonFile}
           OtherTimepoints={this.props.OtherTimepoints}
         />
-        {this.props.HeadersExpanded ? <ImagePanelHeadersTable
+        {this.props.HeadersExpanded ? <TranslatedImagePanelHeadersTable
           HeaderInfo={this.props.HeaderInfo}/> : ''}
       </div>
     );
@@ -975,8 +1054,11 @@ ImagePanelBody.propTypes = {
   HeadersExpanded: PropTypes.bool,
   HeaderInfo: PropTypes.object,
   EditableCaveat: PropTypes.bool,
+  t: PropTypes.func,
 };
 
+const TranslatedImagePanelBody = withTranslation(
+  ['imaging_browser'])(ImagePanelBody);
 
 /**
  * Image panel component
@@ -1027,7 +1109,7 @@ class ImagePanel extends Component {
     return (
       <div className="col-xs-12 col-md-6">
         <div className="panel panel-default">
-          <ImagePanelHeader
+          <TranslatedImagePanelHeader
             FileID={this.props.FileID}
             Filename={this.props.Filename}
             QCStatus={this.props.QCStatus}
@@ -1037,7 +1119,7 @@ class ImagePanel extends Component {
             HeadersExpanded={!this.state.HeadersCollapsed}
           />
           {this.state.BodyCollapsed ? '' :
-            <ImagePanelBody
+            <TranslatedImagePanelBody
               BaseURL={this.props.BaseURL}
 
               FileID={this.props.FileID}
@@ -1095,40 +1177,41 @@ ImagePanel.propTypes = {
   HeadersExpanded: PropTypes.string,
   APIFile: PropTypes.string,
   EditableCaveat: PropTypes.bool,
+  t: PropTypes.func,
 };
 
 let RImagePanel = React.createFactory(ImagePanel);
 
-window.ImagePanelHeader = ImagePanelHeader;
-window.ImagePanelHeadersTable = ImagePanelHeadersTable;
-window.ImageQCDropdown = ImageQCDropdown;
-window.ImageQCStatic = ImageQCStatic;
-window.ImagePanelQCStatusSelector = ImagePanelQCStatusSelector;
-window.ImagePanelQCSelectedSelector = ImagePanelQCSelectedSelector;
-window.ImagePanelQCCaveatSelector = ImagePanelQCCaveatSelector;
-window.ImagePanelQCSNRValue = ImagePanelQCSNRValue;
-window.ImagePanelQCPanel = ImagePanelQCPanel;
-window.DownloadButton = DownloadButton;
-window.ImageQCCommentsButton = ImageQCCommentsButton;
-window.LongitudinalViewButton = LongitudinalViewButton;
-window.ImageDownloadButtons = ImageDownloadButtons;
-window.ImagePanelBody = ImagePanelBody;
+window.ImagePanelHeader = TranslatedImagePanelHeader;
+window.ImagePanelHeadersTable = TranslatedImagePanelHeadersTable;
+window.ImageQCDropdown = TranslatedImageQCDropdown;
+window.ImageQCStatic = TranslatedImageQCStatic;
+window.ImagePanelQCStatusSelector = TranslatedImagePanelQCStatusSelector;
+window.ImagePanelQCSelectedSelector = TranslatedImagePanelQCSelectedSelector;
+window.ImagePanelQCCaveatSelector = TranslatedImagePanelQCCaveatSelector;
+window.ImagePanelQCSNRValue = TranslatedImagePanelQCSNRValue;
+window.ImagePanelQCPanel = TranslatedImagePanelQCPanel;
+window.DownloadButton = TranslatedDownloadButton;
+window.ImageQCCommentsButton = TranslatedImageQCCommentsButton;
+window.LongitudinalViewButton = TranslatedLongitudinalViewButton;
+window.ImageDownloadButtons = TranslatedImageDownloadButtons;
+window.ImagePanelBody = TranslatedImagePanelBody;
 window.RImagePanel = RImagePanel;
 
 export default {
-  ImagePanelHeader,
-  ImagePanelHeadersTable,
-  ImageQCDropdown,
-  ImageQCStatic,
-  ImagePanelQCStatusSelector,
-  ImagePanelQCSelectedSelector,
-  ImagePanelQCCaveatSelector,
-  ImagePanelQCSNRValue,
-  ImagePanelQCPanel,
-  DownloadButton,
-  ImageQCCommentsButton,
-  LongitudinalViewButton,
-  ImageDownloadButtons,
-  ImagePanelBody,
+  ImagePanelHeader: TranslatedImagePanelHeader,
+  ImagePanelHeadersTable: TranslatedImagePanelHeadersTable,
+  ImageQCDropdown: TranslatedImageQCDropdown,
+  ImageQCStatic: TranslatedImageQCStatic,
+  ImagePanelQCStatusSelector: TranslatedImagePanelQCStatusSelector,
+  ImagePanelQCSelectedSelector: TranslatedImagePanelQCSelectedSelector,
+  ImagePanelQCCaveatSelector: TranslatedImagePanelQCCaveatSelector,
+  ImagePanelQCSNRValue: TranslatedImagePanelQCSNRValue,
+  ImagePanelQCPanel: TranslatedImagePanelQCPanel,
+  DownloadButton: TranslatedDownloadButton,
+  ImageQCCommentsButton: TranslatedImageQCCommentsButton,
+  LongitudinalViewButton: TranslatedLongitudinalViewButton,
+  ImageDownloadButtons: TranslatedImageDownloadButtons,
+  ImagePanelBody: TranslatedImagePanelBody,
   RImagePanel,
 };
diff --git a/modules/imaging_browser/jsx/imagingBrowserIndex.js b/modules/imaging_browser/jsx/imagingBrowserIndex.js
index bc46be9e89f..4ced759ada3 100644
--- a/modules/imaging_browser/jsx/imagingBrowserIndex.js
+++ b/modules/imaging_browser/jsx/imagingBrowserIndex.js
@@ -8,6 +8,8 @@ import PropTypes from 'prop-types';
 import Loader from 'Loader';
 import FilterableDataTable from 'FilterableDataTable';
 
+import hiStrings from '../locale/hi/LC_MESSAGES/imaging_browser.json';
+
 /**
  * Imaging browser index component
  */
@@ -26,6 +28,7 @@ class ImagingBrowserIndex extends Component {
     };
 
     this.fetchData = this.fetchData.bind(this);
+    this.formatColumn = this.formatColumn.bind(this);
   }
 
   /**
@@ -63,15 +66,16 @@ class ImagingBrowserIndex extends Component {
     // Set class to 'bg-danger' if file is hidden.
     const style = '';
     let result = <td className={style}>{cell}</td>;
+    const {t} = this.props;
     switch (column) {
-    case 'New Data':
+    case t('New Data', {ns: 'imaging_browser'}):
       if (cell === 'new') {
         result = (
-          <td className="newdata">NEW</td>
+          <td className="newdata">{t('NEW', {ns: 'imaging_browser'})}</td>
         );
       }
       break;
-    case 'Links':
+    case t('Links', {ns: 'imaging_browser'}):
       let cellTypes = cell.split(',');
       let cellLinks = [];
       for (let i = 0; i < cellTypes.length; i += 1) {
@@ -87,7 +91,7 @@ class ImagingBrowserIndex extends Component {
         '/imaging_browser/viewSession/?sessionID=' +
         row.SessionID +
         '&selectedOnly=1&backURL=/imaging_browser/'}>
-          selected
+        {t('selected', {ns: 'imaging_browser'})}
       </a>);
 
       cellLinks.push(' | ');
@@ -95,7 +99,7 @@ class ImagingBrowserIndex extends Component {
         '/imaging_browser/viewSession/?sessionID=' +
         row.SessionID +
         '&backURL=/imaging_browser/'}>
-          all types
+        {t('all types', {ns: 'imaging_browser'})}
       </a>);
       result = (<td>{cellLinks}</td>);
       break;
@@ -110,10 +114,12 @@ class ImagingBrowserIndex extends Component {
    * @return {JSX} - React markup for the component
    */
   render() {
+    const {t} = this.props;
     // If error occurs, return a message.
     // XXX: Replace this with a UI component for 500 errors.
     if (this.state.error) {
-      return <h3>An error occured while loading the page.</h3>;
+      return <h3>{t('An error occured while loading the page.',
+        {ns: 'imaging_browser'})}</h3>;
     }
 
     // Waiting for async data to load
@@ -128,61 +134,66 @@ class ImagingBrowserIndex extends Component {
     const options = this.state.data.fieldOptions;
     const configLabels = options.configLabels;
     const fields = [
-      {label: 'Site', show: true, filter: {
+      {label: t('Site', {ns: 'loris'}), show: true, filter: {
         name: 'site',
         type: 'select',
         options: options.sites,
       }},
-      {label: 'PSCID', show: true, filter: {
+      {label: t('PSCID', {ns: 'loris'}), show: true, filter: {
         name: 'PSCID',
         type: 'text',
       }},
-      {label: 'DCCID', show: true, filter: {
+      {label: t('DCCID', {ns: 'loris'}), show: true, filter: {
         name: 'DCCID',
         type: 'text',
       }},
-      {label: 'Project', show: true, filter: {
+      {label: t('Project', {ns: 'loris'}), show: true, filter: {
         name: 'project',
         type: 'select',
         options: options.projects,
       }},
-      {label: 'Visit Label', show: true, filter: {
+      {label: t('Visit Label', {ns: 'loris'}), show: true, filter: {
         name: 'visitLabel',
         type: 'text',
       }},
-      {label: 'Visit QC Status', show: true, filter: {
-        name: 'visitQCStatus',
-        type: 'select',
-        options: options.visitQCStatus,
-      }},
-      {label: 'First Acquisition', show: true},
-      {label: 'First Insertion', show: true},
-      {label: 'Last QC', show: true},
-      {label: 'New Data', show: true},
-      {label: 'Links', show: true},
-      {label: 'SessionID', show: false},
-      {label: 'Sequence Type', show: false, filter: {
-        name: 'sequenceType',
-        type: 'multiselect',
-        options: options.sequenceTypes,
-      }},
-      {label: 'Pending New', show: false, filter: {
-        name: 'pendingNew',
-        type: 'multiselect',
-        options: options.pendingNew,
-      }},
-      {label: 'Entity Type', show: false, filter: {
-        name: 'entityType',
-        type: 'multiselect',
-        options: options.entityType,
-      }},
+      {label: t('Visit QC Status', {ns: 'imaging_browser'}),
+        show: true, filter: {
+          name: 'visitQCStatus',
+          type: 'select',
+          options: options.visitQCStatus,
+        }},
+      {label: t('First Acquisition', {ns: 'imaging_browser'}), show: true},
+      {label: t('First Insertion', {ns: 'imaging_browser'}), show: true},
+      {label: t('Last QC', {ns: 'imaging_browser'}), show: true},
+      {label: t('New Data', {ns: 'imaging_browser'}), show: true},
+      {label: t('Links', {ns: 'imaging_browser'}), show: true},
+      {label: t('SessionID', {ns: 'imaging_browser'}), show: false},
+      {label: t('Sequence Type', {ns: 'imaging_browser'}),
+        show: false, filter: {
+          name: 'sequenceType',
+          type: 'multiselect',
+          options: options.sequenceTypes,
+        }},
+      {label: t('Pending New', {ns: 'imaging_browser'}),
+        show: false, filter: {
+          name: 'pendingNew',
+          type: 'multiselect',
+          options: options.pendingNew,
+        }},
+      {label: t('Entity Type', {ns: 'imaging_browser'}),
+        show: false, filter: {
+          name: 'entityType',
+          type: 'multiselect',
+          options: options.entityType,
+        }},
     ];
     /**
      * Adding columns based on the Imaging Browser Tabulated Scan Types
      * configured and stored in database
      */
     Object.values(configLabels).forEach((label)=> {
-      fields.push({label: label + ' QC Status', show: true}
+      fields.push({label: t(label + ' QC Status', {ns: 'imaging_browser'}),
+        show: true}
       );
     });
 
@@ -200,10 +211,12 @@ class ImagingBrowserIndex extends Component {
 
 ImagingBrowserIndex.propTypes = {
   dataURL: PropTypes.string.isRequired,
+  t: PropTypes.func,
 };
 
 window.addEventListener('load', () => {
   i18n.addResourceBundle('ja', 'imaging_browser', {});
+  i18n.addResourceBundle('hi', 'imaging_browser', hiStrings);
   const Index = withTranslation(
     ['imaging_browser', 'loris']
   )(ImagingBrowserIndex);
diff --git a/modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.po b/modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.po
new file mode 100644
index 00000000000..cf4e51ec71f
--- /dev/null
+++ b/modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.po
@@ -0,0 +1,115 @@
+# Default LORIS strings to be translated (English).
+# Copy this to a language specific file and add translations to the
+# new file.
+# Copyright (C) 2025
+# This file is distributed under the same license as the LORIS package.
+# Dave MacFarlane <dave.macfarlane@mcin.ca>, 2025.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: LORIS 27\n"
+"Report-Msgid-Bugs-To: https://github.com/aces/Loris/issues\n"
+"POT-Creation-Date: 2025-04-08 14:37-0400\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: hi\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+msgid "Imaging Browser"
+msgstr "इमेजिंग ब्राउज़र"
+
+msgid "View Session"
+msgstr "सत्र देखें"
+
+msgid "New and pending imaging session"
+msgstr "नई और लंबित इमेजिंग सत्र"
+
+msgid "New and pending imaging sessions"
+msgstr "नई और लंबित इमेजिंग सत्रों"
+
+msgid "Visit QC Status"
+msgstr "विजिट QC स्थिति"
+
+msgid "First Acquisition"
+msgstr "पहला अधिग्रहण"
+
+msgid "First Insertion"
+msgstr "पहला सम्मिलन"
+
+msgid "Last QC"
+msgstr "अंतिम QC"
+
+msgid "New Data"
+msgstr "नया डेटा"
+
+msgid "Links"
+msgstr "लिंक"
+
+msgid "SessionID"
+msgstr "सेशन आईडी"
+
+msgid "Sequence Type"
+msgstr "सीक्वेंस प्रकार"
+
+msgid "Pending New"
+msgstr "लंबित नया"
+
+msgid "Entity Type"
+msgstr "इकाई प्रकार"
+
+msgid "QC Status"
+msgstr "QC स्थिति"
+
+msgid "selected"
+msgstr "चयनित"
+
+msgid "all types"
+msgstr "सभी प्रकार"
+
+msgid "NEW"
+msgstr "नया"
+
+msgid "Pass"
+msgstr "पास"
+
+msgid "Fail"
+msgstr "फेल"
+
+msgid "Header Info"
+msgstr "हेडर जानकारी"
+
+msgid "Selected"
+msgstr "चयनित"
+
+msgid "Download Image"
+msgstr "इमेज डाउनलोड करें"
+
+msgid "Longitudinal View"
+msgstr "लंबवत दृश्य"
+
+msgid "QC Comments"
+msgstr "QC टिप्पणियाँ"
+
+msgid "Series Instance UID"
+msgstr "सीरीज इंस्टेंस UID"
+
+msgid "Number of Scans"
+msgstr "स्कैन की संख्या"
+
+msgid "Red bar denotes number of failed QC scans."
+msgstr "लाल बार असफल QC स्कैन की संख्या दर्शाता है।"
+
+msgid "Green bar denotes number of passed QC scans."
+msgstr "हरा बार पास किए गए QC स्कैन की संख्या दर्शाता है।"
+
+msgid "Grey bar denotes other QC statuses."
+msgstr "ग्रे बार अन्य QC स्थितियाँ दर्शाता है।"
+
+msgid "Different shades represent different modalities. Only native modalities are displayed in results."
+msgstr "विभिन्न शेड्स विभिन्न मोडैलिटी का प्रतिनिधित्व करते हैं। केवल मूल मोडैलिटी परिणामों में दिखाई जाती हैं।"
+
+msgid "Hover over any visit to see detailed modality breakdown for visit, click to go to imaging browser."
+msgstr "किसी भी विजिट पर होवर करें ताकि विजिट के लिए विस्तृत मोडैलिटी ब्रेकडाउन देखें, क्लिक करें और इमेजिंग ब्राउज़र पर जाएं।"
diff --git a/modules/imaging_browser/locale/imaging_browser.pot b/modules/imaging_browser/locale/imaging_browser.pot
index 85c635b9e04..6352643c682 100644
--- a/modules/imaging_browser/locale/imaging_browser.pot
+++ b/modules/imaging_browser/locale/imaging_browser.pot
@@ -29,3 +29,87 @@ msgstr ""
 
 msgid "New and pending imaging sessions"
 msgstr ""
+
+msgid "Visit QC Status"
+msgstr ""
+
+msgid "First Acquisition"
+msgstr ""
+
+msgid "First Insertion"
+msgstr ""
+
+msgid "Last QC"
+msgstr ""
+
+msgid "New Data"
+msgstr ""
+
+msgid "Links"
+msgstr ""
+
+msgid "SessionID"
+msgstr ""
+
+msgid "Sequence Type"
+msgstr ""
+
+msgid "Pending New"
+msgstr ""
+
+msgid "Entity Type"
+msgstr ""
+
+msgid "QC Status"
+msgstr ""
+
+msgid "selected"
+msgstr ""
+
+msgid "all types"
+msgstr ""
+
+msgid "NEW"
+msgstr ""
+
+msgid "Pass"
+msgstr ""
+
+msgid "Fail"
+msgstr ""
+
+msgid "Header Info"
+msgstr ""
+
+msgid "Selected"
+msgstr ""
+
+msgid "Download Image"
+msgstr ""
+
+msgid "Longitudinal View"
+msgstr ""
+
+msgid "QC Comments"
+msgstr ""
+
+msgid "Series Instance UID"
+msgstr ""
+
+msgid "Number of Scans"
+msgstr ""
+
+msgid "Red bar denotes number of failed QC scans."
+msgstr ""
+
+msgid "Green bar denotes number of passed QC scans."
+msgstr ""
+
+msgid "Grey bar denotes other QC statuses."
+msgstr ""
+
+msgid "Different shades represent different modalities. Only native modalities are displayed in results."
+msgstr ""
+
+msgid "Hover over any visit to see detailed modality breakdown for visit, click to go to imaging browser."
+msgstr ""