diff --git a/src/assets/icons/back.svg b/src/assets/icons/back.svg
deleted file mode 100644
index 773b3c4b..00000000
--- a/src/assets/icons/back.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.5146 17.9893C20.5557 17.9893 21.5811 16.9834 21.5811 14.9619V3.03809C21.5811 1.0166 20.5557 0.0107422 18.5146 0.0107422H10.0283C8.88574 0.0107422 7.89941 0.303711 7.09863 1.15332L1.34668 7.12988C0.711914 7.78418 0.418945 8.37012 0.418945 8.98535C0.418945 9.59082 0.702148 10.1865 1.34668 10.8408L7.1084 16.7881C7.91895 17.6279 8.89551 17.9795 10.0381 17.9795L18.5146 17.9893ZM9.35449 13.2529C8.91504 13.2529 8.55371 12.8818 8.55371 12.4326C8.55371 12.2178 8.63184 12.0127 8.78809 11.8662L11.6494 9.00488L8.78809 6.14355C8.63184 5.9873 8.55371 5.79199 8.55371 5.57715C8.55371 5.11816 8.91504 4.77637 9.35449 4.77637C9.5791 4.77637 9.76465 4.84473 9.91113 5.00098L12.792 7.87207L15.6826 4.99121C15.8486 4.8252 16.0342 4.75684 16.249 4.75684C16.6885 4.75684 17.0498 5.1084 17.0498 5.55762C17.0498 5.78223 16.9717 5.95801 16.8154 6.13379L13.9443 9.00488L16.8057 11.8564C16.9521 12.0127 17.04 12.208 17.04 12.4326C17.04 12.8818 16.6787 13.2529 16.2295 13.2529C16.0049 13.2529 15.7998 13.1553 15.6436 13.0088L12.792 10.1377L9.94043 13.0088C9.78418 13.165 9.5791 13.2529 9.35449 13.2529Z" fill="#727676"/>
-</svg>
diff --git a/src/common-components/site-sub-header/button-back/button-back.spec.js b/src/common-components/site-sub-header/button-back/button-back.spec.js
new file mode 100644
index 00000000..c7bff87f
--- /dev/null
+++ b/src/common-components/site-sub-header/button-back/button-back.spec.js
@@ -0,0 +1,21 @@
+import { shallowMount } from "@vue/test-utils";
+import buttonBack from "./button-back";
+
+describe("back button", () => {
+  test("renders a button", () => {
+    // Arrange
+    const myFunction = () => {};
+
+    // Act
+    const wrapper = shallowMount(buttonBack, {
+      propsData: {
+        backButtonAction: myFunction,
+        backButtonAccessibleText: "something",
+      },
+    });
+
+    // Assert
+    expect(wrapper.find("button").exists()).toBe(true);
+    wrapper.unmount();
+  });
+});
diff --git a/src/common-components/site-sub-header/button-back/button-back.vue b/src/common-components/site-sub-header/button-back/button-back.vue
new file mode 100644
index 00000000..cf3a630b
--- /dev/null
+++ b/src/common-components/site-sub-header/button-back/button-back.vue
@@ -0,0 +1,82 @@
+<template>
+  <button
+    @click="handleClick"
+    class="back-button-wrapper"
+    :aria-label="backButtonAccessibleText"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="34px"
+      height="30px"
+      viewBox="-2.2 -6 30 30"
+    >
+      <g id="Layer_3">
+        <path
+          class="outer"
+          fill="#FFFFFF"
+          d="M19.934-1.434h-8.486c-1.683,0-2.999,0.528-4.021,1.614L1.685,6.146C0.78,7.079,0.338,8.027,0.338,9.041
+              c0,1.028,0.444,1.979,1.359,2.908l5.753,5.938c1.054,1.093,2.403,1.647,4.007,1.647l8.475,0.01c2.861,0,4.568-1.692,4.568-4.528
+              V3.094C24.5,0.259,22.793-1.434,19.934-1.434L19.934-1.434z"
+        />
+      </g>
+      <g id="Layer_2">
+        <path
+          class="inner"
+          fill="#727676"
+          d="M19.934,17.989c2.041,0,3.066-1.006,3.066-3.028V3.039c0-2.022-1.025-3.028-3.066-3.028h-8.486
+          c-1.143,0-2.129,0.292-2.929,1.143L2.766,7.13C2.131,7.784,1.838,8.37,1.838,8.985c0,0.605,0.283,1.201,0.928,1.855l5.762,5.947
+          c0.811,0.84,1.787,1.191,2.93,1.191L19.934,17.989z M10.773,13.253c-0.439,0-0.801-0.371-0.801-0.82
+          c0-0.215,0.078-0.42,0.235-0.566l2.861-2.861l-2.861-2.862c-0.156-0.156-0.234-0.352-0.234-0.566c0-0.458,0.362-0.801,0.801-0.801
+          c0.224,0,0.41,0.069,0.556,0.225l2.881,2.872l2.891-2.881c0.166-0.166,0.353-0.234,0.566-0.234c0.439,0,0.801,0.352,0.801,0.801
+          c0,0.225-0.078,0.4-0.234,0.576l-2.871,2.871l2.861,2.852c0.146,0.156,0.234,0.352,0.234,0.576c0,0.449-0.361,0.82-0.811,0.82
+          c-0.225,0-0.43-0.098-0.586-0.244l-2.852-2.871l-2.852,2.871C11.203,13.165,10.999,13.253,10.773,13.253z"
+        />
+      </g>
+    </svg>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "buttonBack",
+  props: {
+    backButtonAccessibleText: {
+      type: String,
+      required: true,
+      default: "",
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit("click-event");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.back-button-wrapper {
+  padding: 0;
+  position: relative;
+  top: -1px;
+  margin-left: 2px;
+  border: none;
+  background: none;
+
+  &:focus {
+    outline: none;
+
+    svg .outer {
+      fill: $white;
+      stroke-width: 2.5px;
+      stroke: $blue;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      transform: translate(-2.7px, -1.8px) scale(1.2);
+    }
+  }
+  &:focus-visible {
+    outline: none;
+  }
+}
+</style>
diff --git a/src/common-components/site-sub-header/site-sub-header.vue b/src/common-components/site-sub-header/site-sub-header.vue
index 22064035..c394d214 100644
--- a/src/common-components/site-sub-header/site-sub-header.vue
+++ b/src/common-components/site-sub-header/site-sub-header.vue
@@ -5,23 +5,39 @@
           <span>
             {{ content }}
           </span>
+          <buttonBack
+            v-if="hasBackButton"
+            :backButtonAccessibleText="backButtonAccessibleText"
+            @click-event="clickEvent"
+          />
         </h5>
       </div>
     </div>
   </template>
 
 <script>
+import buttonBack from "@/common-components/site-sub-header/button-back/button-back";
+
+
     export default ({
         name: "siteSubHeader",
         props: {
             cmsWidgetName: String,
+            hasBackButton: Boolean,
+            backButtonAccessibleText: String,
         },
         computed: {
             content()
             {
                 return this.getCmsContent(this.cmsWidgetName, "SubHeaderText")
             }
-        }
+        },
+        methods: {
+          clickEvent() {
+                this.$emit("click-event");
+              },
+        },
+        components: { buttonBack },
     })
 </script>
 
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 3d4ca8b5..b3997b1b 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -4,7 +4,12 @@
       <div class="select-car">
         <div class="select-car-form rounded text-center">
           <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
-          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+          <siteSubHeader 
+            cmsWidgetName="SiteSubHeaderWidget" 
+            :hasBackButton="true"
+            @click-event="backButtonAction"
+            backButtonAccessibleText = "Change vehicle year"
+          />
           <div class="fade-on-route-transition">
             <makeQuestion 
               class="fade-on-route-transition"
@@ -64,7 +69,14 @@
             );
         });
         },
-
+        methods: {
+          backButtonAction() {
+            this.$router.navigate(
+              this.navigationScenarios.CLICKED_BACK,
+              this.$route
+            );
+          },
+        },
         components: {
             makeQuestion,
             siteHeader,