diff --git a/index.html b/index.html
index 1c3e4dd..7b80bde 100644
--- a/index.html
+++ b/index.html
@@ -195,7 +195,6 @@ <h1>Augmenta × Three.js</h1>
           <div class="sidebar-footer-subtitle">Real-time tracking debug viewer</div>
         </div>
         <div class="sidebar-footer-meta">
-          <span>Version 1.0.0</span>
           <a
             class="sidebar-footer-link"
             href="https://augmenta.tech"
@@ -206,6 +205,7 @@ <h1>Augmenta × Three.js</h1>
             <img src="./augmenta-favicon.png?v=4" alt="" width="16" height="16">
             <span>augmenta.tech</span>
           </a>
+          <span id="app-version">Version —</span>
         </div>
       </footer>
     </aside>
diff --git a/src/app-info.js b/src/app-info.js
new file mode 100644
index 0000000..9f4efd2
--- /dev/null
+++ b/src/app-info.js
@@ -0,0 +1 @@
+export const APP_VERSION = '1.3.2';
diff --git a/src/connection.js b/src/connection.js
index e804887..bbfb8a9 100644
--- a/src/connection.js
+++ b/src/connection.js
@@ -1,6 +1,7 @@
 import {
   AugmentaWebSocketClient, AxisMode, CoordinateSpace, OriginMode, RotationMode
 } from 'augmenta-client-sdk';
+import { APP_VERSION } from './app-info.js';
 
 const RECONNECT_DELAY_MS = 1000;
 const CONNECTION_ATTEMPT_TIMEOUT_MS = 2500;
@@ -156,7 +157,7 @@ export function createConnectionController({
     const connection = new AugmentaWebSocketClient(target.url, {
       clientName: 'Augmenta Three.js Debug Viewer',
       applicationName: 'Augmenta ThreeJS Example',
-      applicationVersion: '1.0.0',
+      applicationVersion: APP_VERSION,
       options: {
         version,
         downSample,
diff --git a/src/main.js b/src/main.js
index 6a8f77a..ee17f35 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,4 @@
+import { APP_VERSION } from './app-info.js';
 import { createConnectionController } from './connection.js';
 import { createSetupStore } from './setup-store.js';
 import { createViewer } from './viewer.js';
@@ -37,10 +38,12 @@ const ui = {
   sidebarToggle: $('#sidebar-toggle'), viewerTitle: $('.viewer-title'), connectionQrVisibility: $('.connection-qr-visibility'),
   connectionSection: $('#connection-section'), connectionAdvanced: $('#connection-advanced'), connectionAdvancedSummary: $('#connection-advanced-summary'),
   displaySection: $('#display-section'), displayAdvanced: $('#display-advanced'), displaySectionSummary: $('#display-section-summary'),
-  debugSection: $('#debug-section'),
+  debugSection: $('#debug-section'), appVersion: $('#app-version'),
   showClusters: $('#show-clusters'), showPoints: $('#show-points'), showScene: $('#show-scene'), showZones: $('#show-zones'), showVectors: $('#show-vectors')
 };
 
+ui.appVersion.textContent = `Version ${APP_VERSION}`;
+
 const viewer = createViewer($('#canvas-host'));
 const debug = createDebugPanel(ui.summary, ui.debug);
 
diff --git a/src/styles.css b/src/styles.css
index a147ab8..0606d14 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -155,10 +155,13 @@ button, input, select { font: inherit; }
 
 .sidebar-footer {
   margin-top: auto;
-  padding: 15px 18px 16px;
-  border-top: 1px solid #252a35;
+  padding: 22px 18px 16px;
   color: #8f99aa;
-  background: rgba(12, 15, 20, .3);
+  background: linear-gradient(
+    to bottom,
+    rgba(12, 15, 20, 0),
+    rgba(12, 15, 20, .58)
+  );
 }
 
 .sidebar-footer-app {
@@ -167,7 +170,7 @@ button, input, select { font: inherit; }
 }
 
 .sidebar-footer-title {
-  color: #dbe1eb;
+  color: #8f99aa;
   font-size: 11.5px;
   font-weight: 650;
   letter-spacing: .01em;
@@ -212,6 +215,7 @@ button, input, select { font: inherit; }
   width: 16px;
   height: 16px;
   object-fit: contain;
+  opacity: .68;
 }
 
 /* Desktop resize strip: invisible until the panel edge is hovered/focused. */