diff --git a/releasenotes/notes/add-version-8bdbea4be8e726dd.yaml b/releasenotes/notes/add-version-8bdbea4be8e726dd.yaml
new file mode 100644
index 00000000..8d70cafe
--- /dev/null
+++ b/releasenotes/notes/add-version-8bdbea4be8e726dd.yaml
@@ -0,0 +1,5 @@
+---
+fixes:
+  - |
+    Fixes `bug 1731972 <https://launchpad.net/bugs/1731972>`__
+    Add tripleo-ui version and git sha to debug modal
diff --git a/src/js/components/debug/DebugScreen.js b/src/js/components/debug/DebugScreen.js
index 2ce07214..204d3f31 100644
--- a/src/js/components/debug/DebugScreen.js
+++ b/src/js/components/debug/DebugScreen.js
@@ -24,6 +24,7 @@ import { CloseModalXButton } from '../ui/Modals';
 import LoggerActions from '../../actions/LoggerActions';
 import { InlineLoader } from '../ui/Loader';
 import { RoutedModal } from '../ui/Modals';
+import { getAppVersion, getAppVersionGitSha } from '../../selectors/appConfig';
 
 const messages = defineMessages({
   debugPageTitle: {
@@ -60,6 +61,14 @@ const messages = defineMessages({
   downloadError: {
     id: 'DebugScreen.error',
     defaultMessage: 'An error has occurred while preparing the log download.'
+  },
+  version: {
+    id: 'DebugScreen.version',
+    defaultMessage: 'Version'
+  },
+  gitSha: {
+    id: 'DebugScreen.gitSha',
+    defaultMessage: 'Git Sha'
   }
 });
 
@@ -120,6 +129,20 @@ class DebugScreen extends React.Component {
     );
   }
 
+  _renderVersion() {
+    const { version, gitSha } = this.props;
+    return (
+      <div>
+        <p>
+          <strong>
+            <FormattedMessage {...messages.version} />
+          </strong>
+          : {version} (<FormattedMessage {...messages.gitSha} />: {gitSha})
+        </p>
+      </div>
+    );
+  }
+
   render() {
     return (
       <RoutedModal bsSize="lg">
@@ -130,6 +153,7 @@ class DebugScreen extends React.Component {
           </ModalTitle>
         </ModalHeader>
         <ModalBody>
+          {this._renderVersion()}
           {this._renderDownloadButton()}
           {this._renderMessage()}
         </ModalBody>
@@ -140,15 +164,19 @@ class DebugScreen extends React.Component {
 
 DebugScreen.propTypes = {
   downloadLogs: PropTypes.func,
+  gitSha: PropTypes.string.isRequired,
   intl: PropTypes.object.isRequired,
   isDownloadingLogs: PropTypes.bool,
-  logsUrl: PropTypes.string
+  logsUrl: PropTypes.string,
+  version: PropTypes.string.isRequired
 };
 
 function mapStateToProps(state) {
   return {
+    gitSha: getAppVersionGitSha(state),
     isDownloadingLogs: state.logger.isDownloadingLogs,
-    logsUrl: state.logger.logsUrl
+    logsUrl: state.logger.logsUrl,
+    version: getAppVersion(state)
   };
 }
 
diff --git a/src/js/immutableRecords/appConfig.js b/src/js/immutableRecords/appConfig.js
index 577cb013..4e49cf8e 100644
--- a/src/js/immutableRecords/appConfig.js
+++ b/src/js/immutableRecords/appConfig.js
@@ -27,5 +27,7 @@ export const AppConfig = Record({
   zaqarDefaultQueue: 'tripleo',
   zaqarLoggerQueue: 'tripleo-ui-logging',
   excludedLanguages: List(),
-  loggers: List(['console', 'zaqar'])
+  loggers: List(['console', 'zaqar']),
+  version: undefined,
+  gitSha: undefined
 });
diff --git a/src/js/loaders/version.js b/src/js/loaders/version.js
index e9e7b6d9..74fb77ea 100644
--- a/src/js/loaders/version.js
+++ b/src/js/loaders/version.js
@@ -17,6 +17,8 @@
 'use strict';
 
 var fs = require('fs');
+var execSync = require('child_process').execSync;
+var trim = require('lodash').trim;
 
 function getVersion() {
   var packageContents = fs.readFileSync('./package.json', 'utf8');
@@ -24,15 +26,11 @@ function getVersion() {
   return packageJson.version;
 }
 
-function getStringToInput() {
-  let version = getVersion();
-  return `
-  window.tripleOUiConfig = window.tripleOUiConfig || {};
-  window.tripleOUiConfig.version = '${version}';
-  `;
+function getGitSha() {
+  return trim(execSync('git rev-parse --short HEAD', { encoding: 'utf8' }));
 }
 
-module.exports = function(content) {
-  content = content + getStringToInput();
-  return content;
+module.exports = {
+  version: JSON.stringify(getVersion()),
+  gitSha: JSON.stringify(getGitSha())
 };
diff --git a/src/js/selectors/appConfig.js b/src/js/selectors/appConfig.js
index 519d5a99..6048f352 100644
--- a/src/js/selectors/appConfig.js
+++ b/src/js/selectors/appConfig.js
@@ -26,3 +26,7 @@ export const getDefaultZaqarQueue = state =>
 
 export const getLoggingZaqarQueue = state =>
   state.appConfig.get('logger-zaqar-queue', 'tripleo-ui-logging');
+
+export const getAppVersion = state => state.appConfig.get('version');
+
+export const getAppVersionGitSha = state => state.appConfig.get('gitSha');
diff --git a/src/js/store.js b/src/js/store.js
index 0a6c8633..bc4416aa 100644
--- a/src/js/store.js
+++ b/src/js/store.js
@@ -28,6 +28,10 @@ import { InitialLoginState } from './immutableRecords/login';
 import { getIntl } from './selectors/i18n';
 
 const hydrateStore = () => {
+  // VERSION and GITSHA are populated by webpack
+  window.tripleOUiConfig.version = VERSION;
+  window.tripleOUiConfig.gitSha = GITSHA;
+
   return {
     appConfig: new AppConfig(window && fromJS(window.tripleOUiConfig)),
     plans: new InitialPlanState({
diff --git a/webpack.common.js b/webpack.common.js
index a1fa6cf7..5a6eeffe 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -15,9 +15,11 @@
  */
 
 require('es6-promise').polyfill(); // https://github.com/webpack/css-loader/issues/144
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const I18nPlugin = require('./src/js/plugins/i18n');
 const path = require('path');
+const version = require('./src/js/loaders/version');
 
 module.exports = {
   entry: __dirname + '/src/js/index.js',
@@ -28,6 +30,10 @@ module.exports = {
     sourceMapFilename: 'tripleo_ui.js.map'
   },
   plugins: [
+    new webpack.DefinePlugin({
+      VERSION: version.version,
+      GITSHA: version.gitSha
+    }),
     new HtmlWebpackPlugin({
       template: 'src/index.html',
       favicon: 'src/img/owl.png'
@@ -99,11 +105,6 @@ module.exports = {
       {
         test: /\.less$/,
         use: ['style-loader', 'css-loader', 'less-loader?sourceMap']
-      },
-
-      {
-        loader: __dirname + '/src/js/loaders/version.js',
-        test: /src\/js\/index.js$/
       }
     ]
   }