diff --git a/appointment-frontend/cypress.config.ts b/appointment-frontend/cypress.config.ts
index d4851df1d..751090a73 100644
--- a/appointment-frontend/cypress.config.ts
+++ b/appointment-frontend/cypress.config.ts
@@ -5,7 +5,7 @@ export default defineConfig({
   env: {
     'cypress-plugin-snapshots': {
       imageConfig: {
-        threshold: 0,
+        threshold: 10,
         thresholdType: 'percent',
       },
       screenshotConfig: {
@@ -15,7 +15,7 @@ export default defineConfig({
         disableTimersAndAnimations: true,
         log: false,
         scale: false,
-        timeout: 30000,
+        timeout: 50000,
       },
     },
   },
diff --git a/appointment-frontend/cypress/e2e/image_snapshot/step3.cy.ts b/appointment-frontend/cypress/e2e/image_snapshot/step3.cy.ts
index 32b20614c..2790758fa 100644
--- a/appointment-frontend/cypress/e2e/image_snapshot/step3.cy.ts
+++ b/appointment-frontend/cypress/e2e/image_snapshot/step3.cy.ts
@@ -30,6 +30,9 @@ import { API_PREFIX } from '../../support/e2e'
 
 describe('step 3', () => {
   beforeEach(() => {
+
+    cy.viewport(1000, 920)
+
     // Intercept API calls to provide testing data.
 
     cy.fixture('offices').then((json) => {
@@ -61,7 +64,7 @@ describe('step 3', () => {
       .type('Legal Change of Name{downarrow}{enter}')
 
     // The API fixtures are based on a certain date, so act like it's that day.
-    cy.clock(new Date('2022-01-17').getTime())
+    cy.clock(new Date('2022-01-16').getTime())
 
     cy.get(SELECTOR_STEP_2_BUTTON_NEXT)
       .click()
@@ -80,6 +83,9 @@ describe('step 3', () => {
   })
 
   it('page loaded', () => {
-    cy.matchImageSnapshot()
+    cy.matchImageSnapshot({
+      failureThreshold: 0.01,
+      failureThresholdType: 'percent',
+    })
   })
 })
diff --git a/appointment-frontend/cypress/e2e/image_snapshot/step4.cy.ts b/appointment-frontend/cypress/e2e/image_snapshot/step4.cy.ts
index 5584eb984..2e3af7e03 100644
--- a/appointment-frontend/cypress/e2e/image_snapshot/step4.cy.ts
+++ b/appointment-frontend/cypress/e2e/image_snapshot/step4.cy.ts
@@ -24,7 +24,8 @@ import {
   SELECTOR_STEP_2_COMBOBOX_SERVICE,
   SELECTOR_STEP_3_BUTTON_TIMESLOT,
   SELECTOR_STEP_4_IMAGE_BCEID_LOGIN,
-  SELECTOR_STEP_4_IMAGE_BCSC
+  SELECTOR_STEP_4_IMAGE_BCSC,
+  SELECTOR_STEP_4_BUTTON_BCEID
 } from '../../support/selectors'
 
 import { API_PREFIX } from '../../support/e2e'
@@ -32,6 +33,7 @@ import { API_PREFIX } from '../../support/e2e'
 describe('step 4', () => {
   beforeEach(() => {
     // Intercept API calls to provide testing data.
+    cy.viewport(1000, 920)
 
     cy.fixture('appointments/draft').then((json) => {
       cy.intercept('POST', API_PREFIX + 'appointments/draft', json)
@@ -66,27 +68,31 @@ describe('step 4', () => {
       .type('Legal Change of Name{downarrow}{enter}')
 
     // The API fixtures are based on a certain date, so act like it's that day.
-    cy.clock(new Date('2022-01-17').getTime())
+    cy.clock(new Date('2022-01-16').getTime())
 
     cy.get(SELECTOR_STEP_2_BUTTON_NEXT)
       .click()
 
     cy.get(SELECTOR_STEP_3_BUTTON_TIMESLOT)
-      .click()
+      .first().click()
 
     // Get something from the next page, so that we know page load is complete.
-    cy.get(SELECTOR_STEP_4_IMAGE_BCSC)
+    cy.get(SELECTOR_STEP_4_BUTTON_BCEID).should('be.visible')
 
     // Flake: https://github.com/cypress-io/cypress/issues/2681
     cy.workaroundPositionFixed(SELECTOR_FEEDBACK)
 
     // Flake: v-img has a default fade transition. Wait for it to complete.
-    cy.workaroundImageFade(SELECTOR_HEADER_IMAGE_BCGOV)
+    // cy.workaroundImageFade(SELECTOR_HEADER_IMAGE_BCGOV)
     cy.workaroundImageFade(SELECTOR_STEP_4_IMAGE_BCEID_LOGIN)
+
     cy.workaroundImageFade(SELECTOR_STEP_4_IMAGE_BCSC)
   })
 
   it('page loaded', () => {
-    cy.matchImageSnapshot()
+    cy.matchImageSnapshot({
+      failureThreshold: 0.01,
+      failureThresholdType: 'percent',
+    })
   })
 })
diff --git a/appointment-frontend/cypress/e2e/image_snapshot/step5.cy.ts b/appointment-frontend/cypress/e2e/image_snapshot/step5.cy.ts
index dbd070191..edb8f4deb 100644
--- a/appointment-frontend/cypress/e2e/image_snapshot/step5.cy.ts
+++ b/appointment-frontend/cypress/e2e/image_snapshot/step5.cy.ts
@@ -90,7 +90,7 @@ describe('step 5', () => {
       .type('Legal Change of Name{downarrow}{enter}')
 
     // The API fixtures are based on a certain date, so act like it's that day.
-    cy.clock(new Date('2022-01-17').getTime())
+    cy.clock(new Date('2022-01-16').getTime())
 
     cy.get(SELECTOR_STEP_2_BUTTON_NEXT)
       .click()
@@ -129,6 +129,8 @@ describe('step 5', () => {
     cy.get(SELECTOR_STEP_5_BUTTON_CONFIRM)
       .should('be.visible')
 
+      cy.screenshot('SELECTOR_STEP_5_BUTTON_CONFIRM');
+
     cy.matchImageSnapshot()
   })
 
diff --git a/appointment-frontend/cypress/fixtures/offices/3/slots/service_id=85.json b/appointment-frontend/cypress/fixtures/offices/3/slots/service_id=85.json
index 7fb02f707..e77604689 100644
--- a/appointment-frontend/cypress/fixtures/offices/3/slots/service_id=85.json
+++ b/appointment-frontend/cypress/fixtures/offices/3/slots/service_id=85.json
@@ -1,5 +1,12 @@
 {
-  "01/17/2022": [],
+  
+  "01/17/2022": [
+    {
+      "start_time": "09:00",
+      "end_time": "09:20",
+      "no_of_slots": 1
+    }
+  ],
   "01/18/2022": [],
   "01/19/2022": [
     {
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/account_settings_update.cy.ts/Account Settings -- Update User.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/account_settings_update.cy.ts/Account Settings -- Update User.snap.png
index 4512ce649..40d8859fe 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/account_settings_update.cy.ts/Account Settings -- Update User.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/account_settings_update.cy.ts/Account Settings -- Update User.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/account_settings_update.cy.ts/Account Settings -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/account_settings_update.cy.ts/Account Settings -- page loaded.snap.png
index 5d801c2cf..43265a203 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/account_settings_update.cy.ts/Account Settings -- page loaded.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/account_settings_update.cy.ts/Account Settings -- page loaded.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/appointment_cancel.cy.ts/Cancel Appointment -- Cancel Appointment.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/appointment_cancel.cy.ts/Cancel Appointment -- Cancel Appointment.snap.png
index 2eda218f0..d87181062 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/appointment_cancel.cy.ts/Cancel Appointment -- Cancel Appointment.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/appointment_cancel.cy.ts/Cancel Appointment -- Cancel Appointment.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/appointment_cancel.cy.ts/Cancel Appointment -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/appointment_cancel.cy.ts/Cancel Appointment -- page loaded.snap.png
index dde716d86..eb2197822 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/appointment_cancel.cy.ts/Cancel Appointment -- page loaded.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/appointment_cancel.cy.ts/Cancel Appointment -- page loaded.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/appointment_change.cy.ts/Change Appointment -- Change Appointment.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/appointment_change.cy.ts/Change Appointment -- Change Appointment.snap.png
index 9da52b132..7a7bdf468 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/appointment_change.cy.ts/Change Appointment -- Change Appointment.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/appointment_change.cy.ts/Change Appointment -- Change Appointment.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/appointment_change.cy.ts/Change Appointment -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/appointment_change.cy.ts/Change Appointment -- page loaded.snap.png
index dde716d86..eb2197822 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/appointment_change.cy.ts/Change Appointment -- page loaded.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/appointment_change.cy.ts/Change Appointment -- page loaded.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/step3.cy.ts/step 3 -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/step3.cy.ts/step 3 -- page loaded.snap.png
index 06f496fcc..d32e75e83 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/step3.cy.ts/step 3 -- page loaded.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/step3.cy.ts/step 3 -- page loaded.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/step4.cy.ts/step 4 -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/step4.cy.ts/step 4 -- page loaded.snap.png
deleted file mode 100644
index 8837ebbb2..000000000
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/step4.cy.ts/step 4 -- page loaded.snap.png and /dev/null differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- confirm clicked.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- confirm clicked.snap.png
index d622633d2..0815e2655 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- confirm clicked.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- confirm clicked.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- consent checked.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- consent checked.snap.png
index 57da06ebc..9febb269e 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- consent checked.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- consent checked.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- page loaded.snap.png
index d497276be..010aeebcc 100644
Binary files a/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- page loaded.snap.png and b/appointment-frontend/cypress/snapshots/image_snapshot/step5.cy.ts/step 5 -- page loaded.snap.png differ
diff --git a/appointment-frontend/cypress/snapshots/step 1 -- office selected.snap.png b/appointment-frontend/cypress/snapshots/step 1 -- office selected.snap.png
deleted file mode 100644
index 37eb7208d..000000000
Binary files a/appointment-frontend/cypress/snapshots/step 1 -- office selected.snap.png and /dev/null differ
diff --git a/appointment-frontend/cypress/snapshots/step 1 -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/step 1 -- page loaded.snap.png
deleted file mode 100644
index 758cf6c8b..000000000
Binary files a/appointment-frontend/cypress/snapshots/step 1 -- page loaded.snap.png and /dev/null differ
diff --git a/appointment-frontend/cypress/snapshots/step 1 -- services popup.snap.png b/appointment-frontend/cypress/snapshots/step 1 -- services popup.snap.png
deleted file mode 100644
index 4073637ce..000000000
Binary files a/appointment-frontend/cypress/snapshots/step 1 -- services popup.snap.png and /dev/null differ
diff --git a/appointment-frontend/cypress/snapshots/step 2 -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/step 2 -- page loaded.snap.png
deleted file mode 100644
index deae32e9d..000000000
Binary files a/appointment-frontend/cypress/snapshots/step 2 -- page loaded.snap.png and /dev/null differ
diff --git a/appointment-frontend/cypress/snapshots/step 2 -- service selected.snap.png b/appointment-frontend/cypress/snapshots/step 2 -- service selected.snap.png
deleted file mode 100644
index d8e0c6754..000000000
Binary files a/appointment-frontend/cypress/snapshots/step 2 -- service selected.snap.png and /dev/null differ
diff --git a/appointment-frontend/cypress/snapshots/step 3 -- page loaded.snap.png b/appointment-frontend/cypress/snapshots/step 3 -- page loaded.snap.png
deleted file mode 100644
index 11e124126..000000000
Binary files a/appointment-frontend/cypress/snapshots/step 3 -- page loaded.snap.png and /dev/null differ
diff --git a/appointment-frontend/cypress/support/commands.ts b/appointment-frontend/cypress/support/commands.ts
index 9f1831813..f1c58f5f1 100644
--- a/appointment-frontend/cypress/support/commands.ts
+++ b/appointment-frontend/cypress/support/commands.ts
@@ -14,7 +14,9 @@
 
 import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command'
 
-addMatchImageSnapshotCommand()
+addMatchImageSnapshotCommand({
+  failureThreshold: 0.2,
+})
 
 declare global {
   namespace Cypress {
diff --git a/appointment-frontend/tsconfig.json b/appointment-frontend/tsconfig.json
index 6274d11ba..97680d19a 100644
--- a/appointment-frontend/tsconfig.json
+++ b/appointment-frontend/tsconfig.json
@@ -27,6 +27,9 @@
       "scripthost"
     ]
   },
+  "types":[
+    "@simonsmith/cypress-image-snapshot/types"
+  ],
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",