diff --git a/README.md b/README.md
index 2252a83f..36af87f3 100644
--- a/README.md
+++ b/README.md
@@ -22,4 +22,3 @@ npm run test:unit
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
-
diff --git a/package.json b/package.json
index 04a0f3a4..2d57cec7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "digitalconsumer.iss",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "eslintConfig": {
     "env": {
diff --git a/public/index.html b/public/index.html
index 5e2434b9..ced21a99 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,9 +3,10 @@
 
 <head>
   <script>
+    const buildVersion = '<%= __BUILD_INFO__.versionString %>';
+    const buildTime = '<%= __BUILD_INFO__.buildTime %>';
+    const buildTimeFull = '<%= __BUILD_INFO__.buildTimeFull %>';
     window.dataLayer = [{}];
-  </script>
-  <script>
     window.gm_authFailure = function () {
       console.error("Google Maps failed to authenticate! Check your API key or billing.");
       // Add your fallback logic here (e.g., show an error message, hide the map, or enable fallback inputs)
@@ -47,5 +48,4 @@
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>
-
 </html>
\ No newline at end of file
diff --git a/src/constants/experiments.js b/src/constants/experiments.js
index 1c0edd15..41a51f84 100644
--- a/src/constants/experiments.js
+++ b/src/constants/experiments.js
@@ -16,7 +16,8 @@ const experimentSettings = Object.freeze({
     ISS_MOBILE_FIRST_MAX_MOBILE_DAYS: 'MaxMobileDays',
     ISS_MOBILE_FIRST_MAX_PM_MOBILE_DAYS: 'MaxPmMobileDays',
     ISS_MOBILE_FIRST_SHOW_FIRST_MOBILE_APPOINTMENT: 'ShowMobileFirstAppointment',
-    ISS_ENABLE_ADYEN_V1: 'ISS_Enable_Adyen_V1'
+    ISS_ENABLE_ADYEN_V1: 'ISS_Enable_Adyen_V1',
+    MSR_SPLIT_PAY_ENABLED: 'EnableMSRSplitPay'
 });
 
 const experimentTest = Object.freeze({
diff --git a/src/helpers/logger.js b/src/helpers/logger.js
index e583f7c1..b07013f9 100644
--- a/src/helpers/logger.js
+++ b/src/helpers/logger.js
@@ -51,6 +51,8 @@ export class Logger {
 
         return [
             `Application: ${applicationConfig.APPLICATION_NAME}`,
+            `Build Version: ${store.issConfig?.buildInfo?.versionString}`,
+            `Build Time: ${store.issConfig?.buildInfo?.buildTimeLocal}`,
             `ClientTag: ${store.issConfig?.clientTag}`,
             `ParentAccountNumber: ${store.issConfig?.parentAccountNumber}`,
             `ClientName: ${store.issConfig?.clientName}`,
diff --git a/src/helpers/recal-helper.js b/src/helpers/recal-helper.js
index 029aee25..0bb650ff 100644
--- a/src/helpers/recal-helper.js
+++ b/src/helpers/recal-helper.js
@@ -1,3 +1,4 @@
+import partNumberStrings from '@/constants/part-number-strings';
 import partTypeStrings from '@/constants/part-type-strings';
 import { deepClone, getNonFalseValuesOfPropertyInArrayOfObjects } from '@/helpers/object-helper';
 
@@ -117,3 +118,7 @@ export function anyPartWithRequiresRecalFlag(lineItems) {
 
     return flattened.some((li) => li.requiresRecalibration === true);
 }
+
+export function hasMSRPart(lineItems) {
+    return lineItems?.feeItems?.some((item) => item.partNumber === partNumberStrings.RECAL_MOBILEDUAL || item.partNumber === partNumberStrings.RECAL_MOBILE) ?? false
+}
diff --git a/src/iss-components/cart-dropdown/cart-dropdown.spec.js b/src/iss-components/cart-dropdown/cart-dropdown.spec.js
index 16692604..1efd6907 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.spec.js
+++ b/src/iss-components/cart-dropdown/cart-dropdown.spec.js
@@ -13,6 +13,7 @@ import { getPriceOfLineItems } from '@/helpers/price-calculator.js';
 import coverageStatuses from '@/constants/coverage-statuses';
 import coverageType from '@/constants/coverage-type';
 import * as cartHelper from '@/helpers/cart-helper';
+import { experimentSettings } from '@/constants/experiments';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 
@@ -30,7 +31,7 @@ jest.mock('@/helpers/service-package-helper', () => ({
     getPackageContents: jest.fn()
 }));
 
-function getMountedComponent(mainInitialState = {}, initialData = {}, propsData = {}) {
+function getMountedComponent(mainInitialState = {}, initialData = {}, propsData = {}, experimentMockFunction = jest.fn(() => 'false')) {
     const mountOptions = getMountOptions({
         router: {
             navigate: jest.fn()
@@ -44,7 +45,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, propsData
     });
     useMainStore(testingPinia);
 
-    mountOptions.global.mixins[0].methods.getSettingValue = jest.fn(() => 'false');
+    mountOptions.global.mixins[0].methods.getSettingValue = experimentMockFunction;
     mountOptions.global.plugins = [testingPinia];
     mountOptions.data = () => (initialData);
     mountOptions.propsData = propsData;
@@ -804,12 +805,16 @@ describe('cart-dropdown component', () => {
                     partType: partTypeStrings.REPLACE_FEE
                 }));
             });
-            test('when mobileFee, includes mobile fee', () => {
+            test('when mobile fee should be included, includes mobile fee', () => {
                 // Arrange
                 const storeData = {
                     order: {
                         lineItems: {
-                            feeItems: [{ partType: partTypeStrings.MOBILE_FEE }]
+                            feeItems: [{ partType: partTypeStrings.MOBILE_FEE, sellingPrice: 123}]
+                        },
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.NO_COMP
                         }
                     }
                 };
@@ -977,6 +982,153 @@ describe('cart-dropdown component', () => {
                 expect(result.name).toBe(expectedName);
             });
         });
+        describe('includeMobileFeeInCart', () => {
+            test('returns false with no mobile fee', () => {
+                // Arrange
+                const storeData = {
+                    order: {
+                        lineItems: {
+                            feeItems: []
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData);
+
+                // Act
+                const result = wrapper.vm.includeMobileFeeInCart;
+
+                // Assert
+                expect(result).toBe(false);
+            });
+
+            test('returns false with a mobile fee with no price', () => {
+                // Arrange
+                const storeData = {
+                    order: {
+                        lineItems: {
+                            feeItems: [{ partType: partTypeStrings.MOBILE_FEE, price: 0 }]
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData);
+
+                // Act
+                const result = wrapper.vm.includeMobileFeeInCart;
+
+                // Assert
+                expect(result).toBe(false);
+            });
+
+            test('returns true for priced mobile fee for No Comp', () => {
+                // Arrange
+                const storeData = {
+                    order: {
+                        lineItems: {
+                            feeItems: [{ partType: partTypeStrings.MOBILE_FEE, price: 100 }]
+                        },
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.NO_COMP
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData);
+
+                // Act
+                const result = wrapper.vm.includeMobileFeeInCart;
+
+                // Assert
+                expect(result).toBe(true);
+            });
+
+            test('returns true for priced mobile fee for ITAC', () => {
+                // Arrange
+                const storeData = {
+                    order: {
+                        lineItems: {
+                            feeItems: [{ partType: partTypeStrings.MOBILE_FEE, price: 100 }]
+                        },
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.ITAC
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData);
+
+                // Act
+                const result = wrapper.vm.includeMobileFeeInCart;
+
+                // Assert
+                expect(result).toBe(true);
+            });
+
+            test('returns false for priced mobile fee for Deductible without Split Pay', () => {
+                // Arrange
+                const storeData = {
+                    order: {
+                        lineItems: {
+                            feeItems: [{ partType: partTypeStrings.MOBILE_FEE, price: 100 }]
+                        },
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.Deductible
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData);
+
+                // Act
+                const result = wrapper.vm.includeMobileFeeInCart;
+
+                // Assert
+                expect(result).toBe(false);
+            });
+
+            test('returns false for priced mobile fee for Deductible with Split Pay and isInsurable=true', () => {
+                // Arrange
+                const storeData = {
+                    order: {
+                        lineItems: {
+                            feeItems: [{ partType: partTypeStrings.MOBILE_FEE, price: 100, isInsurable: true }]
+                        },
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.Deductible
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData, {}, {}, (settingName) => (settingName === experimentSettings.MSR_SPLIT_PAY_ENABLED).toString());
+
+                // Act
+                const result = wrapper.vm.includeMobileFeeInCart;
+
+                // Assert
+                expect(result).toBe(false);
+            });
+
+            test('returns true for priced mobile fee for Deductible with Split Pay and isInsurable=false', () => {
+                // Arrange
+                const storeData = {
+                    order: {
+                        lineItems: {
+                            feeItems: [{ partType: partTypeStrings.MOBILE_FEE, price: 100, isInsurable: false }]
+                        },
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.Deductible
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData, {}, {}, (settingName) => (settingName === experimentSettings.MSR_SPLIT_PAY_ENABLED).toString());
+
+                // Act
+                const result = wrapper.vm.includeMobileFeeInCart;
+
+                // Assert
+                expect(result).toBe(true);
+            });
+        });
     });
     describe('method', () => {
         const dollarAmount = '$84.00';
diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 19a7fe71..9572f9af 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -146,6 +146,8 @@ import {
 } from '@/helpers/cart-helper';
 import { getPriceOfLineItem, getPriceOfLineItems, getTaxOfLineItems } from '@/helpers/price-calculator';
 import { processIfStatements } from '@/helpers/cms-content-helper';
+import partNumberStrings from '@/constants/part-number-strings';
+import { hasMSRPart } from '@/helpers/recal-helper';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 const ADVANCED_MOBILE_MODAL_REF_NAME = 'advancedMobileModal';
@@ -229,7 +231,8 @@ export default {
         servicePrice() {
             const price = getPriceOfLineItems(getServiceLineItems(this.cartOrder)) ?? 0;
             const recycleFee = this.recycleFeeLineItem ? getPriceOfLineItem(this.recycleFeeLineItem) : 0;
-            return price - this.recalibrationPrice - recycleFee;
+            const mobileFee = this.mobileFeeCartItem ? this.mobileFeeCartItem.subTotal : 0;
+            return price - this.recalibrationPrice - recycleFee - mobileFee;
         },
         isUnverified() {
             return isOrderUnverified(this.cartOrder);
@@ -270,7 +273,6 @@ export default {
         cartItems() {
             const items = [];
             const isRecycleFeeHidden = this.getSettingValue(experimentSettings.ISS_FEATURE_TOGGLE_IS_RECYCLE_FEE_HIDDEN) === 'true';
-            const isMobileFeeHidden = this.getSettingValue(experimentSettings.ISS_FEATURE_TOGGLE_IS_MOBILE_FEE_HIDDEN) === 'true';
             if (this.isITAC || this.isNoComp) {
                 items.push(this.warrantyCartItem);
             }
@@ -291,7 +293,7 @@ export default {
                 }
             });
             items.push(...vapsCartItems.filter((item) => item != null));
-            if (this.mobileFeeCartItem && !isMobileFeeHidden && !this.mobileFeeCartItem.isInsurable) {
+            if (this.includeMobileFeeInCart) {
                 items.push(this.mobileFeeCartItem);
             }
             return items;
@@ -380,6 +382,34 @@ export default {
             return {
                 feeAmount: this.mobileFeeCartItem ? formatAmountInDollars(this.mobileFeeCartItem.subTotal) : ''
             }
+        },
+        hasMSRPart() {
+            return hasMSRPart(this.cartOrder.lineItems);
+        },
+        includeMobileFeeInCart() {
+            if (!this.mobileFeeCartItem || this.mobileFeeCartItem.subTotal === 0) {
+                return false;
+            }
+
+            const isMobileFeeHidden = this.getSettingValue(experimentSettings.ISS_FEATURE_TOGGLE_IS_MOBILE_FEE_HIDDEN) === 'true';
+            if (isMobileFeeHidden) {
+                return false;
+            }
+
+            if (this.isITAC || this.isNoComp) {
+                return true;
+            }
+
+            const isSplitPayEnabled = this.getSettingValue(experimentSettings.MSR_SPLIT_PAY_ENABLED) === 'true';
+            if (!isSplitPayEnabled) {
+                return false;
+            }
+
+            if (!this.mobileFeeCartItem.isInsurable) {
+                return true;
+            }
+
+            return false;
         }
     },
     methods: {
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index 2af0960d..1f5c6304 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -17,12 +17,11 @@
                         ref="siteSubHeader"
                         class="subheader"
                         :cmsWidgetName="widget.siteSubHeader" />
-                    <!-- TO DO: Use MSR appointment information for MSR -->
                     <alert
                         ref="appointmentInformationAlert"
                         isCollapsible
                         alertClass="alert-warning"
-                        :cmsWidgetName="widget.appointmentInformation" />
+                        :cmsWidgetName="appointmentInformationWidget" />
                     <checkbox
                         v-if="showSameAsPolicyAddressQuestion"
                         ref="sameAsPolicyAddressQuestion"
@@ -135,6 +134,7 @@ import widgetFields from '@/constants/cms-widget-fields';
 import states from '@/constants/states';
 import applicationConfig from '@/constants/application-config';
 import { vehicleProtectedAnswers } from '@/constants/contact-details';
+import { hasMSRPart } from '@/helpers/recal-helper';
 
 // DEFINE VALIDATION RULES
 defineRule('street-address-required', required(errorMessages.SERVICE_ADDRESS_REQUIRED));
@@ -228,6 +228,9 @@ export default {
                 return acc;
             }, {});
         },
+        appointmentInformationWidget() {
+           return hasMSRPart(useMainStore().lineItems) ? this.widget.MSRAppointmentInformation : this.widget.appointmentInformation;
+        }
     },
     watch: {
         isSameAsPolicyAddress(newValue) {
diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index 93cb9a38..c02b2f24 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -97,8 +97,6 @@
                         class="cart-dropdown"
                         :showAsPaid="payment.isPayInAdvance"
                         :readOnly="true"
-                        recyclingModalCmsWidgetName="RecycleModal"
-                        servicePackageTitleWidgetName="ServicePackageTitle"
                         :submittedOrder="submittedOrder" />
                 </div>
             </div>
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 31b09b27..d289df4f 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -33,8 +33,6 @@
                             <cartDropdown
                                 :showAsPaid="false"
                                 :readOnly="false"
-                                recyclingModalCmsWidgetName="RecycleModal"
-                                servicePackageTitleWidgetName="ServicePackageTitle"
                                 @switchToInShop="handleSwitchToInShop" />
                         </div>
                         <alert
@@ -303,7 +301,9 @@ export default {
             return MaskaFormattedMasks.PHONE_NUMBER;
         },
         offerWipers() {
-            return !this.mainStore.lineItems.vaps?.some((part) => part.partType.toLowerCase().includes('wiper'));
+            const orderHasWipers = this.mainStore.lineItems.vaps?.some((part) => part.partType.toLowerCase().includes('wiper'));
+            const wipersAvailable = this.mainStore.order.availableVaps?.some((part) => part.partType.toLowerCase().includes('wiper'));
+            return !orderHasWipers && wipersAvailable;
         },
         wiperOfferPanel() {
             const wiperImage = this.getCmsContent(this.widget.wiperOffer, widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
diff --git a/src/layouts/payment-page-adyen/payment-page-adyen.vue b/src/layouts/payment-page-adyen/payment-page-adyen.vue
index 2d346efa..e5bd4031 100644
--- a/src/layouts/payment-page-adyen/payment-page-adyen.vue
+++ b/src/layouts/payment-page-adyen/payment-page-adyen.vue
@@ -26,9 +26,7 @@
                                 ref="cart"
                                 class="cart-dropdown-component"
                                 :readOnly="true"
-                                :showAsPaid="false"
-                                recyclingModalCmsWidgetName="RecycleModal"
-                                servicePackageTitleWidgetName="ServicePackageTitle" />
+                                :showAsPaid="false" />
                         </div>
                     </div>
                 </div>
diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index d116b502..9f936bb8 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -45,9 +45,7 @@
                                 ref="cart"
                                 class="cart-dropdown-component"
                                 :readOnly="true"
-                                :showAsPaid="false"
-                                recyclingModalCmsWidgetName="RecycleModal"
-                                servicePackageTitleWidgetName="ServicePackageTitle" />
+                                :showAsPaid="false" />
                         </div>
                         <div class="d-none d-lg-block">
                             <buttonMain
diff --git a/src/store/index.js b/src/store/index.js
index 0dbf8c29..e43f60d3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -269,6 +269,7 @@ export const getDefaultState = () => ({
             policyZipCode: null,
             dateOfLoss: null
         },
+        buildInfo: (typeof __BUILD_INFO__ !== 'undefined') ? __BUILD_INFO__ : null, // Contains the build info for the website, set during the build process. Version, Time, Git info etc....
         siteType: null, // SiteType / SubType the site is set to (Essential/Advanced).
         enableNoCompQuote: false
     }
@@ -572,7 +573,8 @@ export const useMainStore = defineStore({
                         policyNumber: policy.policyNumber,
                         dateOfLoss: policy.dateOfLoss,
                         zipCode: policy.policyZipCode,
-                        referralCorrelationId: order.referralCorrelationId
+                        referralCorrelationId: order.referralCorrelationId,
+                        referralNumber: order.referralNumber
                     },
                     bailoutOnError: false
                 });
@@ -2258,6 +2260,8 @@ export const useMainStore = defineStore({
             this.issConfig.siteType = null;
             this.issConfig.enableNoCompQuote = false;
             this.issConfig.billToAccountNumber = null;
+
+            // NOTE: Do not wipe out build info.
         },
 
         disableKeyFields() {
diff --git a/vue.config.js b/vue.config.js
index d9d97c60..4ef988a9 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,6 @@
+const { execSync } = require('child_process');
+const pkg = require('./package.json');
+
 process.env.VUE_APP_CONSUMER_CF_DISTRO = 'https://digitalapi.dev.safelite.io';
 process.env.VUE_APP_CURRENT_ENVIRONMENT = 'Localhost';
 process.env.VUE_APP_CUSTOMER_PORTAL_URL = 'https://myaccountdev.safelite.com/';
@@ -15,6 +18,35 @@ process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC =
 process.env.VUE_APP_GOOGLE_MAPS_API_SCRIPT =
     "(g=>{var h,a,k,p='The Google Maps JavaScript API',c='google',l='importLibrary',q='__ib__',m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement('script'));e.set('libraries',[...r]+'');for(k in g)e.set(k.replace(/[A-Z]/g,t=>'_'+t[0].toLowerCase()),g[k]);e.set('callback',c+'.maps.'+q);a.src=`https://maps.googleapis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+' could not load.'));a.nonce=m.querySelector('script[nonce]')?.nonce||'';m.head.append(a)}));d[l]?console.warn(p+' only loads once. Ignoring:',g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({key: 'AIzaSyCuLhQcDdZTTb4JzpUFms1OCch2dk5lHF0', v: 'weekly'});";
 
+function safeExec(cmd, fallback = 'unknown') {
+    try {
+        return execSync(cmd).toString().trim();
+    } catch {
+        return fallback;
+    }
+}
+
+const gitInfo = {
+    commit: safeExec('git rev-parse --short HEAD', 'dev'),
+    branch: safeExec('git rev-parse --abbrev-ref HEAD', 'unknown')
+};
+
+const buildTimes = {
+    buildTime: new Date().toUTCString(),
+    buildTimeFull: new Date().toISOString(),
+    buildTimeStamp: Math.floor(Date.now() / 1000)
+}
+
+const buildInfo = {
+    version: pkg.version,
+    ...gitInfo,
+    ...buildTimes,
+    versionString: `${pkg.version}-${gitInfo.commit}-${buildTimes.buildTimeStamp}-${gitInfo.branch}`
+};
+
+// This will be replaced by the actual build info during the build process via webpack.DefinePlugin in this config file.
+__BUILD_INFO__ = buildInfo;
+
 module.exports = {
     publicPath: '/',
     css: {
@@ -32,7 +64,12 @@ module.exports = {
             }
         }
     },
-    configureWebpack: {
-        devtool: 'source-map'
+    configureWebpack: {        
+        devtool: 'source-map',
+        plugins: [
+            new (require('webpack')).DefinePlugin({
+                __BUILD_INFO__: JSON.stringify(buildInfo)
+            })
+        ]
     }
 };
diff --git a/vue.release.config.js b/vue.release.config.js
index 43abce0e..dbae4b9a 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -1,3 +1,6 @@
+const { execSync } = require('child_process');
+const pkg = require('./package.json');
+
 process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__";
 process.env.VUE_APP_CURRENT_ENVIRONMENT = "__VUE_APP_CURRENT_ENVIRONMENT__";
 process.env.VUE_APP_CUSTOMER_PORTAL_URL = '__VUE_APP_CUSTOMER_PORTAL_URL__';
@@ -11,6 +14,35 @@ process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAG
 process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC = "__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__"
 process.env.VUE_APP_GOOGLE_MAPS_API_SCRIPT = "__VUE_APP_GOOGLE_MAPS_API_SCRIPT__";
 
+function safeExec(cmd, fallback = 'unknown') {
+    try {
+        return execSync(cmd).toString().trim();
+    } catch {
+        return fallback;
+    }
+}
+
+const gitInfo = {
+    commit: safeExec('git rev-parse --short HEAD', 'dev'),
+    branch: safeExec('git rev-parse --abbrev-ref HEAD', 'unknown')
+};
+
+const buildTimes = {
+    buildTime: new Date().toUTCString(),
+    buildTimeFull: new Date().toISOString(),
+    buildTimeStamp: Math.floor(Date.now() / 1000)
+}
+
+const buildInfo = {
+    version: pkg.version,
+    ...gitInfo,
+    ...buildTimes,
+    versionString: `${pkg.version}-${gitInfo.commit}-${buildTimes.buildTimeStamp}-${gitInfo.branch}`
+};
+
+// This will be replaced by the actual build info during the build process via webpack.DefinePlugin in this config file.
+__BUILD_INFO__ = buildInfo;
+
 module.exports = {
   publicPath: "/",
   css: {
@@ -29,6 +61,11 @@ module.exports = {
     },
   },
   configureWebpack: {
-    devtool: 'source-map'
+    devtool: 'source-map',
+    plugins: [
+      new (require('webpack')).DefinePlugin({
+          __BUILD_INFO__: JSON.stringify(buildInfo)
+      })
+    ]
   },
 };
