diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 193771135..feadf869c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -427,48 +427,6 @@ importers:
         specifier: ^1.0.0-pre.53
         version: 1.0.0-pre.53
 
-  .yalc/@ensdomains/ens-test-env:
-    dependencies:
-      '@ethersproject/wallet':
-        specifier: ^5.6.0
-        version: 5.7.0
-      ansi-colors:
-        specifier: ^4.1.1
-        version: 4.1.3
-      cli-progress:
-        specifier: ^3.10.0
-        version: 3.12.0
-      commander:
-        specifier: ^9.3.0
-        version: 9.5.0
-      concurrently:
-        specifier: ^7.1.0
-        version: 7.6.0
-      docker-compose:
-        specifier: ^0.24.7
-        version: 0.24.8
-      dotenv:
-        specifier: ^16.0.1
-        version: 16.4.5
-      js-yaml:
-        specifier: ^4.1.0
-        version: 4.1.0
-      lz4:
-        specifier: ^0.6.5
-        version: 0.6.5
-      progress-stream:
-        specifier: ^2.0.0
-        version: 2.0.0
-      tar-fs:
-        specifier: ^2.1.1
-        version: 2.1.1
-      viem:
-        specifier: ^2.21.37
-        version: 2.21.40(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)
-      wait-on:
-        specifier: ^6.0.1
-        version: 6.0.1
-
 packages:
 
   '@adobe/css-tools@4.3.3':
@@ -3863,6 +3821,7 @@ packages:
 
   acorn-import-assertions@1.9.0:
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
+    deprecated: package has been renamed to acorn-import-attributes
     peerDependencies:
       acorn: ^8
 
diff --git a/src/components/pages/AnnouncementBanner.tsx b/src/components/pages/AnnouncementBanner.tsx
index f36fd18c9..42815bf0e 100644
--- a/src/components/pages/AnnouncementBanner.tsx
+++ b/src/components/pages/AnnouncementBanner.tsx
@@ -7,15 +7,37 @@ import { Button, Typography } from '@ensdomains/thorin'
 const Container = styled(Link)(
   ({ theme }) => css`
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     width: ${theme.space.full};
     max-width: 466px;
     padding: ${theme.space['4']};
     align-items: center;
+    justify-content: space-between;
     gap: ${theme.space['4']};
     align-self: center;
     border-radius: ${theme.radii['2xLarge']};
     background-color: ${theme.colors.backgroundPrimary};
+
+    @media (max-width: 640px) {
+      a {
+        width: 100%;
+      }
+    }
+
+    @media (min-width: 640px) {
+      flex-direction: row;
+    }
+  `,
+)
+
+const TextContainer = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${theme.space['4']};
+
+    width: ${theme.space.full};
   `,
 )
 
@@ -30,14 +52,16 @@ export const AnnouncementBanner = () => {
 
   return (
     <Container href="/ens-v2">
-      <img src="/migrate/confetti.png" alt="" height={33} width={33} />
-      <Text>
-        <Typography fontVariant="largeBold">{t('banner.title')}</Typography>
-        <Typography fontVariant="small" color="grey">
-          {t('banner.caption')}
-        </Typography>
-      </Text>
-      <Button colorStyle="greenPrimary" width="max">
+      <TextContainer>
+        <img src="/migrate/confetti.png" alt="" height={33} width={33} />
+        <Text>
+          <Typography fontVariant="largeBold">{t('banner.title')}</Typography>
+          <Typography fontVariant="small" color="grey">
+            {t('banner.caption')}
+          </Typography>
+        </Text>
+      </TextContainer>
+      <Button as="a" href="/ens-v2" colorStyle="greenPrimary" width="max">
         {t('banner.cta')}
       </Button>
     </Container>