diff --git a/web/packages/ui/src/header/index.tsx b/web/packages/ui/src/header/index.tsx
index b5b831d98..c63b11d74 100644
--- a/web/packages/ui/src/header/index.tsx
+++ b/web/packages/ui/src/header/index.tsx
@@ -149,12 +149,27 @@ const Header = React.memo(
                 color: 'text.primary',
                 textDecoration: 'none',
                 '&:hover': { color: 'primary.main' },
+                ...(mobile && {
+                  minWidth: 0,
+                  overflow: 'hidden',
+                }),
               }}
             >
-              {logo && <img src={logo} alt='logo' height={36} />}
+              {logo && (
+                <img
+                  src={logo}
+                  alt='logo'
+                  height={36}
+                  style={{
+                    flexShrink: mobile ? 1 : 0,
+                    maxWidth: mobile ? '100%' : 'none',
+                    objectFit: 'contain',
+                  }}
+                />
+              )}
               <Box
                 sx={{
-                  fontSize: 20,
+                  fontSize: mobile ? 16 : 20,
                   whiteSpace: 'nowrap',
                   textOverflow: 'ellipsis',
                   overflow: 'hidden',
diff --git a/web/packages/ui/src/welcomeHeader/index.tsx b/web/packages/ui/src/welcomeHeader/index.tsx
index 1bab47af3..ed391c11b 100644
--- a/web/packages/ui/src/welcomeHeader/index.tsx
+++ b/web/packages/ui/src/welcomeHeader/index.tsx
@@ -175,12 +175,27 @@ const Header = React.memo(
                 color: 'text.primary',
                 textDecoration: 'none',
                 '&:hover': { color: 'primary.main' },
+                ...(mobile && {
+                  minWidth: 0,
+                  overflow: 'hidden',
+                }),
               }}
             >
-              {logo && <img src={logo} alt='logo' height={36} />}
+              {logo && (
+                <img
+                  src={logo}
+                  alt='logo'
+                  height={36}
+                  style={{
+                    flexShrink: mobile ? 1 : 0,
+                    maxWidth: mobile ? '100%' : 'none',
+                    objectFit: 'contain',
+                  }}
+                />
+              )}
               <Box
                 sx={{
-                  fontSize: 20,
+                  fontSize: mobile ? 16 : 20,
                   whiteSpace: 'nowrap',
                   textOverflow: 'ellipsis',
                   overflow: 'hidden',