diff --git a/public/exclamation-triangle-fill.svg b/public/exclamation-triangle-fill.svg
new file mode 100644
index 00000000..16c5fd63
--- /dev/null
+++ b/public/exclamation-triangle-fill.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M27.4854 27.1399H4.51642C3.07244 27.1399 2.18959 25.5544 2.95006 24.3269L14.4692 5.73352C15.1908 4.56875 16.886 4.57104 17.6045 5.73775L29.0544 24.3311C29.8104 25.5588 28.9271 27.1399 27.4854 27.1399ZM17.0005 14.0006C17.0005 13.4484 16.5528 13.0006 16.0005 13.0006C15.4482 13.0006 15.0005 13.4484 15.0005 14.0006V19.3341C15.0005 19.8864 15.4482 20.3341 16.0005 20.3341C16.5528 20.3341 17.0005 19.8864 17.0005 19.3341V14.0006ZM16.0005 22.0009C15.4482 22.0009 15.0005 22.4486 15.0005 23.0009C15.0005 23.5532 15.4482 24.0009 16.0005 24.0009H16.0138C16.5661 24.0009 17.0138 23.5532 17.0138 23.0009C17.0138 22.4486 16.5661 22.0009 16.0138 22.0009H16.0005Z"
+        fill="#EC0E4D" />
+</svg>
+    
\ No newline at end of file
diff --git a/public/unsupported-network.svg b/public/unsupported-network.svg
deleted file mode 100644
index 0b0449d9..00000000
--- a/public/unsupported-network.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="44" height="40" viewBox="0 0 44 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.9996 15.3335V24.6668M21.9996 29.3335H22.0229M5.83378 38.6668H38.1654C41.7578 38.6668 44.003 34.7779 42.2068 31.6668L26.041 3.66683C24.2448 0.555719 19.7543 0.555718 17.9581 3.66683L1.79233 31.6668C-0.00386756 34.7779 2.24138 38.6668 5.83378 38.6668Z" stroke="#D233F2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 0d37ebcc..58a5ef95 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -85,17 +85,19 @@ type ModalHeaderProps =
       children: string;
       tooltipText?: null;
       size?: null;
+      noMargin?: boolean;
     }
   | {
       children: string;
       tooltipText: string;
       size: 'large';
+      noMargin?: boolean;
     };
 
