diff --git a/app/src/components/cards/DeployDetailsCard/DeployDetailsCard.tsx b/app/src/components/cards/DeployDetailsCard/DeployDetailsCard.tsx
index f3e413b6..099b55d2 100644
--- a/app/src/components/cards/DeployDetailsCard/DeployDetailsCard.tsx
+++ b/app/src/components/cards/DeployDetailsCard/DeployDetailsCard.tsx
@@ -33,7 +33,7 @@ export const DeployDetailsCard: React.FC<DeployDetailsCardProps> = ({
   const navigate = useNavigate();
 
   return (
-    <div data-testid="deploy-details-card">
+    <div data-cy="deploy-details-card" data-testid="deploy-details-card">
       <HeaderContent>
         <HashWrapper>
           {withSkeletonLoading(
@@ -65,6 +65,7 @@ export const DeployDetailsCard: React.FC<DeployDetailsCardProps> = ({
                   {withSkeletonLoading(
                     <>
                       <StyledHashLink
+                        data-cy="block-hash-link"
                         data-testid="block-hash-link"
                         onClick={() => {
                           navigate(`/block/${deploy?.blockHash ?? ''}`);
@@ -87,6 +88,7 @@ export const DeployDetailsCard: React.FC<DeployDetailsCardProps> = ({
                   {withSkeletonLoading(
                     <>
                       <StyledHashLink
+                        data-cy="public-key-link"
                         data-testid="public-key-link"
                         onClick={() => {
                           navigate(`/account/${deploy?.publicKey ?? ''}`);
diff --git a/app/src/components/cards/TransactionDetailsCard/TransactionDetailsCard.tsx b/app/src/components/cards/TransactionDetailsCard/TransactionDetailsCard.tsx
index 63e20897..8083d65e 100644
--- a/app/src/components/cards/TransactionDetailsCard/TransactionDetailsCard.tsx
+++ b/app/src/components/cards/TransactionDetailsCard/TransactionDetailsCard.tsx
@@ -37,111 +37,116 @@ export const TransactionDetailsCard: React.FC<TransactionDetailsCardProps> = ({
     );
 
   return (
-    <InfoCardContentWrapper>
-      <Card.Body>
-        <HeadContentWrapper>
-          <TransactionHeading type="h2">
-            {t('transaction-details')}
-          </TransactionHeading>
-        </HeadContentWrapper>
-        <DetailDataWrapper>
-          <TransactionGrid gap="2rem">
-            <DetailDataList gap="2rem">
-              {!!deploy?.amount && (
+    <div data-cy="transaction-details-card">
+      <InfoCardContentWrapper>
+        <Card.Body>
+          <HeadContentWrapper>
+            <TransactionHeading type="h2">
+              {t('transaction-details')}
+            </TransactionHeading>
+          </HeadContentWrapper>
+          <DetailDataWrapper>
+            <TransactionGrid gap="2rem">
+              <DetailDataList gap="2rem">
+                {!!deploy?.amount && (
+                  <li>
+                    <Grid gap="1rem" templateColumns="9rem auto">
+                      <DetailDataLabel>{t('amount')}</DetailDataLabel>
+                      <DetailDataValue data-testid="deploy-amount">
+                        <Coin>{deploy?.amount}</Coin>
+                      </DetailDataValue>
+                    </Grid>
+                  </li>
+                )}
                 <li>
-                  <Grid gap="1rem" templateColumns="9rem auto">
-                    <DetailDataLabel>{t('amount')}</DetailDataLabel>
-                    <DetailDataValue data-testid="deploy-amount">
-                      <Coin>{deploy?.amount}</Coin>
+                  <Grid gap="1rem" templateColumns="9rem 1fr">
+                    <DetailDataLabel>{t('cost')}</DetailDataLabel>
+                    <DetailDataValue data-testid="deploy-cost">
+                      {withSkeletonLoading(
+                        <Coin>{deploy?.cost ?? ''}</Coin>,
+                        isLoading,
+                        {},
+                      )}
                     </DetailDataValue>
                   </Grid>
                 </li>
-              )}
-              <li>
-                <Grid gap="1rem" templateColumns="9rem 1fr">
-                  <DetailDataLabel>{t('cost')}</DetailDataLabel>
-                  <DetailDataValue data-testid="deploy-cost">
-                    {withSkeletonLoading(
-                      <Coin>{deploy?.cost ?? ''}</Coin>,
-                      isLoading,
-                      {},
-                    )}
-                  </DetailDataValue>
-                </Grid>
-              </li>
-              <li>
-                <Grid gap="1rem" templateColumns="9rem 1fr">
-                  <DetailDataLabel>{t('payment-amount')}</DetailDataLabel>
-                  <DetailDataValue data-testid="deploy-payment-amount">
-                    {withSkeletonLoading(
-                      <Coin>{deploy?.paymentAmount ?? ''}</Coin>,
-                      isLoading,
-                      {},
-                    )}
-                  </DetailDataValue>
-                </Grid>
-              </li>
-            </DetailDataList>
-            <Grid templateColumns="1fr 1fr" templateRows="1fr" gap="2rem 1rem">
-              <div>
-                <DetailDataLabel>{t('timestamp')}</DetailDataLabel>
-                <TransactionDetailData data-testid="readable-time-stamp">
-                  {withSkeletonLoading(
-                    deploy?.readableTimestamp,
-                    isLoading,
-                    {},
-                  )}
-                </TransactionDetailData>
-              </div>
-              <HideOnMobile>
+                <li>
+                  <Grid gap="1rem" templateColumns="9rem 1fr">
+                    <DetailDataLabel>{t('payment-amount')}</DetailDataLabel>
+                    <DetailDataValue data-testid="deploy-payment-amount">
+                      {withSkeletonLoading(
+                        <Coin>{deploy?.paymentAmount ?? ''}</Coin>,
+                        isLoading,
+                        {},
+                      )}
+                    </DetailDataValue>
+                  </Grid>
+                </li>
+              </DetailDataList>
+              <Grid
+                templateColumns="1fr 1fr"
+                templateRows="1fr"
+                gap="2rem 1rem">
                 <div>
-                  <DetailDataLabel>{t('status')}</DetailDataLabel>
-                  <DeployStatusData data-testid="status">
+                  <DetailDataLabel>{t('timestamp')}</DetailDataLabel>
+                  <TransactionDetailData data-testid="readable-time-stamp">
                     {withSkeletonLoading(
-                      <>
-                        {deploy?.status}
-                        <StatusIconWrapper>{statusIcon}</StatusIconWrapper>
-                      </>,
+                      deploy?.readableTimestamp,
                       isLoading,
                       {},
                     )}
-                  </DeployStatusData>
+                  </TransactionDetailData>
                 </div>
-              </HideOnMobile>
-              <HideOnDesktop>
-                <SpanTwoCols>
-                  <DetailDataLabel>{t('status')}</DetailDataLabel>
-                  <DeployStatusData>
-                    {withSkeletonLoading(
-                      <>
-                        {deploy?.status}
-                        <StatusIconWrapper>{statusIcon}</StatusIconWrapper>
-                      </>,
-                      isLoading,
-                      { width: 100 },
-                    )}
-                  </DeployStatusData>
-                </SpanTwoCols>
-              </HideOnDesktop>
-              <ActionAndDeployTypeWrapper>
-                <DetailDataLabel>{t('action')}</DetailDataLabel>
-                <TransactionDetailData data-testid="action">
-                  {withSkeletonLoading(deploy?.action, isLoading, {})}
-                </TransactionDetailData>
-              </ActionAndDeployTypeWrapper>
-              {!!deploy?.deployType && (
+                <HideOnMobile>
+                  <div>
+                    <DetailDataLabel>{t('status')}</DetailDataLabel>
+                    <DeployStatusData data-testid="status">
+                      {withSkeletonLoading(
+                        <>
+                          {deploy?.status}
+                          <StatusIconWrapper>{statusIcon}</StatusIconWrapper>
+                        </>,
+                        isLoading,
+                        {},
+                      )}
+                    </DeployStatusData>
+                  </div>
+                </HideOnMobile>
+                <HideOnDesktop>
+                  <SpanTwoCols>
+                    <DetailDataLabel>{t('status')}</DetailDataLabel>
+                    <DeployStatusData>
+                      {withSkeletonLoading(
+                        <>
+                          {deploy?.status}
+                          <StatusIconWrapper>{statusIcon}</StatusIconWrapper>
+                        </>,
+                        isLoading,
+                        { width: 100 },
+                      )}
+                    </DeployStatusData>
+                  </SpanTwoCols>
+                </HideOnDesktop>
                 <ActionAndDeployTypeWrapper>
-                  <DetailDataLabel>{t('deploy-type')}</DetailDataLabel>
-                  <TransactionDetailData data-testid="deploy-type">
-                    {deploy?.deployType}
+                  <DetailDataLabel>{t('action')}</DetailDataLabel>
+                  <TransactionDetailData data-testid="action">
+                    {withSkeletonLoading(deploy?.action, isLoading, {})}
                   </TransactionDetailData>
                 </ActionAndDeployTypeWrapper>
-              )}
-            </Grid>
-          </TransactionGrid>
-        </DetailDataWrapper>
-      </Card.Body>
-    </InfoCardContentWrapper>
+                {!!deploy?.deployType && (
+                  <ActionAndDeployTypeWrapper>
+                    <DetailDataLabel>{t('deploy-type')}</DetailDataLabel>
+                    <TransactionDetailData data-testid="deploy-type">
+                      {deploy?.deployType}
+                    </TransactionDetailData>
+                  </ActionAndDeployTypeWrapper>
+                )}
+              </Grid>
+            </TransactionGrid>
+          </DetailDataWrapper>
+        </Card.Body>
+      </InfoCardContentWrapper>
+    </div>
   );
 };
 
diff --git a/app/src/pages/Deploy.tsx b/app/src/pages/Deploy.tsx
index 933c2d8a..e568a8cd 100644
--- a/app/src/pages/Deploy.tsx
+++ b/app/src/pages/Deploy.tsx
@@ -45,7 +45,11 @@ export const DeployPage: React.FC = () => {
       <PageHead pageTitle={pageTitle} />
       <Grid gap="2.5rem">
         <DeployDetailsCard deploy={deploy} isLoading={isLoading} />
-        <TransactionDetailsCard deploy={deploy} isLoading={isLoading} />
+        <TransactionDetailsCard
+          data-cy="transaction-details-card"
+          deploy={deploy}
+          isLoading={isLoading}
+        />
       </Grid>
     </PageWrapper>
   );
diff --git a/test/cypress/e2e/data/mockDeploy.ts b/test/cypress/e2e/data/mockDeploy.ts
new file mode 100644
index 00000000..d01e5e88
--- /dev/null
+++ b/test/cypress/e2e/data/mockDeploy.ts
@@ -0,0 +1,10 @@
+export const getMockDeploy = () => ({
+  deployHash:
+    '7e2cad6ae20875b6a3ffcbb4e743ab5e0fc0f8b5ecc444e222f0204a7ee9120f',
+  truncatedDeployHash: '7e2ca...9120f',
+  blockHash: 'b315d3b20eb2a9d14d2260a78494cada02108cc7d218c812ade3a173a48a15b5',
+  truncatedBlockHash: 'b315d...a15b5',
+  publicKey:
+    '0203e6b3f236f340ea8d355bd438f5176ed1a2eea21c8d4d4de66c0ee96334de44f5',
+  truncatedPublicKey: '0203e...e44f5',
+});
diff --git a/test/cypress/e2e/deploy.cy.ts b/test/cypress/e2e/deploy.cy.ts
index d7978d2d..c55b53d1 100644
--- a/test/cypress/e2e/deploy.cy.ts
+++ b/test/cypress/e2e/deploy.cy.ts
@@ -1,12 +1,176 @@
-import { hashes } from './data';
+import { getMockDeploy } from './data/mockDeploy';
 
-const { deployHash } = hashes.mainnet;
+const sizes: Cypress.ViewportPreset[] = ['iphone-6', 'ipad-2', 'macbook-16'];
+
+const {
+  deployHash,
+  truncatedDeployHash,
+  blockHash,
+  truncatedBlockHash,
+  publicKey,
+  truncatedPublicKey,
+} = getMockDeploy();
 
 describe('Deploy Page', () => {
-  it('can visit at /deploy/deployHash', () => {
-    cy.visit(`/deploy/${deployHash}`);
+  sizes.forEach(size => {
+    beforeEach(() => {
+      cy.visit(`/deploy/${deployHash}`);
+    });
+
+    it(`should navigate to blocks page on a ${size} screen`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.get('a').contains('Blocks').click();
+        cy.location('pathname').should('eq', '/blocks');
+      } else {
+        cy.getByData('styled-button').click();
+        cy.getByData('mobile-link').contains('Blocks').click();
+        cy.location('pathname').should('eq', '/blocks');
+      }
+    });
+
+    it(`should navigate to peers page on a ${size} screen`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.get('a').contains('Peers').click();
+        cy.location('pathname').should('eq', '/peers');
+      } else {
+        cy.getByData('styled-button').click();
+        cy.getByData('mobile-link').contains('Peers').click();
+        cy.location('pathname').should('eq', '/peers');
+      }
+    });
+
+    it(`should navigate to validators page on a ${size} screen`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.get('a').contains('Validators').click();
+        cy.location('pathname').should('eq', '/validators');
+      } else {
+        cy.getByData('styled-button').click();
+        cy.getByData('mobile-link').contains('Validators').click();
+        cy.location('pathname').should('eq', '/validators');
+      }
+    });
+
+    it(`should navigate to home page on a ${size} screen`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.get('a').contains('Home').click();
+        cy.location('pathname').should('eq', '/');
+      } else {
+        cy.getByData('styled-button').click();
+        cy.getByData('mobile-link').contains('Home').click();
+        cy.location('pathname').should('eq', '/');
+      }
+    });
+
+    it(`should render header on a ${size} screen`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.getByData('search-select').should('exist');
+        cy.getByData('mobile-select').should('not.exist');
+        cy.getByData('desktop-nav').should('be.visible');
+      } else if (size === 'ipad-2') {
+        cy.getByData('search-select').should('exist');
+        cy.getByData('mobile-select').should('not.exist');
+        cy.getByData('desktop-nav').should('not.be.visible');
+      } else {
+        cy.getByData('search-select').should('not.exist');
+        cy.getByData('mobile-select').should('exist');
+        cy.getByData('desktop-nav').should('not.be.visible');
+      }
+    });
+
+    it(`can visit deploy page on size ${size} screen`, () => {
+      cy.viewport(size);
+      cy.contains('Deploy Hash').should('be.visible');
+      cy.contains(deployHash.slice(0, 5)).should('be.visible');
+    });
+
+    it(`should render deploy details card on a size ${size} screen`, () => {
+      cy.viewport(size);
+      cy.getByData('deploy-details-card').should('be.visible');
+    });
+
+    it(`should render transaction details card on a size ${size} screen`, () => {
+      cy.viewport(size);
+      cy.getByData('transaction-details-card').should('be.visible');
+    });
+
+    it(`should render footer on a ${size} screen`, () => {
+      cy.viewport(size);
+      cy.getByData('footer').should('exist');
+    });
+
+    it(`should expand and collapse block hash on a size ${size} heading`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.getByData('hash-heading')
+          .contains(truncatedBlockHash)
+          .should('be.visible')
+          .getByData('hash-expand-contract-button')
+          .should('contain', 'Expand')
+          .click()
+          .getByData('hash-heading')
+          .should('contain', blockHash)
+          .getByData('hash-expand-contract-button')
+          .should('contain', 'Collapse')
+          .click()
+          .getByData('hash-heading')
+          .should('contain', truncatedBlockHash);
+      } else {
+        cy.getByData('hash-heading')
+          .contains(truncatedBlockHash)
+          .should('be.visible')
+          .getByData('hash-expand-contract-button')
+          .should('not.be.visible');
+      }
+    });
+
+    it(`should render links on a ${size} screen`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.getByData('block-hash-link')
+          .contains(blockHash)
+          .should('be.visible');
+        cy.getByData('public-key-link')
+          .contains(publicKey)
+          .should('be.visible');
+        cy.getByData('hash-heading').contains(deployHash).should('be.visible');
+      } else {
+        cy.getByData('block-hash-link')
+          .contains(truncatedBlockHash)
+          .should('be.visible');
+        cy.getByData('public-key-link')
+          .contains(truncatedPublicKey)
+          .should('be.visible');
+        cy.getByData('hash-heading')
+          .contains(truncatedDeployHash)
+          .should('be.visible');
+      }
+    });
+
+    it(`should navigate to block page on a ${size} screen`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.getByData('block-hash-link').contains(blockHash).click();
+        cy.location('pathname').should('eq', `/block/${blockHash}`);
+      } else {
+        cy.getByData('block-hash-link').contains(truncatedBlockHash).click();
+        cy.location('pathname').should('eq', `/block/${blockHash}`);
+      }
+    });
 
-    cy.contains('Deploy Hash').should('be.visible');
-    cy.contains(deployHash.slice(0, 5)).should('be.visible');
+    it(`should navigate to account page on a ${size} screen`, () => {
+      cy.viewport(size);
+      if (size === 'macbook-16') {
+        cy.getByData('public-key-link').contains(publicKey).click();
+        cy.location('pathname').should('eq', `/account/${publicKey}`);
+      } else {
+        cy.getByData('public-key-link').contains(truncatedPublicKey).click();
+        cy.location('pathname').should('eq', `/account/${publicKey}`);
+      }
+    });
   });
 });