diff --git a/frontend/cypress/integration/auth/auth.spec.ts b/frontend/cypress/integration/auth/auth.spec.ts
index d05a936a4d..3d909437c9 100644
--- a/frontend/cypress/integration/auth/auth.spec.ts
+++ b/frontend/cypress/integration/auth/auth.spec.ts
@@ -190,4 +190,9 @@ describe('auth', () => {
         cy.get('[data-test="LOGIN_EMAIL_ID"]').type(email);
         cy.get("[data-test='LOGIN_BUTTON']").click();
     });
+
+    it('renders invalid token page when token is invalid', () => {
+        cy.visit('/new-user?token=hellotokenworld');
+        cy.get('[data-test="INVALID_TOKEN_BUTTON"]').should('be.visible');
+    });
 });
diff --git a/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx b/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
index 712a30c0af..0ba01627a5 100644
--- a/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
+++ b/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
@@ -1,11 +1,19 @@
 import { Button, Typography } from '@material-ui/core';
 import { Link } from 'react-router-dom';
+import { INVALID_TOKEN_BUTTON } from 'testIds';
 import { useCommonStyles } from '../../../../common.styles';
+import classnames from 'classnames';
 
 const InvalidToken = () => {
     const commonStyles = useCommonStyles();
     return (
-        <div className={commonStyles.contentSpacingY}>
+        <div
+            className={classnames(
+                commonStyles.contentSpacingY,
+                commonStyles.flexColumn,
+                commonStyles.itemsCenter
+            )}
+        >
             <Typography variant="h2" className={commonStyles.title}>
                 Invalid token
             </Typography>
@@ -19,6 +27,7 @@ const InvalidToken = () => {
                 color="primary"
                 component={Link}
                 to="forgotten-password"
+                data-test={INVALID_TOKEN_BUTTON}
             >
                 Reset password
             </Button>
diff --git a/frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts b/frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts
index 287f2dfa19..b58017c3f6 100644
--- a/frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts
+++ b/frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts
@@ -2,15 +2,13 @@ import useSWR, { SWRConfiguration } from 'swr';
 import useQueryParams from '../../../useQueryParams';
 import { useState, useEffect } from 'react';
 import { formatApiPath } from '../../../../utils/format-path';
-import handleErrorResponses from '../httpErrorResponseHandler';
 
 const getFetcher = (token: string) => () => {
     const path = formatApiPath(`auth/reset/validate?token=${token}`);
+    // Don't use handleErrorResponses here, because we need to read the error.
     return fetch(path, {
         method: 'GET',
-    })
-        .then(handleErrorResponses('Password reset'))
-        .then(res => res.json());
+    }).then(res => res.json());
 };
 
 const INVALID_TOKEN_ERROR = 'InvalidTokenError';
diff --git a/frontend/src/testIds.js b/frontend/src/testIds.js
index 90c8642411..ec8b5f8515 100644
--- a/frontend/src/testIds.js
+++ b/frontend/src/testIds.js
@@ -14,6 +14,7 @@ export const LOGIN_BUTTON = 'LOGIN_BUTTON';
 export const LOGIN_PASSWORD_ID = 'LOGIN_PASSWORD_ID';
 export const SSO_LOGIN_BUTTON = 'SSO_LOGIN_BUTTON';
 export const FORGOTTEN_PASSWORD_FIELD = 'FORGOTTEN_PASSWORD_FIELD';
+export const INVALID_TOKEN_BUTTON = 'INVALID_TOKEN_BUTTON';
 
 /* STRATEGY */
 export const FEATURE_ENVIRONMENT_ACCORDION = 'FEATURE_ENVIRONMENT_ACCORDION';