-export const ModalHeader = ({ children, tooltipText, size }: ModalHeaderProps) => {
+export const ModalHeader = ({ children, tooltipText, size, noMargin = false }: ModalHeaderProps) => {
   if (size === 'large') {
     return (
-      <div className={classNames(styles.modalHeader, styles.modalHeaderLarge)}>
+      <div className={classNames(styles.modalHeader, styles.modalHeaderLarge, { [styles.noMargin]: noMargin })}>
         <h5>{children}</h5>
 
         <Tooltip overlay={tooltipText}>
@@ -109,7 +111,7 @@ export const ModalHeader = ({ children, tooltipText, size }: ModalHeaderProps) =
   }
 
   return (
-    <div className={classNames(styles.modalHeader, styles.modalHeaderNormal)}>
+    <div className={classNames(styles.modalHeader, styles.modalHeaderNormal, { [styles.noMargin]: noMargin })}>
       <h5>{children}</h5>
     </div>
   );
diff --git a/src/components/sign-in/sign-in.module.scss b/src/components/sign-in/sign-in.module.scss
index d1732f90..f95f4d1b 100644
--- a/src/components/sign-in/sign-in.module.scss
+++ b/src/components/sign-in/sign-in.module.scss
@@ -116,6 +116,52 @@
   }
 }
 
+.unsupportedModalContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .unsupportedNetworkIcon {
-  margin: $space-lg;
+  margin-top: 80px;
+
+  @media (min-width: $sm) {
+    margin-top: 0;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.unsupportedModalContent {
+  padding-top: 16px;
+  color: $color-dark-blue-400;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+
+  * {
+    text-wrap: pretty;
+  }
+
+  p {
+    @include font-body-9;
+  }
+
+  span {
+    @include font-body-7;
+  }
+
+  @media (min-width: $sm) {
+    p {
+      @include font-body-6;
+    }
+
+    span {
+      @include font-body-4;
+    }
+  }
 }
diff --git a/src/components/sign-in/sign-in.tsx b/src/components/sign-in/sign-in.tsx
index 98739dd1..7df22ae5 100644
--- a/src/components/sign-in/sign-in.tsx
+++ b/src/components/sign-in/sign-in.tsx
@@ -4,10 +4,9 @@ import { Address, useDisconnect, useEnsName } from 'wagmi';
 import { useChainData } from '../../chain-data';
 import { abbrStr } from '../../chain-data/helpers';
 import ConnectButton from '../connect-button';
-import { Modal as GenericModal } from '../../components/modal';
+import { Modal as GenericModal, ModalHeader } from '../../components/modal';
 import Dropdown, { DropdownMenu, DropdownMenuItem } from '../../components/dropdown';
 import styles from './sign-in.module.scss';
-import globalStyles from '../../styles/global-styles.module.scss';
 import { images } from '../../utils';
 import { SUPPORTED_NETWORKS, useProviderSubscriptions } from '../../contracts';
 import DisconnectIcon from './disconnect-icon';
@@ -97,26 +96,35 @@ const SignIn = ({ dark, position }: Props) => {
       )}
       {provider && <ConnectedStatus dark={dark} position={position} />}
       <GenericModal open={!isSupportedNetwork} onClose={() => {}} hideCloseButton>
-        <div className={globalStyles.textCenter}>
-          <img className={styles.unsupportedNetworkIcon} src={images.unsupportedNetwork} alt="network not supported" />
-          <h5>Unsupported chain!</h5>
+        <div className={styles.unsupportedModalContainer}>
+          <img
+            className={styles.unsupportedNetworkIcon}
+            src={images.exclamationTriangleFill}
+            alt="network not supported"
+          />
 
-          <p className={globalStyles.mtXl}>
-            Supported networks:{' '}
-            {supportedNetworks
-              .map((network) => <b>{network}</b>)
-              .map((Component, i) => (
-                <Fragment key={i}>
-                  {i !== 0 && ', '}
-                  {Component}
-                </Fragment>
-              ))}
-          </p>
-          <p className={globalStyles.mtXl}>
-            Current network: <b>{networkName}</b>
-          </p>
+          <ModalHeader noMargin>Unsupported chain!</ModalHeader>
 
-          <p className={globalStyles.mtXl}>Please connect your wallet to a supported network.</p>
+          <div className={styles.unsupportedModalContent}>
+            <div>
+              <p>
+                Supported networks:{' '}
+                {supportedNetworks
+                  .map((network) => <span>{network}</span>)
+                  .map((Component, i) => (
+                    <Fragment key={i}>
+                      {i !== 0 && ', '}
+                      {Component}
+                    </Fragment>
+                  ))}
+              </p>
+              <p>
+                Current network: <b>{networkName}</b>
+              </p>
+            </div>
+
+            <p>Please use your wallet and connect to one of the supported networks.</p>
+          </div>
         </div>
       </GenericModal>
     </>
diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts
index c5d09986..0df94250 100644
--- a/src/utils/image-list.ts
+++ b/src/utils/image-list.ts
@@ -16,6 +16,7 @@ export const images = {
   connectedDark: '/connected-dark.svg',
   disconnect: '/disconnect.svg',
   dropdown: '/dropdown.svg',
+  exclamationTriangleFill: '/exclamation-triangle-fill.svg',
   error: '/error.svg',
   externalLink: '/external-link.svg',
   hamburgerMenu: '/hamburger-menu.svg',
@@ -34,7 +35,6 @@ export const images = {
   votedAgainst: '/voted-against.svg',
   votedFor: '/voted-for.svg',
   warning: '/warning.svg',
-  unsupportedNetwork: '/unsupported-network.svg',
 };
 
 // We only want to 'preload' certain images that will definitely be displayed immediately.