diff --git a/src/assets/img/tints/BackGlass-BlueShade-BlueTint.svg b/src/assets/img/tints/BackGlass-BlueShade-BlueTint.svg
new file mode 100644
index 000000000..007c490f0
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-BlueShade-BlueTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8976)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8976" x1="51.9586" y1="33.0102" x2="51.9586" y2="6.98049" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CADCDD"/>
+<stop offset="0.2653" stop-color="#C8DBDC"/>
+<stop offset="0.3972" stop-color="#C0D6D7"/>
+<stop offset="0.4996" stop-color="#B3CDD0"/>
+<stop offset="0.5869" stop-color="#A0C1C5"/>
+<stop offset="0.6645" stop-color="#88B1B8"/>
+<stop offset="0.7353" stop-color="#6A9EA7"/>
+<stop offset="0.8009" stop-color="#468793"/>
+<stop offset="0.8607" stop-color="#1E6D7C"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-BlueShade-BrownTint.svg b/src/assets/img/tints/BackGlass-BlueShade-BrownTint.svg
new file mode 100644
index 000000000..d1ffeb8e0
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-BlueShade-BrownTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_9006)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_9006" x1="51.9586" y1="33.0065" x2="51.9586" y2="6.97682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0CDC2"/>
+<stop offset="0.2632" stop-color="#CECCC1"/>
+<stop offset="0.394" stop-color="#C6C8BE"/>
+<stop offset="0.4956" stop-color="#B9C0B8"/>
+<stop offset="0.5823" stop-color="#A6B6B1"/>
+<stop offset="0.6593" stop-color="#8EA8A6"/>
+<stop offset="0.7295" stop-color="#70989A"/>
+<stop offset="0.7947" stop-color="#4C848B"/>
+<stop offset="0.854" stop-color="#246E7A"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-BlueShade-GrayTint.svg b/src/assets/img/tints/BackGlass-BlueShade-GrayTint.svg
new file mode 100644
index 000000000..417ce474d
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-BlueShade-GrayTint.svg
@@ -0,0 +1,19 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8763)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8763" x1="51.9586" y1="33.0065" x2="51.9586" y2="6.97682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E7E7E8"/>
+<stop offset="0.2559" stop-color="#E5E6E7"/>
+<stop offset="0.383" stop-color="#DDE1E3"/>
+<stop offset="0.4818" stop-color="#D0D9DC"/>
+<stop offset="0.5659" stop-color="#BDCDD1"/>
+<stop offset="0.6409" stop-color="#A5BFC4"/>
+<stop offset="0.7091" stop-color="#87ACB4"/>
+<stop offset="0.7724" stop-color="#6397A1"/>
+<stop offset="0.8318" stop-color="#3A7D8A"/>
+<stop offset="0.8859" stop-color="#0C6272"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-BlueShade-GreenTint.svg b/src/assets/img/tints/BackGlass-BlueShade-GreenTint.svg
new file mode 100644
index 000000000..4cf1c3831
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-BlueShade-GreenTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8750)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8750" x1="51.9586" y1="33.0219" x2="51.9586" y2="6.99218" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBE9DD"/>
+<stop offset="0.265" stop-color="#C9E7DC"/>
+<stop offset="0.3966" stop-color="#C1E2D7"/>
+<stop offset="0.4989" stop-color="#B4D9D0"/>
+<stop offset="0.5861" stop-color="#A1CCC6"/>
+<stop offset="0.6636" stop-color="#89BAB8"/>
+<stop offset="0.7343" stop-color="#6BA5A7"/>
+<stop offset="0.7998" stop-color="#478C93"/>
+<stop offset="0.8595" stop-color="#1F707D"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-BlueShade-NoTint.svg b/src/assets/img/tints/BackGlass-BlueShade-NoTint.svg
new file mode 100644
index 000000000..220b1ab04
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-BlueShade-NoTint.svg
@@ -0,0 +1,19 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8908)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8908" x1="51.9812" y1="33.0046" x2="51.9812" y2="6.97492" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.2491" stop-color="#FDFEFE"/>
+<stop offset="0.3729" stop-color="#F5F9F9"/>
+<stop offset="0.4691" stop-color="#E8F0F2"/>
+<stop offset="0.551" stop-color="#D5E4E7"/>
+<stop offset="0.6239" stop-color="#BDD4D9"/>
+<stop offset="0.6904" stop-color="#9FC1C7"/>
+<stop offset="0.752" stop-color="#7BAAB3"/>
+<stop offset="0.8099" stop-color="#528F9A"/>
+<stop offset="0.8626" stop-color="#247280"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-BrownShade-BrownTint.svg b/src/assets/img/tints/BackGlass-BrownShade-BrownTint.svg
new file mode 100644
index 000000000..dbd059625
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-BrownShade-BrownTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8984)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8984" x1="51.9519" y1="33.0065" x2="51.9519" y2="6.97682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0CDC2"/>
+<stop offset="0.2738" stop-color="#CECBC0"/>
+<stop offset="0.4097" stop-color="#C9C6B8"/>
+<stop offset="0.5154" stop-color="#C0BCAB"/>
+<stop offset="0.6055" stop-color="#B3AD98"/>
+<stop offset="0.6856" stop-color="#A39B80"/>
+<stop offset="0.7586" stop-color="#8E8462"/>
+<stop offset="0.8262" stop-color="#766A3E"/>
+<stop offset="0.8879" stop-color="#5B4B16"/>
+<stop offset="0.8993" stop-color="#55450E"/>
+<stop offset="1" stop-color="#55450E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-GrayShade-BlueTint.svg b/src/assets/img/tints/BackGlass-GrayShade-BlueTint.svg
new file mode 100644
index 000000000..2ec4a0535
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-GrayShade-BlueTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8980)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8980" x1="51.9552" y1="33.0102" x2="51.9552" y2="6.98049" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CADCDD"/>
+<stop offset="0.2908" stop-color="#C8DADB"/>
+<stop offset="0.4353" stop-color="#C1D2D3"/>
+<stop offset="0.5475" stop-color="#B6C5C6"/>
+<stop offset="0.6432" stop-color="#A5B2B3"/>
+<stop offset="0.7282" stop-color="#909A9B"/>
+<stop offset="0.8057" stop-color="#767C7D"/>
+<stop offset="0.8761" stop-color="#58595A"/>
+<stop offset="0.8993" stop-color="#4C4C4D"/>
+<stop offset="1" stop-color="#4C4C4D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-GrayShade-BrownTint.svg b/src/assets/img/tints/BackGlass-GrayShade-BrownTint.svg
new file mode 100644
index 000000000..f9cc80c12
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-GrayShade-BrownTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_9018)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_9018" x1="51.9552" y1="33.0065" x2="51.9552" y2="6.97682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0CDC2"/>
+<stop offset="0.2978" stop-color="#CECBC0"/>
+<stop offset="0.4457" stop-color="#C6C3B9"/>
+<stop offset="0.5606" stop-color="#B9B6AE"/>
+<stop offset="0.6585" stop-color="#A6A49D"/>
+<stop offset="0.7456" stop-color="#8E8C87"/>
+<stop offset="0.8237" stop-color="#71706D"/>
+<stop offset="0.8959" stop-color="#4E4E4F"/>
+<stop offset="0.8993" stop-color="#4C4C4D"/>
+<stop offset="1" stop-color="#4C4C4D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-GrayShade-GrayTint.svg b/src/assets/img/tints/BackGlass-GrayShade-GrayTint.svg
new file mode 100644
index 000000000..fcfe78cf6
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-GrayShade-GrayTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8978)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8978" x1="51.9552" y1="33.0065" x2="51.9552" y2="6.97682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E7E7E8"/>
+<stop offset="0.2851" stop-color="#E5E5E6"/>
+<stop offset="0.4267" stop-color="#DDDDDE"/>
+<stop offset="0.5368" stop-color="#D0D0D1"/>
+<stop offset="0.6305" stop-color="#BDBDBE"/>
+<stop offset="0.7139" stop-color="#A5A5A6"/>
+<stop offset="0.7899" stop-color="#878788"/>
+<stop offset="0.8589" stop-color="#646465"/>
+<stop offset="0.8993" stop-color="#4C4C4D"/>
+<stop offset="1" stop-color="#4C4C4D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-GrayShade-GreenTint.svg b/src/assets/img/tints/BackGlass-GrayShade-GreenTint.svg
new file mode 100644
index 000000000..b420ec6f4
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-GrayShade-GreenTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8932)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8932" x1="51.9552" y1="33.0219" x2="51.9552" y2="6.99218" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBE9DD"/>
+<stop offset="0.2841" stop-color="#C9E7DB"/>
+<stop offset="0.4252" stop-color="#C3DFD4"/>
+<stop offset="0.5349" stop-color="#B8D2C8"/>
+<stop offset="0.6283" stop-color="#A9BFB7"/>
+<stop offset="0.7114" stop-color="#96A7A0"/>
+<stop offset="0.7871" stop-color="#7D8985"/>
+<stop offset="0.8559" stop-color="#616665"/>
+<stop offset="0.8993" stop-color="#4C4C4D"/>
+<stop offset="1" stop-color="#4C4C4D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-GreenShade-BlueTint.svg b/src/assets/img/tints/BackGlass-GreenShade-BlueTint.svg
new file mode 100644
index 000000000..e1f2e9688
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-GreenShade-BlueTint.svg
@@ -0,0 +1,20 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#CEE7DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8920)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8920" x1="51.9618" y1="33.0102" x2="51.9618" y2="6.98049" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CADCDD"/>
+<stop offset="0.2653" stop-color="#C8DBDB"/>
+<stop offset="0.3972" stop-color="#C0D6D5"/>
+<stop offset="0.4996" stop-color="#B3CFCB"/>
+<stop offset="0.5869" stop-color="#A0C4BD"/>
+<stop offset="0.6645" stop-color="#88B6AA"/>
+<stop offset="0.7353" stop-color="#6AA593"/>
+<stop offset="0.8009" stop-color="#469177"/>
+<stop offset="0.8607" stop-color="#1E7A58"/>
+<stop offset="0.8993" stop-color="#006941"/>
+<stop offset="1" stop-color="#006941"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-GreenShade-BrownTint.svg b/src/assets/img/tints/BackGlass-GreenShade-BrownTint.svg
new file mode 100644
index 000000000..b8f49b565
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-GreenShade-BrownTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8982)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8982" x1="51.9814" y1="33.0065" x2="51.9814" y2="6.97682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0CDC2"/>
+<stop offset="0.2632" stop-color="#CECCC1"/>
+<stop offset="0.394" stop-color="#C6C8BC"/>
+<stop offset="0.4956" stop-color="#B9C2B4"/>
+<stop offset="0.5823" stop-color="#A6B9A8"/>
+<stop offset="0.6593" stop-color="#8EAD99"/>
+<stop offset="0.7295" stop-color="#709F86"/>
+<stop offset="0.7947" stop-color="#4C8E70"/>
+<stop offset="0.854" stop-color="#247A57"/>
+<stop offset="0.8993" stop-color="#006941"/>
+<stop offset="1" stop-color="#006941"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-GreenShade-GreenTint.svg b/src/assets/img/tints/BackGlass-GreenShade-GreenTint.svg
new file mode 100644
index 000000000..b07e8dbcc
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-GreenShade-GreenTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8896)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8896" x1="51.9618" y1="33.0219" x2="51.9618" y2="6.99218" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBE9DD"/>
+<stop offset="0.265" stop-color="#C9E8DB"/>
+<stop offset="0.3966" stop-color="#C1E3D5"/>
+<stop offset="0.4989" stop-color="#B4DACB"/>
+<stop offset="0.5861" stop-color="#A1CFBD"/>
+<stop offset="0.6636" stop-color="#89BFAA"/>
+<stop offset="0.7343" stop-color="#6BAC93"/>
+<stop offset="0.7998" stop-color="#479678"/>
+<stop offset="0.8595" stop-color="#1F7D59"/>
+<stop offset="0.8993" stop-color="#006941"/>
+<stop offset="1" stop-color="#006941"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-NoShade-BlueTint.svg b/src/assets/img/tints/BackGlass-NoShade-BlueTint.svg
new file mode 100644
index 000000000..1e4fd4eba
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-NoShade-BlueTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#CBDDDE" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-NoShade-BrownTint.svg b/src/assets/img/tints/BackGlass-NoShade-BrownTint.svg
new file mode 100644
index 000000000..658774678
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-NoShade-BrownTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#D1CEC3" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-NoShade-DarkBrownTint.svg b/src/assets/img/tints/BackGlass-NoShade-DarkBrownTint.svg
new file mode 100644
index 000000000..f36ebd878
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-NoShade-DarkBrownTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#5D564C" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-NoShade-DaryGrayTint.svg b/src/assets/img/tints/BackGlass-NoShade-DaryGrayTint.svg
new file mode 100644
index 000000000..5aab7ea07
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-NoShade-DaryGrayTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#D3D3D3" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-NoShade-GrayTint.svg b/src/assets/img/tints/BackGlass-NoShade-GrayTint.svg
new file mode 100644
index 000000000..ee14d3c4b
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-NoShade-GrayTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#E9E9EB" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-NoShade-GreenTint.svg b/src/assets/img/tints/BackGlass-NoShade-GreenTint.svg
new file mode 100644
index 000000000..5f5b99de0
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-NoShade-GreenTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#CBE9DD" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-NoShade-NoTint.svg b/src/assets/img/tints/BackGlass-NoShade-NoTint.svg
new file mode 100644
index 000000000..ec1ced501
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-NoShade-NoTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="white" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/BackGlass-NoShade-Privacy.svg b/src/assets/img/tints/BackGlass-NoShade-Privacy.svg
new file mode 100644
index 000000000..caa726f47
--- /dev/null
+++ b/src/assets/img/tints/BackGlass-NoShade-Privacy.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#626167" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/Windshield-BlueShade-BlueTint.svg b/src/assets/img/tints/Windshield-BlueShade-BlueTint.svg
new file mode 100644
index 000000000..b4cf30c92
--- /dev/null
+++ b/src/assets/img/tints/Windshield-BlueShade-BlueTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8966)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8966" x1="51.9716" y1="34.0522" x2="51.9716" y2="5.97896" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CADCDD"/>
+<stop offset="0.2653" stop-color="#C8DBDC"/>
+<stop offset="0.3972" stop-color="#C0D6D7"/>
+<stop offset="0.4996" stop-color="#B3CDD0"/>
+<stop offset="0.5869" stop-color="#A0C1C5"/>
+<stop offset="0.6645" stop-color="#88B1B8"/>
+<stop offset="0.7353" stop-color="#6A9EA7"/>
+<stop offset="0.8009" stop-color="#468793"/>
+<stop offset="0.8607" stop-color="#1E6D7C"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-BlueShade-BrownTint.svg b/src/assets/img/tints/Windshield-BlueShade-BrownTint.svg
new file mode 100644
index 000000000..dbca11b88
--- /dev/null
+++ b/src/assets/img/tints/Windshield-BlueShade-BrownTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_9004)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_9004" x1="51.9716" y1="34.0483" x2="51.9716" y2="5.975" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0CDC2"/>
+<stop offset="0.2632" stop-color="#CECCC1"/>
+<stop offset="0.394" stop-color="#C6C8BE"/>
+<stop offset="0.4956" stop-color="#B9C0B8"/>
+<stop offset="0.5823" stop-color="#A6B6B1"/>
+<stop offset="0.6593" stop-color="#8EA8A6"/>
+<stop offset="0.7295" stop-color="#70989A"/>
+<stop offset="0.7947" stop-color="#4C848B"/>
+<stop offset="0.854" stop-color="#246E7A"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-BlueShade-GrayTint.svg b/src/assets/img/tints/Windshield-BlueShade-GrayTint.svg
new file mode 100644
index 000000000..7ef277564
--- /dev/null
+++ b/src/assets/img/tints/Windshield-BlueShade-GrayTint.svg
@@ -0,0 +1,19 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_825_8758)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_825_8758" x1="51.9716" y1="34.0483" x2="51.9716" y2="5.975" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E7E7E8"/>
+<stop offset="0.2559" stop-color="#E5E6E7"/>
+<stop offset="0.383" stop-color="#DDE1E3"/>
+<stop offset="0.4818" stop-color="#D0D9DC"/>
+<stop offset="0.5659" stop-color="#BDCDD1"/>
+<stop offset="0.6409" stop-color="#A5BFC4"/>
+<stop offset="0.7091" stop-color="#87ACB4"/>
+<stop offset="0.7724" stop-color="#6397A1"/>
+<stop offset="0.8318" stop-color="#3A7D8A"/>
+<stop offset="0.8859" stop-color="#0C6272"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-BlueShade-GreenTint.svg b/src/assets/img/tints/Windshield-BlueShade-GreenTint.svg
new file mode 100644
index 000000000..18bc35fb5
--- /dev/null
+++ b/src/assets/img/tints/Windshield-BlueShade-GreenTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.99" fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_206_8118)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_206_8118" x1="51.9712" y1="34.0648" x2="51.9712" y2="5.99159" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CEDEE7"/>
+<stop offset="0.265" stop-color="#C9E7DC"/>
+<stop offset="0.3966" stop-color="#C1E2D7"/>
+<stop offset="0.4989" stop-color="#B4D9D0"/>
+<stop offset="0.5861" stop-color="#A1CCC6"/>
+<stop offset="0.6636" stop-color="#89BAB8"/>
+<stop offset="0.7343" stop-color="#6BA5A7"/>
+<stop offset="0.7998" stop-color="#478C93"/>
+<stop offset="0.8993" stop-color="#125B7E"/>
+<stop offset="1" stop-color="#125B7E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-BlueShade-NoTint.svg b/src/assets/img/tints/Windshield-BlueShade-NoTint.svg
new file mode 100644
index 000000000..2217911a8
--- /dev/null
+++ b/src/assets/img/tints/Windshield-BlueShade-NoTint.svg
@@ -0,0 +1,19 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8906)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8906" x1="52.0028" y1="34.0462" x2="52.0028" y2="5.97295" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.2491" stop-color="#FDFEFE"/>
+<stop offset="0.3729" stop-color="#F5F9F9"/>
+<stop offset="0.4691" stop-color="#E8F0F2"/>
+<stop offset="0.551" stop-color="#D5E4E7"/>
+<stop offset="0.6239" stop-color="#BDD4D9"/>
+<stop offset="0.6904" stop-color="#9FC1C7"/>
+<stop offset="0.752" stop-color="#7BAAB3"/>
+<stop offset="0.8099" stop-color="#528F9A"/>
+<stop offset="0.8626" stop-color="#247280"/>
+<stop offset="0.8993" stop-color="#005A6B"/>
+<stop offset="1" stop-color="#005A6B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-BrownShade-BrownTint.svg b/src/assets/img/tints/Windshield-BrownShade-BrownTint.svg
new file mode 100644
index 000000000..8c8b1da66
--- /dev/null
+++ b/src/assets/img/tints/Windshield-BrownShade-BrownTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8974)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8974" x1="51.9623" y1="34.0483" x2="51.9623" y2="5.975" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0CDC2"/>
+<stop offset="0.2738" stop-color="#CECBC0"/>
+<stop offset="0.4097" stop-color="#C9C6B8"/>
+<stop offset="0.5154" stop-color="#C0BCAB"/>
+<stop offset="0.6055" stop-color="#B3AD98"/>
+<stop offset="0.6856" stop-color="#A39B80"/>
+<stop offset="0.7586" stop-color="#8E8462"/>
+<stop offset="0.8262" stop-color="#766A3E"/>
+<stop offset="0.8879" stop-color="#5B4B16"/>
+<stop offset="0.8993" stop-color="#55450E"/>
+<stop offset="1" stop-color="#55450E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-GrayShade-BlueTint.svg b/src/assets/img/tints/Windshield-GrayShade-BlueTint.svg
new file mode 100644
index 000000000..a924b6664
--- /dev/null
+++ b/src/assets/img/tints/Windshield-GrayShade-BlueTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8970)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8970" x1="51.9669" y1="34.0522" x2="51.9669" y2="5.97896" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CADCDD"/>
+<stop offset="0.2908" stop-color="#C8DADB"/>
+<stop offset="0.4353" stop-color="#C1D2D3"/>
+<stop offset="0.5475" stop-color="#B6C5C6"/>
+<stop offset="0.6432" stop-color="#A5B2B3"/>
+<stop offset="0.7282" stop-color="#909A9B"/>
+<stop offset="0.8057" stop-color="#767C7D"/>
+<stop offset="0.8761" stop-color="#58595A"/>
+<stop offset="0.8993" stop-color="#4C4C4D"/>
+<stop offset="1" stop-color="#4C4C4D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-GrayShade-BrownTint.svg b/src/assets/img/tints/Windshield-GrayShade-BrownTint.svg
new file mode 100644
index 000000000..b26eedee1
--- /dev/null
+++ b/src/assets/img/tints/Windshield-GrayShade-BrownTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_9016)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_9016" x1="51.9669" y1="34.0483" x2="51.9669" y2="5.975" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0CDC2"/>
+<stop offset="0.2978" stop-color="#CECBC0"/>
+<stop offset="0.4457" stop-color="#C6C3B9"/>
+<stop offset="0.5606" stop-color="#B9B6AE"/>
+<stop offset="0.6585" stop-color="#A6A49D"/>
+<stop offset="0.7456" stop-color="#8E8C87"/>
+<stop offset="0.8237" stop-color="#71706D"/>
+<stop offset="0.8959" stop-color="#4E4E4F"/>
+<stop offset="0.8993" stop-color="#4C4C4D"/>
+<stop offset="1" stop-color="#4C4C4D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-GrayShade-GrayTint.svg b/src/assets/img/tints/Windshield-GrayShade-GrayTint.svg
new file mode 100644
index 000000000..69373ca2c
--- /dev/null
+++ b/src/assets/img/tints/Windshield-GrayShade-GrayTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8968)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8968" x1="51.9669" y1="34.0483" x2="51.9669" y2="5.975" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E7E7E8"/>
+<stop offset="0.2851" stop-color="#E5E5E6"/>
+<stop offset="0.4267" stop-color="#DDDDDE"/>
+<stop offset="0.5368" stop-color="#D0D0D1"/>
+<stop offset="0.6305" stop-color="#BDBDBE"/>
+<stop offset="0.7139" stop-color="#A5A5A6"/>
+<stop offset="0.7899" stop-color="#878788"/>
+<stop offset="0.8589" stop-color="#646465"/>
+<stop offset="0.8993" stop-color="#4C4C4D"/>
+<stop offset="1" stop-color="#4C4C4D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-GrayShade-GreenTint.svg b/src/assets/img/tints/Windshield-GrayShade-GreenTint.svg
new file mode 100644
index 000000000..14824eb51
--- /dev/null
+++ b/src/assets/img/tints/Windshield-GrayShade-GreenTint.svg
@@ -0,0 +1,17 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8930)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8930" x1="51.9669" y1="34.0648" x2="51.9669" y2="5.99157" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBE9DD"/>
+<stop offset="0.2841" stop-color="#C9E7DB"/>
+<stop offset="0.4252" stop-color="#C3DFD4"/>
+<stop offset="0.5349" stop-color="#B8D2C8"/>
+<stop offset="0.6283" stop-color="#A9BFB7"/>
+<stop offset="0.7114" stop-color="#96A7A0"/>
+<stop offset="0.7871" stop-color="#7D8985"/>
+<stop offset="0.8559" stop-color="#616665"/>
+<stop offset="0.8993" stop-color="#4C4C4D"/>
+<stop offset="1" stop-color="#4C4C4D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-GreenShade-BlueTint.svg b/src/assets/img/tints/Windshield-GreenShade-BlueTint.svg
new file mode 100644
index 000000000..fcc3d63a3
--- /dev/null
+++ b/src/assets/img/tints/Windshield-GreenShade-BlueTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8918)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8918" x1="51.976" y1="34.0522" x2="51.976" y2="5.97896" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CADCDD"/>
+<stop offset="0.2653" stop-color="#C8DBDB"/>
+<stop offset="0.3972" stop-color="#C0D6D5"/>
+<stop offset="0.4996" stop-color="#B3CFCB"/>
+<stop offset="0.5869" stop-color="#A0C4BD"/>
+<stop offset="0.6645" stop-color="#88B6AA"/>
+<stop offset="0.7353" stop-color="#6AA593"/>
+<stop offset="0.8009" stop-color="#469177"/>
+<stop offset="0.8607" stop-color="#1E7A58"/>
+<stop offset="0.8993" stop-color="#006941"/>
+<stop offset="1" stop-color="#006941"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-GreenShade-BrownTint.svg b/src/assets/img/tints/Windshield-GreenShade-BrownTint.svg
new file mode 100644
index 000000000..2fdf4bcf9
--- /dev/null
+++ b/src/assets/img/tints/Windshield-GreenShade-BrownTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8972)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8972" x1="52.0031" y1="34.0483" x2="52.0031" y2="5.975" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0CDC2"/>
+<stop offset="0.2632" stop-color="#CECCC1"/>
+<stop offset="0.394" stop-color="#C6C8BC"/>
+<stop offset="0.4956" stop-color="#B9C2B4"/>
+<stop offset="0.5823" stop-color="#A6B9A8"/>
+<stop offset="0.6593" stop-color="#8EAD99"/>
+<stop offset="0.7295" stop-color="#709F86"/>
+<stop offset="0.7947" stop-color="#4C8E70"/>
+<stop offset="0.854" stop-color="#247A57"/>
+<stop offset="0.8993" stop-color="#006941"/>
+<stop offset="1" stop-color="#006941"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-GreenShade-GreenTint.svg b/src/assets/img/tints/Windshield-GreenShade-GreenTint.svg
new file mode 100644
index 000000000..65a735289
--- /dev/null
+++ b/src/assets/img/tints/Windshield-GreenShade-GreenTint.svg
@@ -0,0 +1,18 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8894)" stroke="black"/>
+<defs>
+<linearGradient id="paint0_linear_841_8894" x1="51.976" y1="34.0648" x2="51.976" y2="5.99157" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBE9DD"/>
+<stop offset="0.265" stop-color="#C9E8DB"/>
+<stop offset="0.3966" stop-color="#C1E3D5"/>
+<stop offset="0.4989" stop-color="#B4DACB"/>
+<stop offset="0.5861" stop-color="#A1CFBD"/>
+<stop offset="0.6636" stop-color="#89BFAA"/>
+<stop offset="0.7343" stop-color="#6BAC93"/>
+<stop offset="0.7998" stop-color="#479678"/>
+<stop offset="0.8595" stop-color="#1F7D59"/>
+<stop offset="0.8993" stop-color="#006941"/>
+<stop offset="1" stop-color="#006941"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/tints/Windshield-NoShade-BlueTint.svg b/src/assets/img/tints/Windshield-NoShade-BlueTint.svg
new file mode 100644
index 000000000..cbeb84ab4
--- /dev/null
+++ b/src/assets/img/tints/Windshield-NoShade-BlueTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#CBDDDE" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/Windshield-NoShade-BrownTint.svg b/src/assets/img/tints/Windshield-NoShade-BrownTint.svg
new file mode 100644
index 000000000..f70fef994
--- /dev/null
+++ b/src/assets/img/tints/Windshield-NoShade-BrownTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#D1CEC3" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/Windshield-NoShade-DarkBrownTint.svg b/src/assets/img/tints/Windshield-NoShade-DarkBrownTint.svg
new file mode 100644
index 000000000..feedfa3f0
--- /dev/null
+++ b/src/assets/img/tints/Windshield-NoShade-DarkBrownTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#5D564C" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg b/src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg
new file mode 100644
index 000000000..9f55ee8a7
--- /dev/null
+++ b/src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#D3D3D3" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/Windshield-NoShade-GrayTint.svg b/src/assets/img/tints/Windshield-NoShade-GrayTint.svg
new file mode 100644
index 000000000..249a9866c
--- /dev/null
+++ b/src/assets/img/tints/Windshield-NoShade-GrayTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#E9E9EB" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/Windshield-NoShade-GreenTint.svg b/src/assets/img/tints/Windshield-NoShade-GreenTint.svg
new file mode 100644
index 000000000..ce17261a5
--- /dev/null
+++ b/src/assets/img/tints/Windshield-NoShade-GreenTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#CBE9DD" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/Windshield-NoShade-NoTint.svg b/src/assets/img/tints/Windshield-NoShade-NoTint.svg
new file mode 100644
index 000000000..5a9bc647f
--- /dev/null
+++ b/src/assets/img/tints/Windshield-NoShade-NoTint.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="white" stroke="black"/>
+</svg>
diff --git a/src/assets/img/tints/Windshield-NoShade-Privacy.svg b/src/assets/img/tints/Windshield-NoShade-Privacy.svg
new file mode 100644
index 000000000..ca1f024ac
--- /dev/null
+++ b/src/assets/img/tints/Windshield-NoShade-Privacy.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#626167" stroke="black"/>
+</svg>
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index c828f9ff9..ad389db2c 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
-    <div v-if="questionText" class="mt-6 mb-4 d-flex">
-      <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
+    <div v-if="questionText" class="d-flex">
+      <span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', 'text-center'], 'fs-6 fw-bold w-100' ]">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
@@ -22,8 +22,8 @@
               :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
