diff --git a/packages/react-kit/src/components/magicLink/Login.tsx b/packages/react-kit/src/components/magicLink/Login.tsx
index c83cb8f60..d14c64af3 100644
--- a/packages/react-kit/src/components/magicLink/Login.tsx
+++ b/packages/react-kit/src/components/magicLink/Login.tsx
@@ -4,12 +4,10 @@ import { useUser } from "./UserContext";
 import { useMagic } from "../../hooks";
 import { Button } from "../buttons/Button";
 import { Spinner } from "../ui/loading/Spinner";
-
-type MagicLoginButtonProps = Omit<
-  Parameters<typeof Button>[0],
-  "onClick" | "disabled"
->;
-export const MagicLoginButton = (props: MagicLoginButtonProps) => {
+type MagicLoginButtonProps = {
+  buttonProps: Omit<Parameters<typeof Button>[0], "onClick" | "disabled">;
+};
+export const MagicLoginButton = ({ buttonProps }: MagicLoginButtonProps) => {
   const magic = useMagic();
   const { setUser } = useUser();
   const [disabled, setDisabled] = useState(false);
@@ -35,7 +33,7 @@ export const MagicLoginButton = (props: MagicLoginButtonProps) => {
   };
 
   return (
-    <Button {...props} onClick={connect} disabled={disabled}>
+    <Button {...buttonProps} onClick={connect} disabled={disabled}>
       {loading ? (
         <>
           Loading
diff --git a/packages/react-kit/src/components/magicLink/MagicContext.tsx b/packages/react-kit/src/components/magicLink/MagicContext.tsx
index 1c011ac62..4fb2606b6 100644
--- a/packages/react-kit/src/components/magicLink/MagicContext.tsx
+++ b/packages/react-kit/src/components/magicLink/MagicContext.tsx
@@ -56,6 +56,7 @@ export const InnerMagicProvider = ({
       .catch(() => console.info("magic link could not be preloaded"));
     return {
       magic: magic as typeof magic & { uuid: string },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       magicProvider: new ethers.providers.Web3Provider(magic.rpcProvider as any)
     }; // return magic provider too
   }, [chainId, magicLinkKey, rpcUrls]);
diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
index fbc8492e9..746c34220 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
@@ -3,8 +3,8 @@ import React, { useEffect } from "react";
 import { Exchange } from "../../../../../types/exchange";
 import Confirmation, { ConfirmationProps } from "./Confirmation";
 import { NonModalProps, useNonModalContext } from "../../../nonModal/NonModal";
-import Typography from "../../../../ui/Typography";
 import { theme } from "../../../../../theme";
+import { RedeemHeader } from "../RedeemHeader";
 import { useAccount } from "../../../../../hooks/connection/connection";
 
 const colors = theme.colors.light;
@@ -34,11 +34,7 @@ export function ConfirmationView({
   useEffect(() => {
     dispatch({
       payload: {
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
         }
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
index 9d1841947..bd9ed4080 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import Grid from "../../../../ui/Grid";
-import Typography from "../../../../ui/Typography";
 import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../types/exchange";
 import ContractualAgreement from "../../../../contractualAgreement/ContractualAgreement";
@@ -21,13 +20,13 @@ export function ContractualAgreementView({ onBackClick, exchange }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <Grid>
+          <Grid style={{ flex: "1" }}>
             <ArrowLeft
               onClick={onBackClick}
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3">Contractual Agreement</Typography>
+            <h3 style={{ width: "100%", flex: 1 }}>Contractual Agreement</h3>
           </Grid>
         ),
         contentStyle: {
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangePolicy/ExchangePolicy.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangePolicy/ExchangePolicy.tsx
index 0d7b698b1..3fc654df6 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangePolicy/ExchangePolicy.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangePolicy/ExchangePolicy.tsx
@@ -32,7 +32,7 @@ export function ExchangePolicy({
     dispatch({
       payload: {
         headerComponent: (
-          <Grid gap="1rem">
+          <Grid gap="1rem" style={{ flex: "1" }}>
             <ArrowLeft
               onClick={onBackClick}
               size={32}
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
index 1b42c73e4..dccec5d8f 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
@@ -19,13 +19,13 @@ export function ExchangeFullDescriptionView({ onBackClick, exchange }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <Grid>
+          <Grid style={{ flex: "1" }}>
             <ArrowLeft
               onClick={onBackClick}
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3">
+            <Typography tag="h3" style={{ flex: "1" }}>
               {exchange?.offer.metadata.name || ""}
             </Typography>
           </Grid>
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx
index 119e7186f..bbfafbfa5 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx
@@ -127,7 +127,7 @@ export function ExchangeView({
     dispatch({
       payload: {
         headerComponent: (
-          <Grid gap="1rem">
+          <Grid gap="1rem" style={{ flex: "1" }}>
             <House
               onClick={onHouseClick}
               size={32}
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx
index b1f364bdd..7880a8d3d 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx
@@ -16,6 +16,7 @@ import { Button } from "../../../../buttons/Button";
 import GridContainer from "../../../../ui/GridContainer";
 import { useRedemptionContext } from "../../../../widgets/redemption/provider/RedemptionContext";
 import { useNonModalContext } from "../../../nonModal/NonModal";
+import { RedeemHeader } from "../RedeemHeader";
 
 const colors = theme.colors.light;
 
@@ -61,15 +62,13 @@ export function RedeemSuccess({
     dispatch({
       payload: {
         headerComponent: (
-          <Grid>
+          <Grid style={{ flex: "1" }}>
             <House
               onClick={onHouseClick}
               size={32}
               style={{ cursor: "pointer", flexShrink: 0 }}
             />
-            <Typography tag="h3" $width="100%">
-              Redeem your item
-            </Typography>
+            {RedeemHeader}
           </Grid>
         ),
         contentStyle: {
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx
index 566797ba6..8e26494da 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx
@@ -31,13 +31,13 @@ export const CancellationView: React.FC<CancellationViewProps> = ({
     dispatch({
       payload: {
         headerComponent: isCancelModeOnly ? (
-          <Grid gap="1rem">
+          <Grid gap="1rem" style={{ flex: "1" }}>
             <Typography tag="h3" style={{ flex: "1 1" }}>
               Cancel exchange
             </Typography>
           </Grid>
         ) : (
-          <Grid gap="1rem">
+          <Grid gap="1rem" style={{ flex: "1" }}>
             <ArrowLeft
               onClick={onBackClick}
               size={32}
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx
index e3077f3fe..bb2074978 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from "react";
-import Typography from "../../../../../ui/Typography";
 import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../../types/exchange";
 import ExpireVoucher, { ExpireVoucherProps } from "./ExpireVoucher";
 import { useNonModalContext } from "../../../../nonModal/NonModal";
 import { theme } from "../../../../../../theme";
+import Grid from "../../../../../ui/Grid";
 
 const colors = theme.colors.light;
 export interface ExpireVoucherViewProps {
@@ -23,14 +23,14 @@ export const ExpireVoucherView: React.FC<ExpireVoucherViewProps> = ({
     dispatch({
       payload: {
         headerComponent: (
-          <>
+          <Grid style={{ flex: "1" }} gap="1rem">
             <ArrowLeft
               onClick={() => onBackClick()}
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3">Expire voucher</Typography>
-          </>
+            <h3 style={{ width: "100%", flex: 1 }}>Expire voucher</h3>
+          </Grid>
         ),
         contentStyle: {
           background: colors.white
diff --git a/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx b/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
index c9bdf9a20..0444214a6 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import Grid from "../../../../ui/Grid";
-import Typography from "../../../../ui/Typography";
 import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../types/exchange";
 import License from "../../../../license/License";
@@ -19,13 +18,13 @@ export function LicenseAgreementView({ onBackClick, exchange }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <Grid>
+          <Grid style={{ flex: "1" }} gap="1rem">
             <ArrowLeft
               onClick={onBackClick}
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3">License Agreement</Typography>
+            <h3 style={{ width: "100%", flex: 1 }}>License Agreement</h3>
           </Grid>
         ),
         contentStyle: {
diff --git a/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx b/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx
index adae75451..a9831704d 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx
@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import { useBuyers } from "../../../../../hooks/useBuyers";
 import { Checkbox } from "../../../../form";
 import Loading from "../../../../ui/loading/Loading";
-import Typography from "../../../../ui/Typography";
 import Exchanges from "./Exchanges";
 import { ExchangesStates, WithExchangesData } from "./WithExchangesData";
 import { Exchange } from "../../../../../types/exchange";
@@ -47,9 +46,7 @@ export function MyItems({
     dispatch({
       payload: {
         headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Manage your exchanges
-          </Typography>
+          <h3 style={{ width: "100%", flex: 1 }}>Manage your exchanges</h3>
         ),
         contentStyle: {
           background: colors.lightGrey
diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx
index bca563f12..88ba08e1a 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from "react";
-import Typography from "../../../../ui/Typography";
 import RedeemForm from "./RedeemForm";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { Exchange } from "../../../../../types/exchange";
 import { theme } from "../../../../../theme";
 import { useAccount } from "../../../../../hooks/connection/connection";
+import { RedeemHeader } from "../RedeemHeader";
 
 const colors = theme.colors.light;
 
@@ -26,11 +26,7 @@ export default function RedeemFormView({
   useEffect(() => {
     dispatch({
       payload: {
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
         }
diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemHeader.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemHeader.tsx
new file mode 100644
index 000000000..08ea2b3d0
--- /dev/null
+++ b/packages/react-kit/src/components/modal/components/Redeem/RedeemHeader.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+export const RedeemHeader = (
+  <h3 style={{ width: "100%", flex: 1 }}>Redeem your item</h3>
+);
diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx
index 07e0c589a..79005c760 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx
@@ -39,7 +39,6 @@ import { ContactPreference } from "./const";
 import useCheckExchangePolicy from "../../../../hooks/useCheckExchangePolicy";
 import { useConvertionRate } from "../../../widgets/finance/convertion-rate/useConvertionRate";
 import NonModal, { NonModalProps } from "../../nonModal/NonModal";
-import Typography from "../../../ui/Typography";
 import { useConfigContext } from "../../../config/ConfigContext";
 import {
   RedemptionWidgetAction,
@@ -48,6 +47,7 @@ import {
 import { BosonFooter } from "./BosonFooter";
 import { theme } from "../../../../theme";
 import { useAccount } from "../../../../hooks/connection/connection";
+import { RedeemHeader } from "./RedeemHeader";
 
 const colors = theme.colors.light;
 enum ActiveStep {
@@ -98,11 +98,7 @@ export default function RedeemWrapper({
     <NonModal
       props={{
         hideModal,
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         footerComponent: <BosonFooter />,
         contentStyle: {
           background: colors.white
diff --git a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/PurchaseOverviewView.tsx b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/PurchaseOverviewView.tsx
index 174ce9705..968127243 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/PurchaseOverviewView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/PurchaseOverviewView.tsx
@@ -3,6 +3,7 @@ import React, { useEffect } from "react";
 import PurchaseOverview from "./PurchaseOverview";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import Grid from "../../../../ui/Grid";
 
 const colors = theme.colors.light;
 type Props = {
@@ -14,11 +15,13 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <ArrowLeft
-            onClick={onBackClick}
-            size={32}
-            style={{ cursor: "pointer", flexShrink: 0 }}
-          />
+          <Grid style={{ flex: "1" }}>
+            <ArrowLeft
+              onClick={onBackClick}
+              size={32}
+              style={{ cursor: "pointer" }}
+            />
+          </Grid>
         ),
         contentStyle: {
           background: colors.white
diff --git a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
index f9268a8cb..c271bb192 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
@@ -7,8 +7,8 @@ import { CommitStep } from "./style";
 import Step from "../../../../ui/Step";
 import { breakpoint } from "../../../../../lib/ui/breakpoint";
 import { useNonModalContext } from "../../../nonModal/NonModal";
-import Typography from "../../../../ui/Typography";
 import { theme } from "../../../../../theme";
+import { RedeemHeader } from "../RedeemHeader";
 
 const colors = theme.colors.light;
 const CommitStepWrapper = styled.div`
@@ -50,11 +50,7 @@ export default function StepsOverview({ onNextClick }: Props) {
   useEffect(() => {
     dispatch({
       payload: {
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
         }
diff --git a/packages/react-kit/src/components/modal/nonModal/Header.tsx b/packages/react-kit/src/components/modal/nonModal/Header.tsx
index 48a30d6d4..8960f0941 100644
--- a/packages/react-kit/src/components/modal/nonModal/Header.tsx
+++ b/packages/react-kit/src/components/modal/nonModal/Header.tsx
@@ -1,26 +1,37 @@
-import React, { ReactNode } from "react";
+import React, { Fragment, ReactNode } from "react";
 import { theme } from "../../../theme";
 import styled from "styled-components";
 import { X } from "phosphor-react";
 import Grid from "../../ui/Grid";
 import ConnectButton from "../../wallet/ConnectButton";
 import ThemedButton from "../../ui/ThemedButton";
-import Typography from "../../ui/Typography";
+import { useBreakpoints } from "../../../hooks/useBreakpoints";
 
 const colors = theme.colors.light;
-const Wrapper = styled(Typography)<{ $title?: string }>`
+const Wrapper = styled.div<{ $flexWrap: string }>`
+  container-type: inline-size;
   position: relative;
-
+  width: 100%;
   text-align: left;
-  padding: 1rem 2rem;
+  padding: 1rem 1rem 1rem 2rem;
   display: flex;
+  flex-wrap: ${({ $flexWrap }) => $flexWrap};
   border-bottom: 2px solid ${colors.border};
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-between;
   gap: 0.5rem;
+
+  > * {
+    margin: 0;
+    align-self: center;
+  }
 `;
 
 const Close = styled(X)`
+  && {
+    stroke: unset;
+  }
+
   line {
     stroke: ${colors.darkGrey};
   }
@@ -39,22 +50,31 @@ const Header: React.FC<HeaderProps> = ({
   handleOnClose,
   showConnectButton
 }) => {
+  const { isLteXS } = useBreakpoints();
+  const InnerContainer = isLteXS ? Grid : Fragment;
   return (
-    <>
-      {HeaderComponent && (
-        <Wrapper tag="div" margin="0">
-          {HeaderComponent}
-          <Grid justifyContent="flex-end">
-            {showConnectButton && <ConnectButton showChangeWallet />}
-            {closable && (
-              <ThemedButton data-close theme="blank" onClick={handleOnClose}>
-                <Close size={32} />
-              </ThemedButton>
-            )}
-          </Grid>
-        </Wrapper>
+    <Wrapper $flexWrap={isLteXS ? "wrap" : "nowrap"}>
+      <InnerContainer>
+        {HeaderComponent}
+        {showConnectButton && !isLteXS && <ConnectButton showChangeWallet />}
+        {closable && (
+          <ThemedButton
+            data-close
+            theme="blank"
+            onClick={handleOnClose}
+            id="close"
+          >
+            <Close size={32} />
+          </ThemedButton>
+        )}
+      </InnerContainer>
+
+      {showConnectButton && isLteXS && (
+        <Grid justifyContent="flex-end">
+          <ConnectButton showChangeWallet />
+        </Grid>
       )}
-    </>
+    </Wrapper>
   );
 };
 
diff --git a/packages/react-kit/src/components/wallet/ConnectButton.tsx b/packages/react-kit/src/components/wallet/ConnectButton.tsx
index f5d488922..7fd423a57 100644
--- a/packages/react-kit/src/components/wallet/ConnectButton.tsx
+++ b/packages/react-kit/src/components/wallet/ConnectButton.tsx
@@ -9,7 +9,7 @@ import { Button } from "../buttons/Button";
 import ThemedButton from "../ui/ThemedButton";
 import { useBreakpoints } from "../../hooks/useBreakpoints";
 import { saveItemInStorage } from "../widgets/finance/storage/useLocalStorage";
-import { Wallet } from "phosphor-react";
+import { SignOut, Wallet } from "phosphor-react";
 import { useIsMagicLoggedIn } from "../../hooks";
 import { useAccount, useChainId } from "../../hooks/connection/connection";
 import { useDisconnect } from "../../hooks/connection/useDisconnect";
@@ -60,14 +60,19 @@ interface Props {
   showAddress?: boolean;
   showChangeWallet?: boolean;
 }
-
+const iconProps = {
+  size: 32,
+  style: {
+    cursor: "pointer"
+  } as const
+} as const;
 export default function ConnectButton({
   navigationBarPosition = "",
   showAddress = true,
   showChangeWallet,
   ...rest
 }: Props) {
-  const { isLteXS } = useBreakpoints();
+  const { isLteXS, isLteS } = useBreakpoints();
   const isSideBar = ["left", "right"].includes(navigationBarPosition);
   const buttonPadding = isSideBar ? "0.75rem 1rem" : "";
   const justifyContent = isSideBar ? "center" : "";
@@ -89,7 +94,11 @@ export default function ConnectButton({
         account && Sentry.setTag("wallet_address", account?.address);
 
         return (
-          <div style={{ display: "flex", gap: 12 }} {...rest}>
+          <div
+            className="rainbow"
+            style={{ display: "flex", gap: "12px" }}
+            {...rest}
+          >
             <InnerProvider>
               <InnerContext.Consumer>
                 {({ isMagicLoggedIn, chainId, globalAccount, disconnect }) => {
@@ -104,7 +113,12 @@ export default function ConnectButton({
 
                       return (
                         <>
-                          <MagicLoginButton />
+                          <MagicLoginButton
+                            buttonProps={{
+                              size: isLteXS ? "small" : "regular",
+                              variant: "primaryFill"
+                            }}
+                          />
                           <Button
                             onClick={() => {
                               saveItemInStorage(
@@ -149,6 +163,8 @@ export default function ConnectButton({
                         style={{
                           display: "flex",
                           gap: 12,
+                          flexWrap: "wrap",
+                          alignItems: "center",
                           ...(justifyContent && {
                             justifyContent
                           }),
@@ -157,11 +173,7 @@ export default function ConnectButton({
                       >
                         {showChangeWallet && !isMagicLoggedIn && (
                           <Wallet
-                            style={{
-                              cursor: "pointer",
-                              height: "100%"
-                            }}
-                            size={32}
+                            {...iconProps}
                             onClick={async () => {
                               try {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -202,13 +214,17 @@ export default function ConnectButton({
                           )}
                           {showAddress && account?.displayName}
                         </ThemedButton>
-                        <ThemedButton
-                          theme="outline"
-                          size={isLteXS ? "small" : "regular"}
-                          onClick={disconnect}
-                        >
-                          Disconnect
-                        </ThemedButton>
+                        {isLteS ? (
+                          <SignOut {...iconProps} onClick={disconnect} />
+                        ) : (
+                          <ThemedButton
+                            theme="outline"
+                            size={isLteXS ? "small" : "regular"}
+                            onClick={disconnect}
+                          >
+                            Disconnect
+                          </ThemedButton>
+                        )}
                       </div>
                     );
                   })();