-              :isWide="isWide"
-              :isRequired="isRequired"
+              :isWide=isWide
+              :isRequired=isRequired
               :buttonImage="answer.AnswerImageUrl"
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
diff --git a/src/constants/dynamictext-mapper.js b/src/constants/dynamictext-mapper.js
new file mode 100644
index 000000000..b450d0561
--- /dev/null
+++ b/src/constants/dynamictext-mapper.js
@@ -0,0 +1,57 @@
+// Used to support custom (non-state) related dynamic text.
+// Example: {custom:glassName}, each key in the array is the value after custom:, like 'glassname'
+// Please use lowercase only so that we don't have to worry about case sensitivity.
+
+const customMappings = {
+    formattedglassname: [
+        { key: 'Windshield Single', transformedValue: 'windshield' },
+        { key: 'Windshield Driver', transformedValue: 'driver side split windshield' },
+        { key: 'Windshield Passenger', transformedValue: 'passenger side split windshield' },
+        { key: 'Rear Stationary', transformedValue: 'rear window' },
+        { key: 'Rear Slider', transformedValue: 'rear window' },
+        { key: 'Driver Front', transformedValue: 'driver side front door' },
+        { key: 'Driver Back ', transformedValue: 'driver side back door' },
+        { key: 'Driver Vent', transformedValue: 'driver side vent glass' },
+        { key: 'Driver Quarter', transformedValue: 'driver side quarter panel' },
+        { key: 'Driver SideDoor', transformedValue: 'driver side sliding door' },
+        { key: 'Passenger Front', transformedValue: 'passenger side front door' },
+        { key: 'Passenger Back', transformedValue: 'passenger side back door' },
+        { key: 'Passenger Vent', transformedValue: 'passenger side vent glass' },
+        { key: 'Passenger Quarter', transformedValue: 'passenger side quarter panel' },
+        { key: 'Passenger SlideDoor', transformedValue: 'passenger side sliding door' },
+    ]
+}
+
+// Gets an instance of a string where the dynamic portion of the text {custom:KeyName}
+// is replaced by a value from the above map. 
+// If the value isn't found, return the original dynamic string without replacement
+export function getCustomTransformValue(dynamicString, key) {
+
+    // Get array key from the dynamic string
+    const regexExp = new RegExp("{(.*?):(.*?)}", "g");
+    const matches = [...dynamicString.matchAll(regexExp)];
+
+    if (matches.length === 0) {
+        return dynamicString;
+    }
+
+    const arrayKey = matches[0][2];
+
+    // Get the array of possible values based on the key name.
+    const transformArray = customMappings[arrayKey.toLowerCase()];
+    
+    if(transformArray === undefined) {
+        return dynamicString;
+    }
+
+    // Get the value where the name matches the key name, there should only be one so find() is used.
+    const mapObject = transformArray.find(map => map.key.toLowerCase() === key.toLowerCase());
+
+    if(mapObject === undefined){
+        return dynamicString;
+    }
+
+    const finalString = dynamicString.replace(`{custom:${arrayKey}}`, mapObject.transformedValue);
+
+    return finalString
+}
\ No newline at end of file
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 177211ae0..dddab1d66 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -11,6 +11,7 @@ const storeActions = {
   GET_EVOX_IMAGE: "getEvoxImage",
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
   LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
+  GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
 
   // DEPENDENCY MUTATIONS
   RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",
diff --git a/src/constants/tint-mapper.js b/src/constants/tint-mapper.js
new file mode 100644
index 000000000..1291991f0
--- /dev/null
+++ b/src/constants/tint-mapper.js
@@ -0,0 +1,90 @@
+
+// TintMap with array keys by location, lowercase to avoid as much string mismatching as possible.
+// Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup.
+// See vehicle-parts for implementation example. 
+const tintMap = {
+    rear: [
+        // Blue Shade
+        { name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" },
+        { name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" },
+        { name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" },
+        { name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" },
+        { name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" },
+
+        // Brown Shade
+        { name: "brown shade, brown tint", src: "BackGlass-BrownShade-BrownTint.svg" },
+
+        // Gray Shade
+        { name: "gray shade, blue tint", src: "BackGlass-GrayShade-BlueTint.svg" },
+        { name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" },
+        { name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" },
+        { name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.svg" },
+
+        // Green Shade
+        { name: "green shade, blue tint", src: "BackGlass-GreenShade-BlueTint.svg" },
+        { name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" },
+        { name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" },
+
+        // Tints Only
+        { name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" },
+        { name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" },
+        { name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" },
+        { name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" },
+        { name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" },
+        { name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" },
+        { name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.svg" },
+
+        // No shade or tint
+        { name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
+    ],
+
+    windshield: [
+        // Blue Shade
+        { name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
+        { name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
+        { name: "blue shade, gray tint", src: "Windshield-BlueShade-GrayTint.svg" },
+        { name: "blue shade, green tint", src: "Windshield-BlueShade-GreenTint.svg" },
+        { name: "blue shade", src: "Windshield-BlueShade-NoTint.svg" },
+
+        // Brown Shade
+        { name: "brown shade, brown tint", src: "Windshield-BrownShade-BrownTint.svg" },
+
+        // Gray Shade
+        { name: "gray shade, blue tint", src: "Windshield-GrayShade-BlueTint.svg" },
+        { name: "gray shade, brown tint", src: "Windshield-GrayShade-BrownTint.svg" },
+        { name: "gray shade, gray tint", src: "Windshield-GrayShade-GrayTint.svg" },
+        { name: "gray shade, green tint", src: "Windshield-GrayShade-GreenTint.svg" },
+
+        // Green Shade
+        { name: "green shade, blue tint", src: "Windshield-GreenShade-BlueTint.svg" },
+        { name: "green shade, brown tint", src: "Windshield-GreenShade-BrownTint.svg" },
+        { name: "green shade, green tint", src: "Windshield-GreenShade-GreenTint.svg" },
+
+        // Tints Only
+        { name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
+        { name: "brown tint", src: "Windshield-NoShade-BrownTint.svg" },
+        { name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" },
+        { name: "dark gray tint", src: "Windshield-NoShade-DarkGrayTint.svg" },
+        { name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" },
+        { name: "green tint", src: "Windshield-NoShade-GreenTint.svg" },
+        { name: "gray tint privacy", src: "Windshield-NoShade-Privacy.svg" },
+
+        // No shade or tint
+        { name: "no shade, no tint", src: "Windshield-NoShade-NoTint.svg" }, // ???
+
+    ]
+}
+
+// Gets the tint image source string given the glass location, and the tint description (like 'Green Tint')
+// Use lowered strings here to try to avoid mismatch. Returns an empty string if array key doesn't exist.
+// Returns undefined if no items are found.
+export function getTintImage(glassLocation, colorString) {
+
+    if (tintMap[glassLocation.toLowerCase()] === undefined) {
+        return '';
+    }
+
+    const tintImageSource = tintMap[glassLocation.toLowerCase()].find(item => item.name.toLowerCase() == colorString.toLowerCase())
+
+    return tintImageSource;
+}
\ No newline at end of file
diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 3bdeba866..d0a78d085 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -1,20 +1,18 @@
 <template>
-
   <div class="container-fluid nested-radio">
     <div class="row mb-1">
       <div class="col">
         <listCard
-        groupName="listcard1"
-        isWide="true"
-        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-        buttonLabel="Green Tint, Blue Shade"
-        buttonID="radio1"
+          groupName="listcard1"
+          isWide="true"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+          buttonLabel="Green Tint, Blue Shade"
+          buttonID="radio1"
         />
       </div>
     </div>
     <div class="row mb-1">
       <div class="col">
-        <p class="mb-0 fw-bold">Ok, select the features</p>
         <buttonQuestion
           buttonType="radio"
           groupName="Demo Group"
@@ -23,22 +21,22 @@
           value="test button"
           screenReaderOnlyText="rain sensor, solar, 3rd visor band"
           :answers="demoArray"
+          questionText="ok now select your features"
         />
       </div>
     </div>
     <div class="row mb-2">
       <div class="col">
         <listCard
-        groupName="listcard1"
-        isWide="true"
-        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-        buttonLabel="Green Tint"
-        buttonID="radio2"
+          groupName="listcard1"
+          isWide="true"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+          buttonLabel="Green Tint"
+          buttonID="radio2"
         />
       </div>
     </div>
   </div>
-
 </template>
 
 <script>
@@ -56,9 +54,9 @@ export default {
       demoArray: [
         "rain sensor, solar, 3rd visor band",
         "rain sensor, heated glass, solar, 3rd visor band",
-      ]
-    }
-  }
+      ],
+    };
+  },
 };
 </script>
 
@@ -66,10 +64,11 @@ export default {
 .nested-radio {
   .ui-radio {
     flex-direction: column;
-    margin: .25rem 0;
+    margin: 0.25rem 0;
   }
+
   p {
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
 }
 </style>
diff --git a/src/layouts/vehicle-parts/part-question/part-question.vue b/src/layouts/vehicle-parts/part-question/part-question.vue
new file mode 100644
index 000000000..9a7e63df6
--- /dev/null
+++ b/src/layouts/vehicle-parts/part-question/part-question.vue
@@ -0,0 +1,142 @@
+<template>
+<div class="container">
+    <div class="row">
+        <p>{{ colorQuestionText }}</p>
+    </div>
+</div>
+
+<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
+    <div class="row my-2">
+        <div class="col">
+            <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
+            require(`@/assets/img/tints/${getTintSourceImage(
+              glassLocation,
+              name
+            )}`)
+          " :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
+        </div>
+    </div>
+    <transition name="fade" mode="out-in">
+        <div v-if="
+        selectedTint[name] != undefined &&
+        selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
+      " class="row my-2" aria-live="polite">
+            <div class="col">
+                <buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" :questionText="glassFeatureQuestion" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" />
+            </div>
+        </div>
+    </transition>
+</div>
+</template>
+
+<script>
+// Components
+import listCard from "@/ux-components/list-card/list-card";
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+// Supporting files
+import {
+    getTintImage
+} from "@/constants/tint-mapper";
+import {
+    getCustomTransformValue
+} from "@/constants/dynamictext-mapper";
+
+export default {
+    name: "part-question",
+    inheritAttrs: false,
+    data() {
+        return {
+            glassColorQuestion: '',
+            glassFeatureQuestion: '',
+            selectedTint: {}, // v-model for the list card selections
+        };
+    },
+    props: {
+        glassName: String,
+        glassLocation: String,
+        colorAnswers: Array,
+        modelValue: Object
+    },
+    components: {
+        listCard,
+        buttonQuestion,
+    },
+    computed: {
+        colorQuestionText() {
+            return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`);
+        },
+        
+        selectedPart: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+
+        // Creates a map of the feature list data in the correct Name/Value
+        // format for the button-question component.
+        featureListData() {
+            const tintMapByColor = this.colorAnswers.reduce((arr, item) => {
+                // Create the key
+                const itemColor = item.ColorAnswerText;
+                arr[itemColor] = arr[itemColor] || [];
+
+                // Map the data to Name/Text object for ButtonQuestion
+                const mappedItem = item.FeatureAnswers.reduce((featureArr, item) => {
+                    featureArr["Text"] = item.FeatureAnswerText; // Display to User
+                    featureArr["Name"] = item.PartNumber; // Backing Value
+
+                    return featureArr;
+                }, {});
+
+                // Add onto the final object
+                arr[itemColor].push(mappedItem);
+
+                return arr;
+            }, {});
+
+            return tintMapByColor;
+        }
+    },
+    methods: {
+        initializeComponent(cmsContent, initialData) {
+            this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
+            this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
+        },
+
+        // Gets tint images based on the glass type, and tint name.
+        // Returns an empty string if the src or object is undefined.
+        getTintSourceImage(glassLocation, tintColor) {
+            const tintSourceObject = getTintImage(glassLocation, tintColor);
+
+            if (tintSourceObject === undefined || tintSourceObject.src == undefined) {
+                return "";
+            }
+
+            return tintSourceObject.src;
+        },
+
+        // Reset selections when tint changes for the same glass to ensure proper selection.
+        ResetTintAndPartSelections() {
+            this.selectedTint = {};
+            this.selectedPart = {};
+        }
+    },
+};
+</script>
+
+<style lang="scss">
+.nested-radio {
+    .ui-radio {
+        flex-direction: column;
+        margin: 0.25rem 0;
+    }
+
+    p {
+        font-size: 0.875rem;
+    }
+}
+</style>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
new file mode 100644
index 000000000..06fa46341
--- /dev/null
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -0,0 +1,183 @@
+<template>
+<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+    <funnelHeader ref="funnelHeader" />
+    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
+    <funnelSubHeader ref="funnelSubHeader" />
+    <div class="container-fluid prevent-squish my-5">
+        <div class="row">
+            <div class="col">
+                <alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
+            </div>
+        </div>
+    </div>
+
+    <div v-for="(item, i) in Parts" :key="i">
+        <partQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
+        <br />
+    </div>
+    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
+</div>
+</template>
+
+<script>
+// Components
+import partQuestion from "@/layouts/vehicle-parts/part-question/part-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import alert from "@/ux-components/alert/alert";
+
+// Supporting Files
+import {
+    fetchCmsContentForPage
+} from "@/helpers/cms-content-helper";
+import {
+    settleAllPromises
+} from "@/helpers/layout-helper";
+
+
+export default {
+    name: "vehicle-parts",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [{
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+        }, ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.$refs.funnelHeader.initializeComponent(
+                resultMap.cmsContent.FunnelHeaderWidget
+            );
+            vm.$refs.vehicleBanner.initializeComponent(
+                resultMap.cmsContent.VehicleBannerWidget
+            );
+            vm.$refs.funnelSubHeader.initializeComponent(
+                resultMap.cmsContent.FunnelSubHeaderWidget
+            );
+            vm.$refs.funnelFooter.initializeComponent(
+                resultMap.cmsContent.FunnelFooterWidget
+            );
+
+            // Part Question dynamic component
+            Object.keys(vm.$refs)
+                .filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined)
+                .forEach((c) =>
+                    vm.$refs[c][0].initializeComponent({
+                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+                    })
+                );
+
+            // Set alertData for the page alert. These use props so we don't call
+            // initializeComponent here.
+            vm.alertWidgetData = {
+                copy: resultMap.cmsContent.AlertWidget.BodyText,
+                headline: resultMap.cmsContent.AlertWidget.HeadlineText
+            };
+
+        });
+    },
+    data() {
+        return {
+            glassParts: {},
+            refPrefix: "partQuestion",
+            alertWidgetData: Object,
+        };
+    },
+    components: {
+        partQuestion,
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+        funnelFooter,
+        alert,
+    },
+    computed: {
+        Parts() {
+            return [{
+                    glassLocation: "Rear",
+                    glassName: "Stationary",
+                    colorAnswers: [{
+                            ColorAnswerText: "Green Tint",
+                            FeatureAnswers: [{
+                                FeatureAnswerText: "Backglass - heated glass, solar, 1 hole",
+                                PartNumber: "test-backglass-green-tint-1-hole",
+                            }, ],
+                        },
+                        {
+                            ColorAnswerText: "Green Tint",
+                            FeatureAnswers: [{
+                                FeatureAnswerText: "Backglass - heated glass, solar, 2 hole",
+                                PartNumber: "test-backglass-green-tint-2-hole",
+                            }, ],
+                        },
+                        {
+                            ColorAnswerText: "Gray Tint Privacy",
+                            FeatureAnswers: [{
+                                FeatureAnswerText: "Backglass - heated glass, solar, 3 hole",
+                                PartNumber: "test-backglass-gray-tint-privacy-3-hole",
+                            }, ],
+                        },
+                        {
+                            ColorAnswerText: "Gray Tint Privacy",
+                            FeatureAnswers: [{
+                                FeatureAnswerText: "Backglass - heated glass, solar, 4 hole",
+                                PartNumber: "test-backglass-blue-tint-4-hole",
+                            }, ],
+                        },
+                    ],
+                },
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    colorAnswers: [{
+                            ColorAnswerText: "Blue Tint",
+                            FeatureAnswers: [{
+                                FeatureAnswerText: "Windshield - heated glass, solar, 1 hole",
+                                PartNumber: "test-windshield-blue-tint-1-hole",
+                            }, ],
+                        },
+                        {
+                            ColorAnswerText: "Blue Tint",
+                            FeatureAnswers: [{
+                                FeatureAnswerText: "Windshield -heated glass, solar, 2 hole",
+                                PartNumber: "test-blue-tint-windshield-2-hole",
+                            }, ],
+                        },
+                        {
+                            ColorAnswerText: "Gray Tint Privacy",
+                            FeatureAnswers: [{
+                                FeatureAnswerText: "Windshield -heated glass, solar, 3 hole",
+                                PartNumber: "test-gray-tint-privacy-windshield-3-hole",
+                            }, ],
+                        },
+                        {
+                            ColorAnswerText: "Gray Tint Privacy",
+                            FeatureAnswers: [{
+                                FeatureAnswerText: "Windshield -heated glass, solar, 4 hole",
+                                PartNumber: "test-brown-tint-windshield-4-hole",
+                            }, ],
+                        },
+                    ],
+                },
+            ];
+        },
+    },
+    methods: {
+        arePagePrerequisitesValid(parameters) {
+            // store.getters.damage.isRepair !== null;
+            // parameters.PartsByGlassName.length > 0;
+            
+            return true;
+        }
+    },
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index b564b7e94..0195dd8d9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -55,7 +55,7 @@ const routes = [
               .getRoutes()
               .filter((x) => x.name === to.query.fmgPage)[0].components;
 
-            if (!arePagePrerequisitesValid(component)) {
+            if (!arePagePrerequisitesValid(component, to.params)) {
               await GoToFunnelStartOn404(next);
             }
 
@@ -80,7 +80,7 @@ const routes = [
             .filter((x) => x.name === routeData[0].name)[0]
             .components.default();
 
-          if (!arePagePrerequisitesValid(nextComponent)) {
+          if (!arePagePrerequisitesValid(nextComponent, to.params)) {
             await GoToFunnelStartOn404(next);
           }
 
@@ -217,8 +217,8 @@ async function GoToFunnelStartOn404(next) {
 }
 
 // Checks arePagePrerequisitesValid on the component passed in.
-function arePagePrerequisitesValid(component) {
-  return component.default.methods.arePagePrerequisitesValid();
+function arePagePrerequisitesValid(component, parameters = {}) {
+  return component.default.methods.arePagePrerequisitesValid(parameters);
 }
 
 // Reset dependant state on route change.
diff --git a/src/store/index.js b/src/store/index.js
index c7227de47..7feea102d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -25,6 +25,11 @@ export const state = {
       numberOfChips: null,
       glassToReplace: null,
     },
+    lineItems:{
+      glassParts: null,
+      childParts: null,
+      otherParts: null
+    }
   },
   applicationUser: {
     eventBus: [],
@@ -102,7 +107,9 @@ export const mutations = {
 
   },
   resetPartsAndDependencies(state) {
-
+    state.glassParts = null;
+    state.childParts = null;
+    state.otherParts = null;
   }
 }
 
@@ -118,6 +125,8 @@ export const getters = {
     return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
   },
   eventBus: (state) => state.applicationUser.eventBus,
+  damage: (state) => state.order.damage,
+  lineItems: (state) => state.order.lineItems
 }
 
 // Export Actions
@@ -239,6 +248,20 @@ export const actions = {
       payload: {},
     });
   },
+
+  // Parts API Actions
+  getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetRouteInfo.method,
+      endpoint: endpoints.GetRouteInfo.url,
+      payload: {
+        carId: carId,
+        glass: glassArray,
+        zip: zipCode,
+        vin: vin
+      },
+    });
+  }
 }
 
 export default createStore({
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index ae409dd36..47ea0815d 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -3,7 +3,6 @@
 body {
   font-size: 16px;
   background-color: #fff;
-
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
     &.container-shadow {
@@ -14,6 +13,9 @@ body {
       display: flex;
       flex-direction: column;
     }
+    .prevent-squish{
+      overflow-x: unset;
+    }
   }
   .pointer {
     cursor: pointer;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 791a37039..5f7ace3d4 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -49,7 +49,6 @@
 
 <script>
 import { useField } from "vee-validate";
-
 export default {
   name: "listCard",
   props: {
@@ -100,13 +99,14 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
+        const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
+        this.$emit('isCheckedChanged', emitEvent);
+        this.$emit('update:modelValue', emitEvent);
       }
     }
   },
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-
     const {
         value: inputValue,
         handleChange,
@@ -263,4 +263,4 @@ export default {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 8d1ed6210..d7620df94 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -2,15 +2,15 @@
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
   <div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
     <input
-    type="radio"
-    class="form-check-input"
-    aria-checked="false"
-    :name="groupName"
-    :id="buttonID"
-    :aria-required="isRequired"
-    :value="value"
-    :v-model="checkValue"
-    @change="handleCheckChanged()"
+      type="radio"
+      class="form-check-input"
+      aria-checked="false"
+      :name="groupName"
+      :id="buttonID"
+      :aria-required="isRequired"
+      :value="value"
+      :v-model="checkValue"
+      @change="handleCheckChanged()"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -43,8 +43,8 @@ export default {
       checkValue: Boolean,
     };
   },
-  created(){
-    if(this.selectedButtonIDs){
+  created() {
+    if (this.selectedButtonIDs) {
       this.checkValue = this.selectedButtonIDs[0];
     }
   },
@@ -52,12 +52,20 @@ export default {
     handleClick(value) {
       this.handleChange(value);
     },
-    handleCheckChange(newValue, oldValue){
-      const isInitialization = typeof(oldValue) === 'function';
+    handleCheckChanged(newValue, oldValue) {
+      const isInitialization = typeof oldValue === "function";
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
+
+        const emitEvent = {
+          checkValue: this.checkValue,
+          value: this.value.toString(),
+          buttonID: this.buttonID.toString(),
+        };
+
+        this.$emit("isCheckedChanged", emitEvent);
+        this.$emit("update:modelValue", emitEvent);
       }
-    }
+    },
   },
   setup(props) {
     const { groupName, value } = toRefs(props);
@@ -83,7 +91,7 @@ export default {
   .form-check-input {
     border: 1px solid $gray-500;
     border-radius: 100%;
-    margin-right: .5rem;
+    margin-right: 0.5rem;
     &:checked {
       background-color: $white;
       background-size: 71%;